FreshKit.

No commitments, order as you go.

FreshKit is an on-demand meal-kit service concept tailors to customers that have inconsistent schedules, yet trying to maintain a healthy, and balance diet.

View Prototype

Project overview

Roles: UX Designer, UI Designer

Problem: People do not have complete control of the amount of meal-kits they order each week

Design goal: Create new web pages that allow customers to use the new on-demand meal kit service

Client Brief:

In order to differentiate themselves from other meal-kit giants like Blue Apron and Hello Fresh, they are offering an on-demand service. They are hoping this will become their niche and allow customers to order meal-kit whenever they desire.

Currently, Freshkit’s website does not offer the function for customers to buy individual meals. They are asking to create a new website that lives on a subdomain of their existing website. They would like the pages to have an emphasis about the on-demand service and make the new shopping experience simple and effective.


Constraints:

  • Client’s requests

    • Search and filter function

      • Most popular

      • Allergies

      • Vegan & vegetarian

  • Product detail page

    • Recommends similar meals

Target Users:

  • 21 - 35 year old health-conscious male and female

  • Value flexibility

  • College students and adults who work in an industry that does not have a fixed work schedule.

    • Ex: hospitality, retail, medical


Setting the stage

Problem

One of the major setbacks for meal-kit services is they require commitments. For customers work in industries that have inconsistent and unpredictable schedules, it is hard for them to commit into a subscription based service. People do not have complete control of the amount of meal-kits they order each week. These customers want to maintain a healthy diet without having to commit.

Long-term goal:

Become the meal kit service that is known for customization.

Potential hurdles

Customer journey map

Below is a customer map that I created to help me narrow down the challenges a customer might face when using the website with the combination of the How Might We questions. It painted a clear vision of where the opportunities were to enhance user experience. It also provided the structure when creating my site map and wireframes.

Customer Map

UX

Site map

As mentioned earlier, FreshKit required new web pages to enable customers to utilize the new on-demand service. The sitemap below illustrates the structure of the webpages, including a new landing page, product search page, product detail page, and checkout page.

Sketches

After I created the site map, I used an exercise called the Crazy 8’s to challenge myself to sketch 8 different ideas in 8 minutes to envision how the web pages would lay out. I did the exercise four times, one per web page. The point of this exercise was to push beyond the first idea I had and come up with more ideas that could potentially be better.

Crazy 8s

Crazy 8s

Wireframes

One of the challenges that I faced when creating the wireframes was to ensure the customers understood FreshKit’s new approach to their service, and provide them with a simple and seamless shopping experience.

View Wireframes
Landing Page —> Product Search —> Product Quick View —> Product Detail

Landing Page —> Product Search —> Product Quick View —> Product Detail

Check out Process

Visual Direction

After the client approved the wireframes, I created a style board to visualize the experience FreshKit is trying to provide to potential customers.

Screen Shot 2020-08-31 at 5.32.24 PM.png

Prototype

Desktop
Mobile

Below is a walk-through of the mobile web interface of FreshKit. My priority was to optimize the navigation flow of the interface to make the users feel like they are navigating through an app.

 
 

Test & Iteration

After building the high-fidelity prototype, I held five users test to understand their navigation flow, and specifically how they searched through the menu page.

Key Observations:

  • 100% of the users appreciated that the menu page allowed them to sort through the most popular dishes along with a variety of filters. It allows first-time users a chance to gain a quick understanding of what past customers enjoyed.

  • 40% of the users thought it would be useful to have a confirmation button after selecting the delivery time and date.

  • 80 % of the users thought the recommendations at the end of the product detail page would intrigue them to order more than one dish.

Iterated Prototype

Screen Shot 2020-09-03 at 5.38.30 PM.png

Style guide at a glance

Headers & Footers - Desktop (1).png

Final showcase

Previous
Previous

Metaverse: DBS Hong Kong

Next
Next

Revamping Uniqlo: UX/UI Design (Personal Project)