alexandra owens

Redesigned to increase customer curiosity and improve sales conversion rates

Alexandra Owens, Julianne Le, Elaine Wu

The Motivation

At the outset of this project, the stakeholder's primary concerns revolved around sales conversion rates and the overall mobile shopping experience for users. Our objective was to develop a mobile website that is intuitive, user-friendly, and accessible, with the goal of promoting engagement, satisfaction, and ultimately enhancing conversion rates.

Our Design Journey

Re-defining The Problem

User Interviews and Card Sorting

During the initial research phase for That Sweet Lyfe, we conducted interviews with a total of six participants. This group comprised four potential customers and two current customers. Our primary objective was to identify any potential pain points in users' online shopping experience with That Sweet Lyfe.

To ensure a well-matched participant selection, we began by creating a survey. Based on the responses received, we proceeded with conducting interviews and card sorting exercises with the chosen participants. Our aim was to gain a deeper understanding of the ideal categorization system for That Sweet Lyfe, as well as to gather valuable insights into users' navigation patterns and interactions with the website.

Insight

During our interviews, we made the following key observations:

• Many users preferred to navigate directly to the Shop All page upon visiting the website, in order to get a better sense of what product options exist.
• Users expressed frustration with the fact that not all products were displayed immediately on the Shop All page. Additionally, the existing broad categories made browsing challenging for them.
• The current shop all page was hidden within the drop-down menu, and it led people to a set of collections, which made the product scrolling process more complicated 
• Users struggled to understand the nature of the actual product due to the lack of guiding descriptions. Consequently, their decision-making process relied heavily on the initial product image.
• The term "B*tch Water" caused confusion among users and often resulted in frustration, disinterest, or apathy when exploring that particular category.

Suggestions

• Add a "Shop All" button on the homepage that directs users to a dedicated "Shop All" page where all products are displayed.
• Condense the categories and place them prominently at the top of the "Shop All" page for easier navigation.
• Rename the categories on the menu as follows: Infused Water, Ice Cream, Fruit, Candy
• Include a simple banner on each category page to introduce and highlight the specific category. For example, when a user clicks on the Infused Water category, they will be directed to a page with a banner that says, "Introducing our B*tch Water essentials: organic freeze-dried citrus and lime to add a healthy and refreshing touch to your beverage."

Ideation

Sketches

During the sketching phase, our goal was to maintain the existing product's foundation as much as possible. Julianne took the lead in this process, and was able to quickly create multiple iterations of the existing screens. The objective was to identify the most suitable solutions by exploring various adjustments and iterations.

User Flow

Creating red routes from these maps helped highlight critical user flows and break down the processes the user would use to accomplish specific tasks. For this app we determined that there were 5 specific red routes needed to cover the users’ primary tasks.

Wireframes

From the sketches, Julianne created wireframes for both red routes. These wireframes helped give us a better look into our vision and were used for our next round of testing.

Testing

First iteration

For the second round of UX research, our objective was to identify potential usability issues or areas of friction in the mockups we created. To achieve this, we conducted usability testing with five participants. Elaine consolidated and synthesized our findings.

Key Findings

• Participants found it hard to go back: there’s no accessible back button as they moved through different screens.
• Some categories on the menu bar have an arrow while some don’t. This confused participants because there was no response to use of the back arrow. 
• Many participants mentioned they would like to see the auto-scrolling image on the top in the homepage so that they have a broader idea of what products were on the site.

Implications

• Design an accessible and intuitive back button for each key screen, such as the Shop All page and the Ice Cream page. This will allow users to easily navigate back to the previous page and ensure a seamless user experience.
• Unify the design elements across the menu bar by either including arrows for all items or removing them altogether. Consistency in the design will help avoid confusion among users.
• Incorporate auto-banner-scrolling images at the top of the home page. This feature will provide a clear and comprehensive view of the diverse range of offerings from That Sweet Lyfe, giving users a better understanding of the available products.

Second iteration

For the last round of UX research, Alexandra revised our existing wireframes to be more high fidelity. We used these revised, high fidelity designs to identify any final usability concerns.

Key Findings

• Participants would click on the logo on their mobile to return to the homepage 
• Participants found the infused water thumbnail confusing (how is it different from the dried food categories?)

Implications

• Ensure that the logo consistently functions as a return button to the homepage. This will provide users with a familiar and convenient way to navigate back to the main page from anywhere within the website. 
• Updating the infused water thumbnail falls beyond our current scope, but should be considered. 

Findings

Users experienced enhanced fluidity while navigating through the categories in our revised prototype. By implementing a more refined categorization system and introducing a comprehensive "shop all" option, users are no longer limited to basic browser functions and can enjoy a seamless shopping experience. This not only provides users with a broader perspective of the entire selection but also enables them to narrow down their search and effortlessly navigate between different categories and product detail pages (PDPs). A more intuitive design navigation system will not only reduce user frustration but also contribute to a more enjoyable user journey.

Additional Thoughts

Product Pages

• Include more in-depth/thorough product descriptions 
• Use UI to make clear which items are sold out (currently the user must click on them to see “sold out”). Suggestions: grayed out text, include sold out in red beneath the header – anything to make the selection immediately clear without additional engagement 
• Show weight/quantity on the PDPs so the users understand how much they are getting
• One user brought up the suggestion of adding an ingredient list  (which is additionally helpful for food allergies)  
• Add all caps to “ADD TO CART” (learned from competitor analysis at a similar CPG company) 

General Suggestions:

• Include a more descriptive blurb on the home page about what exactly freeze-dried offers and why it’s exciting/desirable (so more about what it is/the process/why it’s different). The current color-copy is fun but doesn’t tell a potential customer why this product is different than something they might get elsewhere
• More demonstrative images of the B*tch water for product photography – especially in the category and “Shop All” thumbnails. Consider using an image that shows a beverage (possibly in addition to the lemon/lime slices).