We’re stoked to release www.subtypestore.com, our latest online store and one of our biggest projects to date.
Could we make an online store with beautiful, immersive product photography that felt and operated more like an app than a static ecommerce site?
That was the challenge that we set ourselves when tasked with designing and developing Subtype, the Australian online destination for buying and experiencing the best in sneakers and streetwear.
Subtype Store was designed for the consumer that checks Facebook on the train on the way to work, clicks through to a post on the latest sneaker release, gets off and picks it up on another device to buy later on.
The whole process from product filtering, to cart and checkout UX is responsive to the device you’re using.
Flick. Pinch & Zoom – It’s all about the detail
The first thing you’ll notice about www.subtypestore.com is the stunning beautiful imagery on a clean background. Everything works just as well on a mobile with a level of detail more akin to an app than an online store.
Not just phone
Subtype looks just as great on your iPhone, Samsung, iPad or bargain bin tablet.
It’s a store designed and developed for the future.
How can we maximise conversion rate, engagement and spend per customer without increasing the amount of effort required to manage the store?
Subtype aren’t a brand with 50 staff and specialist web teams. They’re a small team who love streetwear and have to run both an online store and retail presence. They needed something that would tick over and do the selling for them.
Smart cart up-sells
Most upselling is clunky and just feels like random products have been thrown in front of you in hope that you’ll want to buy something extra.
We designed a feature into this WooCommerce store to check whether the users cart contains footwear. If it does and they haven’t already purchased shoe cleaner or something to protect their new purchase, we show this smart up-sell area.
It’s our version of ‘Would you like fries with that’? It worked well too – Jason Marxx shoe cleaner is their fifth highest-selling product online.
Linking content & brand
One of the big marketing features that we built into Subtype is the automatic linking of blog content about a brand to products by that brand, and vice versa.
You’re on the ETQ brand page? At the bottom you’ll see the latest blog posts specific to that brand.
You’re on a blog post about an ETQ sneaker release? You’ll see links to their latest products to make it easier to buy what you’re interested in.
The best thing – we developed it to be completely automatic so Subtypes content creators don’t have to spend any extra time on administration to turn content into sales.
What would the ultimate product page UX be like?
There are tens of thousands of product pages over the web. What combination looks the best, converts better than others and gives the user a beautiful experience?
After a lot of iterations we came up with the Subtype product page design:
- Images are front and center. Click a thumbnail and you don’t get a blacked out screen taking you away from everything, you get the image replacing the main image area. Hover over it? You’ll zoom to see more detail. It works just as well on mobile too!
- Most stores have drop-down menus to decide between sizes or colours. We went for buttons instead. It means less clicks and an immediate look at what sizes are available without having to dig around.
- Click the ‘add to cart’ button. You’ll see a spinning graphic instantly appear to signal that the store is processing your order so you don’t end up clicking it several times wondering if it worked.
- Create scarcity! Most of Subtype’s collection are short run and limited edition. If the stores running low on stock it’ll let the customer know that they better buy them now or they’ll miss out
The first ecommerce site ever built with SmoothState
SmoothState is an app-inspired framework that allows us to speed up a site, create transitions between pages of the site and create a smoother, more fluid experience.
Hard cuts and blank pages while everything loads break user focus and create confusion as layouts change or elements rearrange. Browse around the site and you’ll notice neat transitions between pages.
We can’t show you with a nice image because it’s a subtle transition. Check out the video below and you’ll see what we mean.
Subtype Store Wrap-up
www.subtypestore.com is completely responsive, has big, beautiful imagery and offers a completely unique experience with several key features built from scratch for the brand.
Best yet, it allows the brand to market effectively, present the products and brands in the best light and completely compliments the curated ethos of the experience.