Revising An Existing Design for Cause/Cart
On a UX team, I triangulated the client goals, user goals, and user research to prototype a more efficient e-commerce platform experience for Cause/Cart.
The Problem:
Young consumers are concerned about the environmental impact of their online shopping, and they seek assurance that their purchases contribute to the intended cause, but the current site's limitations hinder Cause/Cart’s shopping experience due to its inefficient and confusing design.
Cause Cart uniquely gives users the option to “shop by cause”, not just by product but during our research sessions, users told us they couldn’t find how to “shop by cause”.
How I Solved It:
I prototyped key features for a brand-new marketplace builder, drawing insights from user needs and incorporating
e-commerce best practices and structure.
I found a balance between letting users shop by product and by cause which is reflected in a more efficient design.
My Roles:
• UX Designer
• UX Researcher
Methods:
• Usability Testing
• Competitive Analysis
• Heuristic Analysis
• User Flows
• Site Mapping
• Wireframing
Tools:
• Figma
• Adobe
Deliverables:
• User Journey Maps: Current & Future
• Style Guide and Design System
• Annotated, Interactive Prototypes
• Design Rationale Presentation
1. Discover the Problem
We conducted User Research to learn more about the competition and our users:
Users found it difficult to comprehend the shopping filters, particularly because the causes were included as a filter but not properly labeled as such.
Methods
• Competitive Analysis of existing ecommerce sites that “give back”
• Usability Testing: Directed Storytelling User Interviews
• User Journey Mapping
The Problem Revealed Itself
I observed potential users ordering an item on the current site . I discovered that the user had a hard time finding crucial product details and the cause that the purchase would support.
“It’s impossible to find the cause these products support.”
-Participant 3
• Users couldn’t “shop-by-cause” because they couldn’t find the cause
• Causes were labeled as subcategories and were only visible after a filter in the main category was selected
• Users could only select one category at a time, limiting their product search and personalization
Shopping Categories
Causes to
Support
Why are shopping filters so important?
Ideally, applying filters enables shoppers to see the products that match their personal preferences, which reduces the likelihood of them becoming frustrated and exiting the site because of seeing irrelevant or unsuitable products.
2. Ideate The Solution
Visualize The User Data
I created a persona based on my user research, then I made a user journey map in order to visually quantify what Case/Cart’s users currently experience shopping on the site, its painpoints and subsequent opportunity areas for improvement:
I created three user flows on Figma to ideate about best-case scenarios of how the user can successfully move through the website to accomplish the task of purchasing an item.
3. Prototype The Solution
Through an iterative process of designing and prototyping, we each took a section of the website to redesign and mocked up what we thought could be a solution to the problems and insights we learned during user research and testing.
I prototyped the shopping filters section:
Cause Cart shopping filters on my mid-fidelity prototype
In my prototype, users could now see the option to “shop by cause”, not just product. It was time to test the prototype to see if users could find and understand the ability to “shop by cause…”
4. Test The Solution
One round of usability testing on these prototypes revealed:
• Users could “shop by cause” but could still only select one filter at a time in a category. With only one filter option available at a time, the search capability is limited. Users still expressed frustration.
I went back and researched design practices for shopping filters at places like Amazon and Best Buy and discovered checkboxes. I refined my prototypes again and added checkboxes.
Cause Cart shopping filters on my high-fidelity prototype
Now users could select more than one category/filter at a time using checkboxes.
• Users could select multiple filters at the same time
• Causes were easy to find
• Causes are no longer sub-categories
Key Findings
By replicating robust filter design practices, I was able to provide a familiar and user-friendly shopping experience that not only enhanced the overall e-commerce experience but increased customer satisfaction.
Users were able to “shop by cause” because they were properly labeled and could be applied as shopping filters.
Deliverables:
The future user journey map I made on Figma:
Explore the interactive prototype on Figma:
Cause/Cart interactive prototype
