Little Leaf online shoppers need a better way to find products, review products, learn the store brand, and purchase products because the users find current site features frustrating and confusing.
Case Study of E-Commerce Redesign
Project Overview
Conceptual Task: Redesign an E-Commerce Website
My Role
UX Research
Visual Design
Information Architecture
Tools
Figma
Adobe Illustrator
Optimal Workshop
Keynote
Time
2 weeks
Team
Individual
Research
A heuristic evaluation and 3 usability tests revealed 29 violations.
Why start with a Heuristic Evaluation?
Determine the number of heuristic violations currently present on the website and their severity
Set design parameters and priorities
Ideate possible solutions
Task Analysis
Little Leaf’s ‘add to cart’ button failed to assure the user through feedback that its item was indeed added to its cart—often causing the user to accidentally add an item twice. Every user I tested became frustrated and confused by the button’s inadequate interaction and feedback.
Features Inventory
After conducting a task analysis, I created a features inventory for Little Leaf’s competitors and comparators. I learned that each competitor included features like filtering, responsive shopping carts, sticky navigation, reviews, and more.
Journey Map
After conducting 3 usability tests of the current site, I synthesized my findings into a journey map that clearly illustrates the user’s steep decline in satisfaction as they progress through their purchase task.
It’s an anti-climatic roller coaster. Little Leaf’s initially pleasing minimalist aesthetics set high expectations that, due to a number of heuristic violations, end up disappointing the user. The user feels cheated.
2. Synthesis
User Interview Takeaways
My users spoke about how they wanted to reduce the amount of time they spent inputting data—especially redundant data like shipping or payment information.
Additionally, my users pointed my attention to Amazon’s search function that shows the department of the product while searching. This data informs me that my design should include a dynamic search and filter tool.
Insights from My Users
User Persona
Next, I hosted 3 user interviews. I was interested in learning the motivations, goals, behaviors, and frustrations of my users as they attempted to shop online and in-person.
I understood that I could learn more about the pain points of my users by asking about the shopping experience in general as well as asking about plant buying.
Sitemap
So, to develop a solution, I began with a sitemap. I directly derived it from user-completed open card sorts via Optimal Workshop. For instance, with 90% agreement, I consolidated the previous “paper goods” and “gifts” into simply “gifts.”
3. Ideation
A Happy Path
Next, I created a happy path for a user attempting to purchase a planter from Little Leaf. I sketched wireframes and wire-flows that added user-identified features and eliminated confusion caused by the current “add to cart” button. My usability tests confirmed this iteration was a success in some ways but required some improvements.
4. Design
Designing is Redesigning
User tests taught me a lot. My users want increased attention to the call-to-action button once pressed. So in my next iteration, I created additional feedback to instill further confidence in the user’s “add to cart” experience.
Before:
After:
In addition, usability tests of the prototype brought to my attention three things that I elaborate upon below:
Add delivery options in the filter
Small Iterations Make a Big Difference
My users asked for a couple more changes:
increased contrast and spacing in the header font
a newly designed hover state for global navigation
a counter showing the number of items added to the cart
Before:
After:
Before:
After:
Hi-Fi Prototype
Finally, I used Figma to create a hi-fi prototype. It focuses on the “add to cart” experience. After 3 usability tests, I added several elements to solve the remaining issues outlined in my problem statement. For instance, I added a timeline to the checkout process that clearly indicates the user’s location in their check-out journey. Essentially, I aimed to reverse the downward slope evidenced in the journey map.