← Back

←

← Back

Background
Background

Whealthy is a fusion grill fast food franchise with 8 locations around the United States and specializes in wok-style noodle dishes. Whealthy offers many signature dishes, including a “Build Your Own” bowl for 100% customization for every customer.

Whealthy is a fusion grill fast food franchise with 8 locations around the United States and specializes in wok-style noodle dishes. Whealthy offers many signature dishes, including a “Build Your Own” bowl for 100% customization for every customer.

Whealthy is a fusion grill fast food franchise with 8 locations around the United States and specializes in wok-style noodle dishes. Whealthy offers many signature dishes, including a “Build Your Own” bowl for 100% customization for every customer.

Project Type
Project Type

Freelance website redesign

Freelance website redesign

Freelance website redesign

Role + Team
Role + Team

UX/UI Designer


Team: Jae Sung Park, Jeslyn Chun

UX/UI Designer


Team: Jae Sung Park, Jeslyn Chun

UX/UI Designer


Team: Jae Sung Park, Jeslyn Chun

Duration
Duration

July 2024 - August 2024

July 2024 - August 2024

July 2024 - August 2024

Jump to the final product ▾

Jump to the final product ▾

Jump to the final product ▾

Overview & Timeline

Overview & Timeline

Overview & Timeline

01.

01.

Initial Research

Initial Research

Initial Research

Our Goals
Our Goals

To grow the company by increasing overall sales and enticing investors to further expand the franchise, we focused on improving 3 key features:

To grow the company by increasing overall sales and enticing investors to further expand the franchise, we focused on improving 3 key features:

To grow the company by increasing overall sales and enticing investors to further expand the franchise, we focused on improving 3 key features:

  1. Stronger branding
  1. Stronger branding

Make the site more eye-catching and unique while building a style that better displays Whealthy’s brand.

Make the site more eye-catching and unique while building a style that better displays Whealthy’s brand.

Make the site more eye-catching and unique while building a style that better displays Whealthy’s brand.

  1. Improved ordering system for custom items
  1. Improved ordering system for custom items

Create a new ordering system for their customizable bowls that improves efficiency and minimizes confusion.

Create a new ordering system for their customizable bowls that improves efficiency and minimizes confusion.

Create a new ordering system for their customizable bowls that improves efficiency and minimizes confusion.

  1. Promote franchising
  1. Promote franchising

Improve the franchising page to make the process of joining the Whealthy team more simple and straightforward.

Improve the franchising page to make the process of joining the Whealthy team more simple and straightforward.

Improve the franchising page to make the process of joining the Whealthy team more simple and straightforward.

User personas
User personas
User Research [Surveys] → Painpoints
User Research [Surveys] → Painpoints

Using our data from the 16 user interviews we conducted with customers at the Santa Ana location, we identified a few key insights:

Using our data from the 16 user interviews we conducted with customers at the Santa Ana location, we identified a few key insights:

Using our data from the 16 user interviews we conducted with customers at the Santa Ana location, we identified a few key insights:

“Build Your Own” Bowl → The customization process is not intuitive and causes frustration, especially the “special instructions” section.

Reordering → Reordering feature does not yet exist. Customers cannot easily reorder an item if they forget what they had last time (especially for custom items).

Repetition → The same features and CTAs are displayed multiple times on several pages, making the navigation confusing and cluttered.

Outdated branding and interface → Too basic and did not stand out from other similar companies. The interface also looked outdated.

Inefficient CTAs → Call-to-action features such as choosing restaurant location, “add to cart”, and ordering online were not efficient.

Franchising → Franchise page was largely ignored. Despite the smaller target audience for this, the info on the page was overwhelming and hard to navigate.

02.

02.

Ideation

Ideation

Ideation

Moodboarding
Moodboarding
Brainstorm + Affinity Mapping
Final Key Focuses
Final Key Focuses

“Build Your Own” Bowl


Design a step-by-step process at the customization step, including a progress bar to track each step.

Add personal accounts


Implement a system where customers can create and sign in on an account, allowing them to track rewards, promotions, and past orders easily.

Modern style + design language


