Enhancing the research process and checkout experience to increase conversion rates.
Background
Grater Ease is an e-commerce company selling countertop kitchen appliances, cookware, gadgets, and more. I worked to increase conversions and decrease drop rates by adding a guest checkout option and comparison feature.
Problem
High levels of cart abandonment prior to checkout
High levels of site abandonment after opening multiple tabs
Solution
Add a guest checkout option to the registration page
Create a product comparison feature to help users research their options without leaving the site
Role
UX Researcher
UX Designer
UI Designer
Tools
Paper and Pencil
Dovetail
Figma/Figjam
Timeline
4 Weeks
Process
Discover
Ideate
Design
Validate
Discover
Generative Research
To get started, I talked with five home cooks. Before I could determine the most important areas for improvement to address the company's usability issues, I needed to understand their…
Shopping behaviors (general and specific to countertop kitchenware)
Goals
Pain points
Affinity Mapping
I synthesized the research data using an affinity map, so I could find the larger themes of what participants had shared.
Biggest Takeaways
Research! Users are comparing multiple items and looking for the lowest prices before buying
Users want to buy from brands they trust and will spend more for good quality products
A quick checkout process is key and users want full price transparency (e.g. taxes and shipping)
Users don't want to be forced to make an account before checking out, but they don't mind providing their email or saving their information
Users like seeing company recommendations on a site
Persona
Using the synthesized data, I created the persona Julia, to better understand the main Grater Ease users. This…
Helped me empathize with users
Led me to make user-centered decisions by considering how each choice would affect Julia’s goals and frustrations
Ideate
HMW
Enhance the checkout experience?
Idea Chosen
Guest checkout option
Reasoning
The original site required users to create an account before purchasing. Research participants overwhelmingly expressed they did not want to have to create an account on a site as a new user, but I didn’t want to remove the option completely because it was important to the company to encourage users to create an account.
Intended Outcome
See a decrease in site abandonment in the checkout flow.
HMW
Help users decide which product is right for them?
Idea Chosen
Compare feature
Reasoning
Julia would research and compare multiple items regardless of what a quiz determined to be the best option for her,
Intended Outcome
Provide users with the ability to compare products in one place without leaving the site to increase conversion rates.
User Flows
I created user flows to show how users would navigate the site and interact with the comparison and guest checkout features. This helped me get deeper into the user’s mind, by considering all the different routes the main user type (like Julia) might take to conversion. It also gave me a chance to consider edge-case users. This helped me ensure the flows would work for all users, especially those landing on a page within the flow, instead of the homepage.
The user flows gave me a clear idea of each necessary screen and how they would all fit together in the design to create intuitive processes.
User Flow Key
Product Comparison Flow
Guest Checkout Flow
To reduce the necessary clicks needed in the guest checkout flow, I put the shipping, delivery, and payment all on one screen.
It decreased the number of pages to navigate pre-conversion
Made it easier to edit orders since all the information would be on one page
Fewer clicks = less time checking out = quicker conversions
Design
Sketches
At this point in the project, I became focused on how to present information all at once in a clear and scannable way to aid users in their research process.
Product List Page
Product Page
Comparison Page
Upon reflection of my sketches:
I focused too much on a single aspect of the user experience and did not take a wholistic view.
I could have improved my design and saved time later by:
Increasing the visual hierarchy
Seeking feedback and collaboration from another designer
Wireframes
I was hoping users would find the presentation of information clear and easy to use for research.
Homepage
Product List Page
Product Page
Comparison Page
Registration (Guest Checkout)
Validate
Usability Tests Round 1
During user testing, I quickly realized how overwhelming the design was for users, especially on the product and comparison pages.
Gaining direct user feedback reminded me I needed to keep the whole user in mind as I made decisions.
Moving forward, I took information from my persona, Julia, and the data from generative research and user testing to make more informed decisions.
Problem
Solution
Lead to 100% success rate
Problem
Solution
The bolding and line removal helped users during the second round of testing, but starting with fewer specs visible didn’t solve the problem. The underlying issue of there being too much information still remained.
UI Design
I used bright colors and images for user enjoyment
Red was used to give the buttons prominence
The icons and buttons are slightly rounded to convey friendliness
I used two text styles and various sizes to increase hierarchy
I kept color to a minimum to allow users to focus on the product images, but still used it to highlight important information
High-Fidelity Screens
My main focus while creating these screens:
Empathize with my users to decrease the information overload experienced during the first round of user testing
Homepage
Product List Page
Product Page
Comparison Page
Registration (Guest Checkout)
Usability Tests Round 2
After redesigning elements based on user testing feedback and the overall user experience, I conducted 5 more usability tests using the high-fidelity screens.
I needed to ensure users could find information easily throughout the site without feeling overwhelmed.
Problem: The comparison page
Solution: A complete redesign
Throughout the usability tests, there were no usability issues with the guest checkout flow solution. However, a different issue emerged.
Problem
Solution
Based on unofficial user feedback, these changes had a huge impact on user enjoyment of the site.
Final Screens
After the second round of user testing, it was clear I needed to polish the overall look and feel of the site to make it more inviting and enjoyable for users.
Homepage
Product List Page
Product Page
Cart
Checkout
Order Completed
Next Steps
Test again
Has the cognitive load been reduced for users and were the correct specs kept on the comparison overlay?
Does the brand's personality and attributes carry through from landing to checkout?
Once implemented, validate the designs by measuring the success metric of reduced customer site and cart abandonment.
Learnings
Simple, simple, simple! Good design is simple and intuitive. If I have to add something extra to try and help users (*cough* the your specs section *cough cough*), the design probably isn’t working and needs to be iterated on or redesigned.
Don’t reinvent the wheel, but don’t follow others blindly. Sometimes what you see others doing isn’t always best for your users. It’s important to base design decisions on your specific users and always remember to ask what purpose each element serves to the user experience.