At the outset of this project, I was tasked with auditing the website of a prominent diaper brand, Charlie Banana, affiliated with Proctor & Gamble. The primary goal was to streamline and enhance the purchase flow on their direct-to-consumer (DTC) site. Over the course of this comprehensive case study, I will delve into the various stages and strategies employed to optimize the user experience and website functionality. From analyzing the customer journey to refining the shopping cart interface and leveraging tools such as Figma, Crazy Egg, and Azure, this journey reflects a meticulous process of research, analysis, and design innovation aimed at improving Charlie Banana’s online presence and user engagement.
Table of Contents
I identified eight key stages in the customer journey by analyzing both negative reviews from existing customers and personal experiences as a customer myself, particularly with the added perspective of being a parent to a six-month-old son. I then visually mapped out this comprehensive information to create a structured customer journey.
I employed various automated tools to conduct a thorough website scan for potential issues. During this process, I uncovered and addressed 25 broken links that required immediate cleanup and resolution.
Style Guide Check
I observed that one of their fonts posed readability challenges and identified that it lacked compliance. Additionally, I identified a few unnecessary button variations during my review.
I offered many different global recommendations that would help the user.
I leveraged GTmetrix to uncover a significant issue with the website – poorly optimized images. The slow loading pages were a direct result of this issue, and I promptly communicated it to the developers for resolution.
I utilized Crazy Egg to produce heatmaps for every page. Upon analysis, I observed several issues on the PLP (Product Listing Page). Quickbacks were frequent, and the prominent yellow filters at the top made all PLPs appear uniform. Furthermore, I identified several additional issues, including duplicate promotions, the absence of a search button, cluttered buttons, and the absence of ratings in the product cards.
Ultimately, I decided to reinstate the “Add to Cart” buttons as they proved to be valuable for returning users. However, I chose not to implement the search button, as it became evident that users were uncertain about what to search for, making its inclusion less practical.
While examining the Product Detail Page (PDP), I observed that users primarily focused on the images and patterns. During a usability check, I identified numerous instances of dead clicks near the product thumbnails. To enhance user experience, I enlarged the buttons around the navigation arrows, making them easier to click. Additionally, I improved consistency in h2 tags and made the quantity and “Add to Cart” button fixed, eliminating the need for users to scroll down to access them. These changes aimed to streamline user interactions and improve overall usability.
I clarified that these diapers catered to babies aged from 0 to 36 months. To enhance user-friendliness, I used blue for all interactive elements. In the purchase journey, I introduced financing choices at an earlier stage. I eliminated the need for horizontal scrolling to view all patterns. Taking inspiration from crest.com, I incorporated payment options directly on the Product Detail Page (PDP). Additionally, I streamlined size selection by implementing a dropdown menu, complemented by a size chart for detailed information. These changes aimed to improve the overall user experience and provide users with essential information and options at the right moments in their journey.
I designed the size chart to slide out from the right upon tapping. This feature aimed to furnish consumers with all the essential information required to make the right size selection confidently. In cases where users remained uncertain even after consulting the chart, I suggested that the brand create a blog post explaining how to measure a baby, with a direct link provided here for easy access. This approach ensured that users had access to comprehensive guidance for making informed size choices.
Home Page Recommendations
Upon analyzing user interactions with Crazy Egg, it became evident that the four categories on the homepage were the most frequently engaged components. However, my initial assessment revealed a lack of differentiation among these categories due to the visual similarity of the diapers and the yellow circles around them.
To address this, I implemented changes such as consolidating the “cloth diapers” title and “shop now” call-to-action into a single “shop cloth diapers” CTA. I also restructured the CTAs, giving primary emphasis to the categories rather than “all products.”
Further research led me to a second option, inspired by Amazon, where I replaced product images with lifestyle images to establish an emotional connection with consumers. Finally, to boost subscriber numbers, I added a “Get 10% off your first purchase” jump link that conveniently scrolled users down to the signup form. These adjustments aimed to enhance user engagement and create a more compelling and user-friendly homepage.
Purchase Flow Research
The business provided a list of their primary competitors, prompting me to thoroughly examine each competitor’s purchasing process. I documented screenshots of each flow and arranged them in a sequential order for analysis.
During this evaluation, I observed that some purchase processes were as concise as four steps, in contrast to Charlie Banana’s six-step flow. While there were instances where certain competitors had only one diaper product, eliminating the need for users to select product type or pattern, I also identified methods that could be applied to streamline and reduce the steps in our own purchase flow.
Upon analyzing Google Analytics data, I observed that 29% of the website traffic was directed towards a specific Product Detail Page (PDP) for the One-size fits all diaper. In response, I introduced a product card on the homepage that directly linked users to this highly popular product.
This strategic move enabled users to bypass the need to select a category and eliminated the additional step of choosing a product from a Product Listing Page (PLP). While promoting the top seller aligned with the business’s objectives, it also resulted in a reduction of two steps in the overall purchase flow, enhancing user convenience and potentially boosting conversions.
Improved Shopping Cart UI
The second concept involved the creation of a sidebar cart that smoothly slid out from the right. The control version consisted of the following sequence: PDP – “Add to Cart” > Modal – “Wait, Choose a Pattern” > Modal – “Wait, You’d Also Like” > Cart – “Confirm Checkout.”
My recommendation streamlined the process as follows: PDP – “Add to Cart” > Sidebar Cart – “Confirm Checkout.”
In addition to this change, I introduced several enhancements to the sidebar cart. I brought financing options upfront, unlike the control version where consumers discovered them only during checkout. I ensured that all interactive elements were in a consistent blue color. The “Confirm Checkout” button was made fixed at the bottom for easy access, and users could view their subtotal without needing to load a new /cart page. Furthermore, the sidebar cart automatically slid out every time a user selected an “add to cart” button, instilling confidence that their item had been successfully added to the cart.
Figma, Crazy Egg, Azure