Redesigned a B2C website's add-to-cart flow to potentially increase conversion rates by resolving identified user pain points and 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. Their website provides a water-mapping search function for recorded bacterial contamination in bodies of water and water bottles with innovative filtration and purification technology.
Our client requested assistance in identifying potential pain points of his website's first iteration of high-fidelity wireframes before beginning the development process.
Based on the findings from user testing feedback and a competitive market analysis, I introduced additional features and layout changes to improve user navigation and follow e-commerce best practices, potentially boosting conversion rates from new customers.
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.
After I was assigned the add-to-cart flow, I studied the user flow provided by the client’s previous design team and prototyped key touch-points to allow the user to successfully navigate through the process. This underwent two iterations to ensure all UI elements within 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.
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 delay customers from accessing the full-details page to learn more about the product's water-filtering features, specifications, and reviews from verified customers before proceeding to checkout, potentially lowering conversion rates.
While these participants successfully completed the task, they both noted that if they wanted to purchase the client’s product, reviews from past customers would’ve been helpful, especially from a company that they never shopped at before.
This can be a common experience with other potential customers who most likely wouldn’t have heard about Clawest before.
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.
Considering that this page only displays a limited amount of products, he'd have found the item needed to complete the task faster if the layout was more streamlined.
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.
Based on the user feedback I received, I convinced my project manager and the client to trade off time meant to redesign the wireframes to conduct research on potential competitors. I aimed to learn how other e-commerce sites designed their navigation, feature functionalities, and layout of their product-related pages, and then apply those insights to my solutions.
After I analyzed 4 direct competitors, I learned that there were many e-commerce UI patterns and features that weren't implemented in the product-related pages that could resolve the issues users pointed out, such as:
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 valued 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, deeming 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 could select and how that may elongate the menu when opened.
While the original single-column layout could be appropriate for the small number of items Clawest provides, it didn't account for how unnecessarily long the page became to view the other items.
Introducing the three-column layout, item card redesign, and the filtering features reduced the scrolling length of the page, allowing more items to be viewable at a glance and surface more product information, like available colors and customer 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 to verify which version works better
Determine which iteration performs better at completing the original tasks and gather user impressions of the new design changes.
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.
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.
