Redesigned a B2C website's add-to-cart flow to identify and resolve pain points, follow e-commerce best practices, and potentially decrease cart abandonment rates.
Clawest is a B2C pre-seed startup company that values increasing access to clean drinking water in many remote communities around the globe by using innovative water filtration and purification technology in its water bottles.
The company provides purchasable filtered bottles and a water-mapping search function to detect contamination within water bodies near locations entered by the user.
Our client requested assistance in identifying potential pain points of his website's first iteration of high-fidelity wireframes before beginning the development process.
My team and I were assigned to create and test a functional prototype to discover opportunities to improve the website's overall user experience and visual design.
We prototyped navigational interactions within each wireframe according to the user flows created by the client's previous design team. After we gathered user testing data and synthesized findings, we documented an extensive report with all identified user pain points organized according to levels of priority from minor to critical.
Based on the findings, I introduced additional features and layout changes to the "Add to Cart" flow to improve user navigation and follow e-commerce best practices.
I met with my team through Zoom to introduce myself, get to know my teammates, discuss the project brief and scope provided before the meeting, and familiarize myself with the Figma file and other project assets left by the client's previous design team.
My team and I scheduled a meeting with the client to learn more about his goals for this project, the issues he's currently facing, and any additional information to help guide our process.
The team lead designated each member with a user flow to review before beginning the prototyping process using Clawest's first iteration of high-fidelity wireframes. I was assigned the "Add-to-Cart" flow, which involved the website's e-commerce-related pages.
After studying the user flow, I identified and prototyped key touch-points the user must click to successfully navigate through each page and add an item to their cart. This process underwent two iterations to ensure all UI elements throughout this flow were designed with the necessary interactions.
After the prototype was reviewed and approved by the client, we created a user test plan and script to define our ideal test participants, tasks and follow-up questions, success metrics, etc.
For my specific task to be determined as successful, I set the following metrics to track during testing:
Task completion rate & time
Ease of use / notable challenges
User impressions and suggestions
After testing, I gathered the user feedback from my task and follow-up questions to organize into specific sections and sub-sections within an affinity map on FigJam.
Sorting through each note provided insightful information regarding aspects of the product pages that work and those that don't, as well as any suggestions users would like to see implemented to improve their experience.
According to user feedback, I confirmed 4 major pain points regarding aspects of the Product Listing and the Selected Product Modal.
The problems were reported by 4 of the 5 participants, which indicated that the flow's first iteration provided a fairly successful experience, but can still be improved.
1/5 users struggled to find the "View Full Details" link to view more information about the product before adding it to her cart.
This is likely due to the link's small text size and light font weight, which could be considered an accessibility issue.
2/5 users felt discouraged about adding the items to their carts due to the absence of reviews.
They noted that reviews from past customers help convince them to purchase products from an unfamiliar company.
1/5 users disliked the Product Listing page’s single-column layout because it required him to spend a lot of time scrolling to view all available products.
He noted that it was unusual to see a layout like this as most companies he shopped at previously displayed more products at a glance.
1/5 users expected the Quantity selector to have plus and minus buttons with a text input field in between instead of a dropdown.
The user noted she could've added the item to her cart faster by clicking one button to increase the amount instead of opening the dropdown.
Before addressing the users' pain points, I conducted a competitive market analysis to confirm how closely Clawest's "Add-to-Cart" experience matches those of 4 direct competitors: Lifestraw, RapidPure, ClearlyFiltered, and LARQ.
After I completed my analysis, I discovered common e-commerce UI patterns and features across the competitors' experiences that weren't followed in Clawest's product-related pages. Some missing features and design patterns include:
Multi-Column Product List
Ratings/Reviews
Filters and Sort by Menu
After I presented my insights from our user testing feedback, my competitive market analysis, and Baymard UX research articles to my team, and received their feedback, I continued to iterate the Add-to-Cart flow with these 3 main improvements:
Both the modal and selected product page display identical levels of information and actions, making only one of them necessary for the flow to work.
Test participants valued viewing more information on the selected product page, like reviews and technical details, to help them decide on proceeding with their purchase.
All 4 direct competitors I analyzed utilized quantity selectors with plus-and-minus buttons and an in-between input field on their product and cart pages. Making this change allows users to alter the quantity with less clicks and scrolling involved.
My team felt unsure about making this change because they saw no issue with the dropdown initially, but I gained their support after noting that we'd need to gather data to determine the maximum number of items a user can select and how that may elongate the dropdown.
While the original single-column layout was appropriate for the small number of items Clawest provides, it didn't account for the long amount of scrolling needed to view the other items.
To reduce the scrolling length of the page, I redesigned the item card to fit into a three-column layout. This change allows the page to house more viewable items at a glance and include more product information like available colors and current ratings.
Before we delivered our work to the development team, my team and I crafted a developer handoff document that detailed the workflows, functions, and size and spacing specifications of each UI element in the high-fidelity wireframes.
This was done to add more context to each screen and help alleviate potential confusion the development team may experience during the building process.
I enjoyed collaborating with my team and our client to craft the usability tests and use the data gathered to evolve the wireframes of his company’s website. I learned that unmoderated usability tests are convenient for projects with tight deadlines, but moderated usability tests would’ve garnered more in-depth user feedback.
Overall, I’d love another chance to work with this team on this and other projects as I felt we synergized well throughout the entire project, especially during our coworking meetings on Figma.
Conducting unmoderated usability tests made it more difficult to dig deeper into user feedback and find issues that affected more than 1-2 participants. I needed to do workarounds, like contacting the participants outside of testing, for additional context on specific feedback they gave during the test. I also conducted a competitive market analysis to inspire how I’d redesign the pages to address the usability issues.
While unmoderated testing has advantages, I believe that for the next project where I'm responsible for usability testing, I'd suggest the team facilitates moderated usability test sessions, especially with a small pool of 5 participants.
If I were to continue working with this design team on Clawest, I would:
Determine which iteration of the add-to-cart flow performs better, calculate cart conversion rates, and gather user impressions.
Ideate and design the checkout flow according to best practices, then orchestrate a round of usability tests to uncover any issues and iterate.
Ideate and design the checkout flow according to best practices, then orchestrate a round of usability tests to uncover any issues and iterate.
Seniors in Transition
Empowered long-term care nurses and caregivers with a messaging tool for daily communication.
UX/UI Design
Hospitality
B2B2C
Seam
Simplified contract creation to free up time for small business owners to focus more on growth.
UX/UI Design
CRM
B2C