Mobile E-Commerce Website
Context
Collared Cats, an online storefront that sells cat collars, found that 50% of their users abandon the site before placing an item in the cart. 70% who place an item in their cart abandon the cart at the account registration page.
Scope & Constraints
This project took 90 hours over the course of one month to simulate the Discovery, Design, and Validate phases of the UX process.
Users
Adults aged 18-35
Medium-income earner
Frequently shops online
Will buy anything that their pet needs, regardless of the price
Problem
When shopping online, most users won’t make a purchase if they don’t feel there are enough options and are turned off from creating accounts, abandoning their purchase instead of coming up with a new password.
Solution
The solution for our problem of not being able to complete purchases is to create the option for a guest checkout when purchasing items, creating a better user experience.
My Role
UX Researcher
Project Manager
UI Designer
Test Moderator
Design Process
Phase 1 | Discovery
Secondary Research
Customers prefer, when they can “purchase items in their shopping cart either as a guest or by logging into their account” (Sajeesh, Singh, Bhardwaj 2021), because “guest checkout enables the user to fulfill a purchase without having the need of having to create another username and remember another password” and “ensures that the user’s information is stored on a minimal amount of servers” (Makan, Kutar 2013).
Competitive Analysis
I studied industry leaders to understand what pet companies are doing right when it comes to the browsing and checkout experience.
When going through the scenario of buying one item to see what options would come up, I was surprised to find that despite Chewy's popularity, they don’t have a guest checkout and require everyone to create an account before purchasing.
Chewy - Takeaways
“Cart” emphasizes how close the user is to free shipping and is a good incentive for users to complete the “Checkout” process
Add numbered steps on the “Checkout” screen so users know how close they are to “Place Order”
PetSmart - Takeaways
Ask the user at the beginning “who” they are shopping for to help customize their search
Ask the user at the beginning what their “location” is to match them to the closest stores
Add numbered steps on the “Checkout” screen
Petco - Takeaways
Option for “Continue as Guest” during checkout is lower stakes
Option to “Add Password” before “Place Your Order” gives the user an easy way to create an account
“Cart” emphasizes their banner “Free Same Day Delivery on $35+” to promote deals
Affinity Mapping
Affinity mapping validated and consolidated research by categorizing the data clearly.
“How Might We” Questions
Based on our research, this study focuses on two questions:
How might we enhance users' browsing and checkout experience?
How might we improve the conversion from browse to completion of checkout to increase revenue?
Phase 2 | Design
User Flow – Guest Checkout
By sketching the user flow red route based on our research, we’re able to visualize what the app could look like.
Low Fidelity Design Sketches
The sketches follow a standard browsing, filtering catalog, and checkout system already familiar to users based on industry research.
Phase 3 | Validate
Moderated Usability Testing Round 1
User feedback during this round of testing refined what the ideal red route would be, pointing out what worked and what was confusing.
Usability Testing Round 1 Feedback
The first round of testing led to three important discoveries:
Lack of email left users wondering how they would receive an email confirmation
Lack of shipping/delivery cost breakdown and options left users wondering how much they were actually paying in total
Users wondered why there was a need to create an account for this kind of product
These issues create a clear set of solutions and refinement:
Homepage with clear buttons to browse
Easy filtering system when browsing
Item pages with multiple images
Simple checkout process including guest checkout
Phase 4 | Design
Logo & Style Guide
The logo and style guide for the hi-fidelity screens use purple, a color soothing and calming for cats, and a stylized letter “O” as a collared cat’s silhouette.
Montserrat was chosen as the primary font for its versatility and readability.
Hi Fidelity Screens
Homepage is made with more buttons to browse collars by category.
Product pages include:
Multiple images of the product
Technical information
Star Ratings
Purchasing details
Checkout process reflects the incorporation of previous users’ expectations and ideal experiences to improve future users’ ability to interact with Collared Cats.
Guest Checkout
Progress Bar to show steps left
After clicking “Place Order”, the user has the option to:
Create an account by adding a password
Print receipt
Continue shopping
Phase 5 | Validate
Moderated Usability Testing Round 2
The second round of testing focused on users:
Finding enough information about the product
Completing a purchase
Validating the need for guest checkout
Usability Testing Round 2 Feedback
During this second round, users complimented how smooth the checkout process felt, and all expressed appreciation for the “Guest checkout” option because they didn't encounter any barriers when completing their purchases.
Creating an account now felt more welcoming as an option rather than as a requirement blocking their experience.
Phase 6 | Design
Last Iteration
Users felt that all they lacked was having more collars to choose and filter from, a solution that is implemented further in the next iteration.
(Before) Browse Collars
Users wanted more collars to choose from
Users expressed a need for color filtering
(After) Browse Collars
Added filter for color
More collars to browse from
Impact
Interestingly enough, all 10 users that I tested preferred guest checkout already as an option, so they appreciated the design including it. Research also showed a higher percentage of users using guest checkout when given the option.
When creating the prototype it was important to stick with the standard components needed to complete an online checkout and not complicate the process. The purpose of an online storefront is to help users find what they want with ease. People love buying things for their pets, and it makes them happy. So if the only thing in the way of that is the requirement of creating an account, solving that problem will help create a more enjoyable experience for people with pets.
Next Steps
I’m content with this iteration because it has solved our users need for an easier checkout by having a guest option to choose. I might flesh out the “star ratings” to include reviews from users to draw users into buying the product. I’d like to test the iterated prototype with new users to reveal any other areas that need improvement after this to validate if reviews do influence users to want to buy a product.