Update the style to more modern branding, including more intuitive navigation, cleaner visuals, and simplified user flow.

03.

03.

Site Structure

Site Structure

Site Structure

04.

04.

Testing Lofis & Iterations

Testing Lofis & Iterations

Testing Lofis & Iterations

Low Fidelity
Low Fidelity
  1. Landing page / Hero section

An eye-catching hero image and tagline that captures the essence of Whealthy’s brand. The nav bar and “Order Now” CTA are neatly laid out at the top.

An eye-catching hero image and tagline that captures the essence of Whealthy’s brand. The nav bar and “Order Now” CTA are neatly laid out at the top.

An eye-catching hero image and tagline that captures the essence of Whealthy’s brand. The nav bar and “Order Now” CTA are neatly laid out at the top.

  1. Menu + Order Online page

A design that draws attention to images, titles/descriptions, and provides a clear CTA for each item. This implements a more modern card-style design that highlights popular items to help reduce choice overload.

A design that draws attention to images, titles/descriptions, and provides a clear CTA for each item. This implements a more modern card-style design that highlights popular items to help reduce choice overload.

A design that draws attention to images, titles/descriptions, and provides a clear CTA for each item. This implements a more modern card-style design that highlights popular items to help reduce choice overload.

  1. Improved BYO ordering system

A scrollable ordering system that allows users to customize their item all in one place. This system includes a special instructions section, which the original site lacked.


Later in this project, we also tried a step-by-step format, splitting the customization process into 4 parts rather than 1. We conducted AB testing to see which format was better.

A scrollable ordering system that allows users to customize their item all in one place. This system includes a special instructions section, which the original site lacked.


Later in this project, we also tried a step-by-step format, splitting the customization process into 4 parts rather than 1. We conducted AB testing to see which format was better.

A scrollable ordering system that allows users to customize their item all in one place. This system includes a special instructions section, which the original site lacked.


Later in this project, we also tried a step-by-step format, splitting the customization process into 4 parts rather than 1. We conducted AB testing to see which format was better.

  1. About Us page

Communicates the primary values of Whealthy as a business. This design utilizes a bento box format to break up information into more manageable parts.

Communicates the primary values of Whealthy as a business. This design utilizes a bento box format to break up information into more manageable parts.

Communicates the primary values of Whealthy as a business. This design utilizes a bento box format to break up information into more manageable parts.

  1. Franchise page

Highlights the process of franchising while utilizing a bento box format to make information less overwhelming. Application CTA is also made clear.

Highlights the process of franchising while utilizing a bento box format to make information less overwhelming. Application CTA is also made clear.

Highlights the process of franchising while utilizing a bento box format to make information less overwhelming. Application CTA is also made clear.

Design Research - AB Testing
Design Research - AB Testing

At the mid-fi stage, we decided to conduct AB user testing to figure out whether a scrollable or step-by-step format for the BYO customization process was better.

At the mid-fi stage, we decided to conduct AB user testing to figure out whether a scrollable or step-by-step format for the BYO customization process was better.

At the mid-fi stage, we decided to conduct AB user testing to figure out whether a scrollable or step-by-step format for the BYO customization process was better.

A. Scrollable

B. Step-by-step


Winner!

Testing Results

Usability testing process


1. Is the participant a new or returning customer?


2. Task: Order a Custom Bowl, with a given list of ingredients to include.


3. Time the user’s ordering process for layout A.


4. Time the user’s ordering process for layout B.


5. Collect qualitative data through participant interviews.

BYO Layout


Of 14 participants, 11 preferred the step-by-step customization layout.


Participants who were new customers expressed that layout A looked overwhelming.


Returning customers reported that layout B took slightly less time.


Even though layout A is more optimal for returning customers, we chose layout B as it caters towards both new and returning audiences.

05.

05.

Hi-fis & Delivery

Hi-fis & Delivery

Hi-fis & Delivery

High Fidelity
High Fidelity
  1. Landing page / Hero section
  1. Landing page / Hero section

With a modern style and bold image, the landing page showcases Whealthy’s unique wok-style with an eye-catching image. Users can easily sign in jump to the online ordering from this section.

