Clawest
My Role
Timeline
Team
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 came to us with his website's first iteration of high-fidelity wireframes made by a previous design team. He requested assistance in identifying and resolving any pain points before moving forward with developing.
Based on the findings from user testing feedback and a competitive market analysis, I introduced additional features and layout changes to improve the navigation, layout, and browsing experience of the add-to-cart flow.
Discovery
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.
What we learned…
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, my team and I planned to create a prototype consisting of all user flows to ascertain the website's level of intuitiveness and undiscovered pain points. I examined the previous design team's add-to-cart flow and prototyped key touch points and interactions for successful navigation throughout each screen.
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 the affinity map, the first iteration of the add-to-cart flow allowed all participants to successfully add an item to their cart but with 4 notable pain points:
1
The “View Full Details” Link was Easy to Miss
This issue could delay customers from accessing the full-details page to learn more about the product's water-filtering features, specifications, and other relevant information before moving forward to checkout, potentially lowering conversion rates.
2
No Reviews Likely to Discourage Customers From Purchasing
While these 2 participants completed the task, they both noted that the lack of reviews would dissuade them from purchasing outside of the test. With Clawest being a new, unrecognized company, this fails to establish a level of trust with potential consumers nor convince them that this will be a worthwhile purchase.
3
The Single-Column Layout of the Product List Made Scrolling Feel Endless
One user shared that finding a product with the current listing layout felt slow and frustrating since he had to scroll more than expected to locate the right item. With only 1-2 products visible upon landing, the page felt unnecessarily long, highlighting an opportunity to streamline the layout for faster item discovery.
4
Quantity Dropdown Menu Not Performing as Expected
One user pointed out that other sites she shopped on used a quantity selector with plus and minus buttons and a text field, rather than a dropdown. She noted that this approach would have let her add items faster by simply tapping the plus button instead of opening a menu to select a number.
The test participants noted several mismatches between the site’s experience and their expectations from other e-commerce platforms. Since I was still building my familiarity with e-commerce best practices, I proposed to trade-off time from redesigning to conducting a competitive analysis of four direct competitors that also sold filtered water bottles. This allowed me to study how established companies handled navigation, browsing, and cart-related interactions.
By comparing these examples and referencing Baymard’s e-Commerce UX research articles, I found gaps in the initial wireframes that contributed to the challenges faced by the test participants.
1
Removed Modal for Direct Navigation to the Product Details Page Upon Clicking the Item Card
While the modal provides a fast method to add an item to your cart, directing the user straight to the product details page makes it easier for them to read key information, like technical details and reviews, that'd help them decide to purchase the item.
I also observed that both the modal and the product details page display similar information, deeming only one of them necessary for the flow to work.
2
Switched Quantity Selection from a Dropdown to Plus/Minus Buttons
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. Once I noted that our time constraints prevented me from determining the maximum number of items a user could select from this menu, and how that may elongate it when opened, then I received their support.
3
Revamped Item Listing and Sorting For Easier Browsing
While the original single-column layout could be appropriate for the small number of items the client 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.
Single-column layout
No color options or review indicators visible
Must scroll the entire page to view all items
Multi-column layout
Visible color options and reviews
Filters and sort-by menu
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.
Compare Usability of Both Iterations with an A/B Test
I'd perform this type of test to confirm how effective my redesigns are at helping the user navigate through each page, find specific products, and measure how likely they'd purchase any of the client's available items.
Evaluate and Optimize the Checkout Process
While the checkout flow wasn't included in this project, it'd be crucial to uncover and resolve any underlying issues with the website's current checkout experience. I'd love to work with my teammates to conduct a moderated usability test to confirm the following:
Can customers complete the checkout flow quickly and easily?
Do customers feel secure when entering their credit card information?
Is the post-checkout experience engaging? Does it motivate users to purchase other available items?
Answering these questions can help boost
