Most mobile e-commerce sites can be improved. But how? This six minute clip from my Mind the Gap presentation provides a step-by-step walkthrough of how to make a standard mobile e-commerce Web site more effective and why with supporting data and design tips.
Transcript
To illustrate, let's look at an example in e-commerce. I ended up on this one because it made a top 10 e-commerce designs list somewhere. When I followed the link though, I only found two things: an app install banner and a full screen email newsletter promo. Not a great start.
So, I did what most people do and dismissed the pop-up, revealing a promotional banner, an icon-only navigation system, and a feature carousel. Encouraged by how my dismissal of the free shipping interstitial began to reveal more useful content, I tried removing the two promos at the top, and something really interesting happened. I got to a list of categories. Which doesn't seem all that compelling until you consider the impact of this UI.
In a few tests, Growth Rock compared standard e-commerce feature carousel-based layouts with ones that included a few top-level categories, making it clear what kind of products are available on the site. The result was a 5% increase in completed orders. Note the metric we're tracking here. Not clicks on the links, but actual impact on meaningful things, like completed orders.
There was also evidence they ran a similar experiment in another vertical, in this case for an ice cream retailer. Listing their categories up front led to a similar jump in category page views, and in this case, a 29% increase in completed orders.
Another example comes from Google's mobile optimization efforts, where they saw a similar outcome. Edgars is a large fashion retailer in South Africa. They removed the animated banners, introduced some high-level categories near the top of their screen, and saw an increase in revenue per visitor of about 13%. So it seems like getting the categories on the site to be more visible is a good idea, especially if we are tracking impactful metrics like sales.
But there's more we can do here to help people get the value of this product and close that third gap. So next we'll tackle the icon-based navigation system. It's worth mentioning that even the icons we take most for granted, like the search icon, are not as universal as we'd like to believe. So let's clarify the search function a little bit.
Instead of using just icons for a critical function like search, we're going to be more explicit in our product UI and close the gap between what something is and why it exists with a search bar. This also gives us a chance to call out popular items and again, reinforce what the site has to offer. I specifically call search out as critical because exposing it by default can also help with conversions.
In this case, boosting the number of searches as the conversion rate for users who search is usually higher than for users who don't interact with it, probably because they have specific intent. So now we have a pulled out search area, category links exposed, and well, how else can we make it easier for people to get to the value of this product?
It turns out if we drop the featured image, which probably doesn't drive that much in the way of core metrics, we can show some of the actual products this site sells. Imagine that, showing popular or trending products on an e-commerce site. But let's not just show two.
Let's center this module to get more content on the screen and make the images run off the side a bit so people can scroll for more. Right where the thumb is for easy one-handed scrolling. This puts the ability to browse top products in a comfortable to reach zone on large screen sizes. Should make all our one-handed millennial users super happy. Because they'll scroll.
Pinterest found that even removing core features like the number of pins and likes in onboarding increased the number of photos they could show people at any given time, which increased the likelihood they'd find content they like and thereby become an active Pinterest user. Same principle applies here.
Overall, I think we've made progress on getting people to experience the value of this site a bit more directly. We could do even better maybe by putting the products up top and categories next. The goal is to get people from the state of, huh, I think I want to get out of here, to I get it, looks like my kind of thing.
But you may say, Luke, what about that free shipping promo? They were making a really big deal out of that, so it must be important, right? Indeed, the top reason for abandoning a shopping cart after browsing is shipping costs, taxes, etc. So free shipping is a winner and people should know about it. I'm not against that. I just contend that there's probably a better time and place for it.
Perhaps on the product page or the actual checkout experience when total cost is on most people's minds. The tricky but very valuable thing that makes mobile design hard is finding the right time and place for things. It usually isn't right away on the home page with everything.
We can do this all day, but I'll add just one more consideration to this redesign. It's quite possible when someone looks at this design, they could say, but what about the brand? Now, I hope it comes through in the fonts, colors, and especially the products. What people mean when they say that is something more like this, some aspirational imagery that reflects the personality of the company, serves as a hook for people to dive in, like this edgy Mad Max style look.
And I agree, our site design is looking a little too plain. So, we can add in some brand imagery to bring back some soul. But even with this addition, I'd argue we still retain a lot of the functional benefits we've been adding, or rather emphasizing by removing other things. Just be mindful that the reasons we're adding the brand imagery are tied to customer needs and not just the agenda of some department, like brand marketing.
Else you'll end up back at the product experience that mashes up the agenda of multiple teams. Which is increasingly the norm out there. Now, I focused a lot on free people, but they're certainly not alone, looking at a number of other e-commerce sites.