CLAWEST
UX/UI Designer
January - June 2024
5 UX/UI Designers
1 Project Manager
OVERVIEW
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.
PROTOTYPE & TEST
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:
2 participants 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.
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.
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.
REDESIGN
The test participants noted several mismatches between the site’s experience and their expectations from other ecommerce websites. I proposed to my project manager and the client to trade-off time from redesigning to analyze the design of the product pages of four direct competitors that sell 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.
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.
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.
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.
DEVELOPER HANDOFF
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.
REFLECTION
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.
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.
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.
If I could, 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?
How do customers feel about the post-checkout experience? Do they feel motivated to purchase other available items?
