top of page

That Sweet Lyfe

01 Intro

Team

Product Manager

UX Designer

UX Researcher

Timeline

April 2023 --- June 2023

Role

UX/UI Designer, UX Researcher

Brief

That Sweet Lyfe is a B2C snacking brand. I was tasked with overhauling the website's information architecture for inventory and optimizing the menu categorization

Problem

The product owner highlighted issues with low online conversion rates and users' high bounce rate, where users often leave the website quickly after minimal engagement

Goal

  • Redvamp inventory page layout and refine the menu categorization structure

  • Optimize inventory display frequency and user accessibility for enhanced merchant exposure

My impact as UX/UI Designr

  • Increased user success rate in website navigation to 95.3%, a 70% improvement

  • Delivered That Sweet Lyfe's digital platform within a 2-month period using lean UX 

  • Boosted online sales conversion rates by 5%

Before

Previous Home page.png
Previous menu.png
Previous shop all.png
previous candy detail page.png

After

hifi home page.png
hifi menu page.png
hifi shop all.png
hifi candy page.png

Challenges

The primary obstacle is enhancing the online conversion rates efficiently and effectively, given the limited budget and time constraints

1. With a tight 2-month window for the iteration: detailed testing and prototyping are constrained, necessitating swift execution​

2. With a compact development team of 5, including the product owner: our bandwidth is constrained for expansive projects, directing us to concentrate on specific design concerns

3. Product owner lacks a design background: necessitates regular updates and briefings on our proposed modifications

Timeline

To address the time constraints and provide the product owner with insight into the team's agile development progress, we've crafted a project plan

timeline.png

Narrow Down Problem Space

To narrow our scope to specific design concerns, the team conducted rounds of interview with two user representatives (long time customer of That sweet lyfe), and observation on two participants from convenience sample.

How do users navigate the website's menu

How do users interact with the product page

Can you (customer) let us know what brings you back to TSL and how does the shopping process like?

what do users look for when shopping food and sweets online

1. First-time visitors struggled to discern the website's offerings from the landing page

"what does this company sell exactly?"

2. Users struggled to locate desired items within the menu due to unclear and ambiguous labeling

“where can i locate all products"

"what does it mean by 'bxxch water"

and it leads to...

"  How might we enhance our website's clarity to help users easily understand our offerings and navigate the menu? "

Problem of Past Design

Focusing specifically on webpage clarity and menu navigation, we have progressed and arranged multiple observation sessions and team meetings to identify and pinpoint the gaps we've observed in the current design's layout and shopping flow

Homepage-1.png
Homepage.png
Candy page.png

issue 1: Non-Hierarchical Menu 

The dropdown menu is poorly structured, which could disrupt the logical sequence of category arrangement.

issue 2: Ambiguous Labeling

Some labels are confusing or deceptive, making it hard for users to understand what the product is. Also, some labels are too similar or repeat each other.

issue 3: Restrictive Landing Page 

The homepage fails to clearly show what products are for sale, especially since the brand offers unique items. It also lacks CTA and ways to view and interact with the full inventory

issue 4: Missing Breadcrumbs

Users may get lost during navigation as there is no breadcrumb trail to indicate their current location in the process

02 Discovery

User-Centric Approach: tackling the problems through user lens

Adopting a user-focused design approach, I suggest conducting several brief user interviews to learn about their typical interactions with similar websites and what drives their shopping behavior. I've also helped set up card-sorting sessions with participants to gain insights into how they classify products, which will inform how we can improve the menu and categories

Our user segment (9).png

Interview

  • Accessibility: the 'Shop All' page and each subcategory should be readily accessible and clearly labeled, with enhanced descriptions

  • Clarity in labeling: need to rename confusing categories such as "b*tch water" to better align with customer expectations

Screen Shot 2023-11-04 at 10.19.30 PM.png

Card sorting

  • Actionable Insights: The card sorting exercise provided valuable insights for reorganizing our products to match user expectations.

  • Intuitive Categories: It guided us towards user-friendly category names, improving clarity and logic from our customers' viewpoint.

03 Iteration

Building on the meeting with stakeholders,  our iteration goal is to enhance the page navigation and product identification within the existing design framework without drastic alterations due to limited time and technical resources. Guided by this concept, my fellow UX designers and I have advanced in refining the red route and user flow.

Remapping Red-Route

Screen Shot 2023-11-05 at 12.36.54 PM.png

Change 1 : Guided Homepage Experience

Upgraded the homepage with illustrative graphics, succinct product summaries, and a clear call-to-action directing users to relevant products

Change 2 : Logical Navigation & Category

Streamlined the dropdown menu with logical subcategories and added breadcrumbs for clear navigation throughout the shopping experience

* the red route sketch was put-up by one of the UX designers on the team, Julianne!

Wireframe

Screen Shot 2023-11-05 at 1.08.17 PM.png

Revised Design

Incorporate brand overview on the landing page for enhanced product understanding

Optimize the 'Shop All' call-to-action for increased user retention

Home gif.gif

Home page

menu_gif.gif

Reorganize the menu into a hierarchical structure, separating categories into secondary levels for clearer navigation and reduced clutter

Refine category labels to use more universally recognized terms, enhancing user efficiency

Menu

Applied hierarchical modular grid to the 'Shop All' page for better inventory exploration and discoverability

Enhanced negative space to alleviate choice paralysis, creating a less overwhelming user experience

gif_shopall to candy.gif

Shop All

04 Research

Usability Testing + A/B Testing

Before advancing to a high-fidelity prototype, we plan to pinpoint and resolve any user pain points with the revised design via a swift round of rapid testing. This step will help us confirm the soundness of our design decisions for stakeholder presentations.

Our user segment (11).png

95.3%

In the updated design, 95.3% of participants successfully navigated the menu to find their item unaided, marking a substantial 70% improvement from the previous version.

Our user segment (12)_edited.png

100%

All participants could clearly understand the directory labeling on each screen, an 85% improvement over the previous design

Our user segment (13).png

43.5%

Future direction: Enhance Search Efficiency

Feedback indicates that about 44% of users found the search function to be non-intuitive and unhelpful, indicating a crucial need for enhancements in the next iteration phase

CLICKABLE

CLICKABLE

PROTOTYPE

PROTOTYPE

Conclusion

A brief look-back

This experience has been distinctive and enriching, allowing me to hone my coordination skills within a dynamic UX design team. Collaborating closely with multiple designers, each with their own distinct philosophies, has enhanced my ability to negotiate and manage design hand-offs effectively. It has also fine-tuned my design skills in fast-paced development environments. Furthermore, I've gained proficiency in articulating design decisions to audiences without a design background, ensuring clear and impactful communication

Opportunities for improvement

Given the nature of our project, the design process was intentionally concise, quick, and limited in scope. With more time and resources, we could have broadened our ideation phase to embrace diverse creative methods and deeper user insights, fostering innovative and user-centric designs. Concurrently, an extensive market analysis, focusing on the nuances of the online food-retail sector and competitors' approaches, would empower us to uncover distinctive features to set our design apart and better align with market demands.

​Other works...

Screen Shot 2024-01-12 at 10.57.28 PM.png

Groc

Frame 10189_edited.png

Donit

mockrocket-capture_edited.jpg

Gallery Pal

bottom of page