Whealthy
Optimizing online ordering for efficiency, customization, and franchise growth.
ROLE
UI/UX Designer
TIMELINE
Jun - Aug 2024
TOOLS
Figma, Adobe Illustrator, Useberry
OVERVIEW
Whealthy is a fast food franchise with 8 locations across the U.S., specializing in fusion stir-fry dishes. Known for its signature "Build-Your-Own" system and innovative self-rotating woks, Whealthy offers customers a fully customizable dining experience.
Over the course of 2 months, I collaborated with my team to do a complete redesign of Whealthy's website. We conducted user research to identify key pain points, reimagined all web pages, and optimized their online ordering system for efficiency and retention.
OUR GOAL
Increase online sales and strengthen digital brand to drive franchise growth.
PROBLEM
After conducting 30+ user interviews and gathering 20+ survey responses, my team and I identified that the existing website lacked clarity making it difficult to navigate and use, especially when online ordering. We consolidated our findings into 3 main pain points.
[01]
Ordering system confusing and frustrating.
[02]
Overwhelming layout with repetitive content
[03]
No loyalty features limited retention.
Using the project's goals and identified pain points as the foundation, we crafted a "How Might We" statement to guide our design and iteration process.
HOW MIGHT WE
How might we improve Whealthy's website to create a better user experience while boosting sales and attracting investors?
IDEATION
For the ideation phase, we brainstormed and created an affinity map to visualize and convert user pain points into potential solution opportunities.
After assessing each one for impact and feasibility, we decided to prioritize the following features:
[01] BYO BOWL ORDERING SYSTEM
Design an ordering system that's more intuitive and displays a progress bar for users to track.
[02] USER ACCOUNTS
Implement customer accounts for easy reordering and tracking loyalty points.
[03] UPDATE BRANDING
Modernize design branding with cleaner and more intuitive layout & navigation.
INITIAL DESIGNS
We translated our prioritized features into low and mid-fidelity wireframes, allowing us to rapidly iterate to address usability challenges, refine interactions, and test different design variations.
By analyzing existing franchise and restaurant websites, we tested various familiar navigation and interaction patterns to create a user journey that feels predictable, efficient, and easy to navigate.
RESEARCH & TESTING
A/B TESTING
For our BYO bowl ordering system, we explored two designs: a single-page scroll and a step-by-step flow. In-person A/B testing revealed trade-offs for both approaches. New customers preferred the step-by-step format, while returning customers noted the extra clicks.
Ultimately, we selected the step-by-step flow because returners showed no strong preference and adapted easily.
USABILITY TESTING
Through heat map results and written feedback, we found other points of friction with our designs, a prominent one being with the "Select Location" button on the online ordering section. Users were often unsure about whether they selected the right location.
Our solution to this was including a Google Maps hyperlink, allowing users to easily confirm the correct pickup location.
FINAL DESIGNS
After several iterations and testing cycles, we delivered a website that provides a seamless user experience, strengthens customer retention, and supports Whealthy's goal of attracting potential investors.
MENU & BYO BOWL ORDERING SYSTEM
Buy a premade menu item or quickly order a custom BYO bowl.
CUSTOMER ACCOUNT & PROFILE
Create an account to keep track of rewards and past orders for easy reordering.
ABOUT & FRANCHISE PAGE
Learn more about the Whealthy franchise and possible investment opportunities.
TAKEAWAYS
[01] DESIGN WITH BUSINESS GOALS IN MIND
Align design decisions with company objectives, balancing usability and aesthetics with business priorities.
[02] MAKE TRADEOFFS BASED ON USER VALUE
Use research and data to guide tough decisions, prioritizing what delivers the most value to users.
[03] COMMUNICATION IS KEY
Maintaining open, clear communication across all teams and with stakeholders will help with ensuring alignment and collaboration.