With a modern style and bold image, the landing page showcases Whealthy’s unique wok-style with an eye-catching image. Users can easily sign in jump to the online ordering from this section.

With a modern style and bold image, the landing page showcases Whealthy’s unique wok-style with an eye-catching image. Users can easily sign in jump to the online ordering from this section.

Our new account system
Our new account system

Customers can sign in to view points, update profile information, and quickly reorder past favorites.

Customers can sign in to view points, update profile information, and quickly reorder past favorites.

Customers can sign in to view points, update profile information, and quickly reorder past favorites.

  1. Menu + Order Online page
  1. Menu + Order Online page

We focused on highlighting images and providing clear CTAs for each dish. This design is kept minimalistic and modern to avoid overwhelming the customer with information.

We focused on highlighting images and providing clear CTAs for each dish. This design is kept minimalistic and modern to avoid overwhelming the customer with information.

We focused on highlighting images and providing clear CTAs for each dish. This design is kept minimalistic and modern to avoid overwhelming the customer with information.

  1. Improved BYO ordering system
  1. Improved BYO ordering system

The new system utilizes the step-by-step format as per the results of our AB testing. This helps reduce choice overload.

The new system utilizes the step-by-step format as per the results of our AB testing. This helps reduce choice overload.

The new system utilizes the step-by-step format as per the results of our AB testing. This helps reduce choice overload.

The last step of this process includes a summary of your choices to allow customers to double check their options. We also added a “special instructions” section for additional comments.

The last step of this process includes a summary of your choices to allow customers to double check their options. We also added a “special instructions” section for additional comments.

The last step of this process includes a summary of your choices to allow customers to double check their options. We also added a “special instructions” section for additional comments.

  1. About Us page
  1. About Us page

We designed a layout that reduced the wordiness of the original page into more manageable blocks. Rather than our original bento box format, we chose this interactive card layout to make the learning process engaging.

We designed a layout that reduced the wordiness of the original page into more manageable blocks. Rather than our original bento box format, we chose this interactive card layout to make the learning process engaging.

We designed a layout that reduced the wordiness of the original page into more manageable blocks. Rather than our original bento box format, we chose this interactive card layout to make the learning process engaging.

This interactive layout allows users to hover over each category card to read more about the company.

This interactive layout allows users to hover over each category card to read more about the company.

This interactive layout allows users to hover over each category card to read more about the company.

  1. Franchise page
  1. Franchise page

We wanted to make the application and learning process easy. Drawing attention to statistics, this design provides people with details about franchising while visually guiding them through the process.

We wanted to make the application and learning process easy. Drawing attention to statistics, this design provides people with details about franchising while visually guiding them through the process.

We wanted to make the application and learning process easy. Drawing attention to statistics, this design provides people with details about franchising while visually guiding them through the process.

Key Takeaways

Key Takeaways

Project in review
Project in review

Here are 2 final takeaways from my time as a designer on Whealthy:

Here are 2 final takeaways from my time as a designer on Whealthy:

Here are 2 final takeaways from my time as a designer on Whealthy:

  1. Don't just redesign –– reframe.
  1. Don't just redesign –– reframe.

Rather than simply redesigning what already existed, our success depended on reframing the online services themselves to better fit user needs.

Rather than simply redesigning what already existed, our success depended on reframing the online services themselves to better fit user needs.

Rather than simply redesigning what already existed, our success depended on reframing the online services themselves to better fit user needs.

  1. Communication is everything.
  1. Communication is everything.

When working for a client within a team, communication proved to be vital when pitching ideas, iterating, and drawing conclusions from our research.

When working for a client within a team, communication proved to be vital when pitching ideas, iterating, and drawing conclusions from our research.

When working for a client within a team, communication proved to be vital when pitching ideas, iterating, and drawing conclusions from our research.

2025 © Designed by Ella Su

Connect with me on LinkedIn

2025 © Designed by Ella Su

Connect with me on LinkedIn

2025 © Designed by Ella Su

Connect with me on LinkedIn

2025 © Designed by Ella Su

Connect with me on LinkedIn

Create a free website with Framer, the website builder loved by startups, designers and agencies.