Redesigned a B2C website's add-to-cart flow to identify and resolve pain points and potentially increase conversion rates by following e-commerce best practices.
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.
Main Takeaways
Accessibility, intuitiveness, and simplicity are three key values to reflect in the redesign.
The website will promote filtered water bottle products, the AquaVox mobile app, and water-mapping services.
Their main competitor is CleanWaterAI, an IoT device that monitors water quality around water sources for dangerous bacteria and harmful particles.
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.
We recruited 5 people who matched most of the characteristics for the client's target audience:
Ages 18-65.
Unfamiliar with Clawest.
Technologically competent.
Experienced with online shopping.
Interested in water filtering products and water quality monitoring services.
Due to the project's time constraints, my team and I agreed to conduct unmoderated remote tests using Lookback.io to record video and audio footage of their tests and gain feedback quickly.
For the flow I was responsible for, I created a task and a set of follow-up questions to assess the navigation experience throughout all the Product-related pages, gather user impressions, and ascertain how likely users are to recommend items to people they know.
Task: As a user, I want to learn more about the products Clawest is selling and add 2 green water bottles to my cart.
Follow-Up Questions:
How difficult was locating the water bottles and adding the items to your cart?
Do you remember the details about the water bottle you selected? Please explain.
Did anything unexpected occur as you navigate through each page? Please elaborate.
What changes could enhance your experience purchasing items from the Products page?
Would you recommend any of Clawest’s products to friends or family? Why or why not?
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 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.
This issue could prevent customers from making an informed purchase before proceeding to checkout, potentially lowering conversion rates.
While these participants successfully completed the task, they both noted that reviews from past customers help convince them to whether or not to purchase a product from an unfamiliar company.
This user disliked the listing's layout because it required him to spend more time scrolling to find the correct item to complete the task.
This user stated that other websites she recently shopped at employ a quantity selector with plus and minus buttons and a text input field in between rather than a dropdown.
She continued to state that she could've added the item to her cart faster by clicking the "plus" button to increase the amount instead of opening the menu to then select.
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
While the modal provides a fast method to add an item to your cart, it leaves out information like technical details and reviews that some of our test participants value reading when deciding to purchase from a new company.
I also observed that both the quick view modal and the product details page display similar levels of information, making only one of them necessary for the flow to work.
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.
Conduct an A/B Test
Determine which iteration performs better at completing the original tasks and gather user impressions of the new design changes.
Create the Checkout Flow
The checkout flow wasn't required by the client for this project, but will be necessary if he doesn't rely on companies like Stripe or Shopify.
Measure Conversion Rates
I'd like to track how well the redesign converts users to purchase a product and iterate based on the provided feedback.
