top of page
Yumi Mockup.png

YUMI

ON-BOARDING EXPERIENCE DESIGN

 

 

My Role: UX DESIGNER AND RESEARCHER

PlatformWebsite

Tools: Sketch, LucidChart, Google Suite, Whiteboard

 

Overview

YUMI is a subscription-based online service that creates and delivers fresh, organic, tasty and nutrient-dense meals to maximize the health of growing babies. With the help of chefs, pediatricians, and nutritionists, every meal is carefully designed to provide parents with the necessary resources that are the most crucial for their child's first years of development. 

Challenge

Help new users find the right product for their baby's need quickly and efficiently. Make the experience for new parents enjoyable and informative.

Solution

Streamline the onboarding feature with the emphasis on education, care and transparency. 

My Process

Discover through research

Define through synthesis

Develop through ideation

Design

Research

Discovery Phase

Research

The Beginning

The Beginning

I started with identifying the key problems with the existing Yumi website. I conducted a Heuristic Evaluation using Jacob Neilson's Heuristics methodology and rated each severity on the scale from 1-4, with 4 being the highest.

Yumi Heuristic Evaluation.png
Insight

Comparative and Competitive Analysis

Once I understood the issues with the current site, I conducted a C&C Analysis to see what Yumi's direct and indirect competitors - the platforms that provided subscription food delivery service - were doing differently. 

Yumi C&C.png

C&C Results:

 

  • All of the competitors have a signup pop up and an insentive to join when entering their sites as a guest.

  • In order for Yumi to stay competitive, the above features needed to be added.

 

Insight

Defining Phase

Understanding the users

I created a User Persona Michael Cross based on the results of the usability test. I identified my persona's pain point and created a scenario.

Yumi User Persona.png
Father and Daughter

User Scenario

As a new parent, Michael is constanty worried about his baby's well-being because she's a very picky eater, so the food she likes the most is normally full of sugar and concentrated. Lately, she's been waking up a lot more crying for no apparent reason. He wonders if it has anything to do with the baby's diet. Someone recommended him Yumi products, so he decides to try them out.

Michael's Experience

I wanted to visualize Michael's experience with using Yumi's website, so I created his Journey Map.

Journey Map Michael Cross.png

My major findings:
 

  • Users were confused by lack of information given to them when they entered the website

  • The inconsistencies of the CTAs and the text next to them on the landing page were also confusing

  • Users wanted more information before they could commit to a purchase

  • The time spent (14.02min) trying to figure out the steps to find the right product was a very annoying factor

 

 

 
Ideate

Developing Phase

Ideate

Prioritizing Features

As part of the redesign, I used the Moscow method to determine what features I must focus on and prioritize to maximize user's browsing experience.

Yumi Feature Prioritization.png

User Flow

Next, I set out to redesign the checkout user flow to create a more streamlined experience. Through the usability tests, I've learned that the current flow is confusing and often lacking information which caused the participants to stop and go back to the home page or the previous steps to make sure they were making the right choices.

Yumi Current User Flow.png

Current User Flow

Suggested Yumi Flow.png

Suggested User Flow

Design

Delivery Phase

Design

Design Studio

So now that I had clear idea of the user flow, it was time to visualize my design. I rapidly created sketches on a whiteboard.

IMG_0611.JPG

Home page sketches

IMG_0622.JPG

Onboarding page sketches

Building Mid-Fidelity Wireframes

Next, I jumped into Sketch and fine-tuned my design of the homepage in this mid-fidelity Wireframe.

Mid Fidelity Wireframes.png
Next Steps

Due to time constrains, I was unable to deliver a high-fidelity prototype in this design sprint so instead, I'm adding the steps I would take next to complete the onboarding feature design.

 

1. Finish the mid-fidelity user flow UI

2. Create high fidelity wireframes

3. Create a clickable prototype in InVision

Measuring Success

To measure the success of my redesign, I would:

1. Use Google Analytics to determine the increase of the conversion rate.

2. Conduct another Usability Test and compare the metrics in terms of time spent on-boarding and purchasing the products.

  • White LinkedIn Icon
bottom of page