UX & UI Design for eCommerce
We were able to solve a problem in eCommerce because we found ways to improve the user experience. This is the design process that got us there.
Mission and vision
Our mission was to turn "browsers" into shoppers. Our product would need to increase conversion rates for underperforming traffic sources like social media and display advertising.
Browsers are people who spend their time on the internet discovering and consuming visual content, usually without a specific task or strong intent.
We had a hunch...
Instead of sending eCommerce visitors directly from the top of the funnel (social media/advertising) to the bottom of the funnel (the eCommerce site), the marketer should only send someone to the eCommerce site when that person qualified as ready to buy. But there wasn't a way to guide someone step-by-step through a purchase path. We saw a need for a middle-of-funnel marketing tool for eCommerce.
Questions we had to answer:
1. Can we create a user experience that increases eCommerce conversion rates?
2. Will marketers adopt our approach and send traffic to us instead of the eCommerce site?
We started our design process by user testing the user flows that had been set up many by retail brands on social and eCommerce.
Then we talked with friends and friends of friends about how they use social to interact with brands and how they shop online.
We drew the existing purchase and mapped what we found people were feeling, thinking, and doing at each step.
It was clear from our early research that the online experience was less than ideal.
A "browser" experiences pain when they get to the the eCommerce site, whether that's the homepage, a category page, or a product page.
1. They feel lost & confused — because what they see on the landing page often doesn't relate to what they clicked on.
2. They feel frustrated — because they can't quickly and easily see what they wanted to see, which is often an outfit or the products in the advertising creative.
3. They feel overwhelmed — because there are too many options, too many decisions to make about where to go next.
4. They feel pressured — because they're being asked to buy something and they aren't ready to make a purchase decision.
We also thought about what influences someone to buy something.
A purchase depends on three things:
1) Exposure: How much someone is exposed to an item.
2) Desire: How much they desire that item.
3) Friction: The ease (or difficulty) involved with the whole process, from first seeing an item, to getting information to justify the purchase, and finally executing the transaction.
To influence purchase we would need to to increase exposure and desire, while reducing friction — we figured we could do that in the following ways:
How do we solve for the pain points and influence purchase?
Our design explorations would have to answer the following questions:
1. How might we: create a seamless user flow?
2. How might we: reduce friction and facilitate discovery?
3. How might we: simplify the experience so it's as "mindless" as social media sites?
4. How might we: create a place where people want to spend time window shopping?
To help answer our design questions, we looked at what was already working to hold people's attention in media and retail.
Our design inspiration came from image-based social sites, blogs, and magazines — places where people were already spending a lot of time online getting inspired.
We looked at pure-play eCommerce innovators (Amazon, Nasty Gal, Mr. Porter, and Betabrand) that we thought were doing a great job of combining editorial with commerce.
We also thought about what makes physical retails spaces so enjoyable for window shopping: everything in the store is viewable at once, it's easy to scan and to get a sense of what's there; it's easy to zoom in and zoom out, easy to pick things up and put them back down; there is no pressure to buy, it's a softer, more emotional sell.
Sketching a Solution
We pulled together features from each design inspiration that we thought would help solve for our design goals, and then we sketched a solution by combining our favorite features into a new purchase path.
Testing and Validating
With a solution defined, we created prototypes that would help us answer our initial assumptions.
To answer Question #2, "Will brands adopt a new purchase path?", we started doing customer interviews, followed by show-and-tell of our concept.
We talked to directors of digital and directors of eCommerce to validate problem-solution fit. We asked open ended questions about their view on the problem we had identified, current solutions they were using, and our approach to solving it.
Our first prototype was a product overview presentation. We turned the sketches into comps and user flows, and we explained the features, benefits, and value of our solution.
Those early customer interviews validated many of our ideas, but there were also assumptions we had to rethink. We got a more nuanced view of our customer: the various roles within the organization, the needs and motivations of each role, and the dynamics between departments.
To answer Question #1, "Can we lift conversion rates?", we found beta testers through our early sales meetings and built an MVP to get data.
Most people we talked to saw merit in our solution, but nearly everyone wanted to see proof that it worked. Thankfully, we were able to find two brands that were willing to let us run experiments with them. Our first beta testers were Native Shoes and a small company called Bento & Co.
We showed we could increase in time on site, items viewed, and click-through rates. The data from our MVP was enough to help us get our our first paying customers: Gap, Samsung, and Lenovo.
Over the years we refined and improved the product as we discovered more about customer needs and user needs. Today, the user experience we designed reliably lifts conversion rates by as much as 5X when A/B tested against traditional eCommerce pages.
Sur la Table: Gift Guide
Sur la Table: Shop-the-Recipe UI
Sur la Table: Gift Guide Animation
Gap: Shop-the-Look UI, Various Devices and Formats
Design Specs for Shop-the-Look UI
Gap: Shop-the-Look Animation
Gap: Video Player for Shoppable Videos
Gap: Shop-the-Episode UI