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
After
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
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
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
.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
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
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
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 page
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
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.
.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.
_edited.png)
100%
All participants could clearly understand the directory labeling on each screen, an 85% improvement over the previous design
.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...
Groc
Donit
