Rethinking E-commerce Traditions
Exploring Web Shops Through a Lens of Efficiency
Overview
Within this two week concept project, I designed a new e-commerce experience for a small local gift shop. My goal was to eliminate every step of an e-commerce experience that was unnecessary both in visual and interactive aspects, creating the most efficient experience, while maintaining design patterns, and expectations of a modern online shopper. Through this solo project, I analyzed current online shopping experiences through a lens of efficiency: what makes shopping a quick and seamless experience; and which patterns have undeservingly persisted through time?
Tools
Sketch
Invision
Krita
Optimal Sort
Methods
Heuristic Analysis
Task Analysis
Layout Analysis
Feature Analysis
Usability Testing
Open Card Sort
Mixed Card Sort
Wireframing
Prototyping
Usability Testing
Who are we designing for: A look into the “Busy Buyer”
For this project, my target user is the “busy buyer,” a shopper who values their quickness in shopping, and may not care so much about reviews, deals, popularity of a particular item, or other qualities a more careful shopper might consider before purchasing.
They value being able to make decisive choices, and quickly complete their purchase. The Busy Buyer is likely to abandon a shopping experience if they are bombarded with too much visual information, or have to take repetitive steps in order to complete their purchase.
The Challenge: Translating a Brick and Mortar Business to a Seamless Online Shopping Experience
The challenge of this project was to bring the brick and mortar experience to online shoppers, who value efficiency above all else. How do we build a website tailored to the customer who walks in, knows exactly what they want, and checks out?
Key:
Red- Every Completely Unnecessary Step
Orange- Every Step that could be expedited or is unnecessary based on user choices
Yellow- Every animation that is not needed to continue shopping
Original Frictions
Finding a particular Item
No way to “expedite” process
Repetitive processes for multiple items
Unnecessary steps throughout checkout
Without reading the user flow in detail, it’s clear that there are many steps of this process that would be particularly frustrating, and maybe even discouraging for the busy buyer.
Checking Out
Most egregiously inefficient was the checkout process, in which users were forced to fill out information that was quite probably never necessary- such as filling out their address before they were asked if they wanted delivery or pick up, entering their email and phone- which wouldn’t be necessary for delivery or pick up etc.
And although users could see all of the information they needed to fill out in advance, they could only move on to the next stage of the process by completing the current stage of the form, which was both visually overwhelming, and time consuming in the eyes of a busy buyer.
Finding the Right Item
The other particularly problematic stage in shopping was finding the right item. There was no way to expedite the process of finding an options, meaning users just had to potentially scroll through the entire listing to find what they wanted. Once users found the right item, they were stuck in a loop of seeing the view cart page every single time they added an item to their cart, even though they could not delete items from their cart in this view.
Approach
I used competitive and comparative analysis in order to get an understanding of the prevailing design patterns and familiarize myself with the sites and experiences a busy buyer might experience on an everyday basis. I looked primarily at gift shops, from small local shops, like Wishbone, and big business level, such as Etsy.
Heuristic Analysis:
For five different eCommerce sites, I walked through the same three tasks (find a specific item, confirm items, and complete purchase) and did a heuristic analysis with specific attention to efficiency. Some particularly important heuristics included: minimal aesthetic design, error prevention, error recovery, user control and freedom, and, of course, efficiency.
Feature Analysis:
I completed a feature analysis for four different websites (two competitors, and two comparators) some of the most important features included add to cart/buy now features that expedite the shopping process, the ability to log in or pay with a third party, color preview, that let the user know their options without clicking into a second screen, and how that particular website displayed deals etc. It’s important to note that for our busy buyer, all of these features are not necessary, and some of them are even detrimental to the busy buyer's satisfaction.
Layout Analysis:
I analyzed the layouts of three different eCommerce sites to get a better idea of what some design patterns are amongst popular eCommerce sites.
Solution: Tailoring the E-commerce Experience to the Customer Who Isn’t Interested in the Experience of Shopping
This solution came in four main components:
“Quick shop”
Rather than clicking through loops of item pages, opening and closing the cart view, this design allows the user to immediately purchase an item that they’re interested in. They simply have to select the color and click the cart icon under the item picture in order to add it to their cart, or have the option to open the quick shop tab, which gives them the option to “add to cart” if they are still shopping, or “buy it now” which will take them to the check-out process immediately.
More Robust Navigation
The new method of finding the right item comes in two forms. The first, is a search bar, so that a user can type in exactly what they want and only need to see items that are related to what they are looking for.
The second is an interactive category list, as seen to the left of the products, so that they can be as specific as they need to if they are just browsing, but have an idea of the things they want. In order to make sure that they would find what they expected in the right categories, I went through two iterations of card sorting- an open and mixed cart sort (25 total participants.)
Simplified Checkout
The last change to the website was reordering the inputs on the check out process, so that each piece of information onscreen was immediately relevant and changeable. This particular change is important to our busy buyer, who would be frustrated at the amount of information they had to take the time to type in, without it being relevant to their particular purchase.
Results and Reflections
Although users want to spend as little time as possible on the actions of shopping (adding to cart, viewing, confirming, entering information, etc.) there are still some parts of eCommerce that we expect to do, such as viewing our cart, even if the items are still listed at the time of check out, etc.
To work with these expectations, I added the opportunity to take those steps in order to maximize satisfaction, while still not forcing users to take those extra steps. These primarily came through with the categories, users feel that if they know what they want, that they want to be as specific as possible, even if it means clicking in and out of overly-specific categories. Because many eCommerce sites force you to be more specific than you may want, some users still feel as though they need to be that specific.
There were also some differences in how people approached the checkout process. About half of the usability testers wanted to see one screen with all their information, where others liked that it was separated into different sections that they could click between. This is definitely something that I would like to do more usability testing with, and incorporate some A/B testing to get a better idea of how more people feel about each layout.
Thanks for reading! I hope you enjoyed.