ON-BOARDING EXPERIENCE DESIGN
My Role: UX DESIGNER AND RESEARCHER
Tools: Sketch, LucidChart, Google Suite, Whiteboard
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.
Help new users find the right product for their baby's need quickly and efficiently. Make the experience for new parents enjoyable and informative.
Streamline the onboarding feature with the emphasis on education, care and transparency.
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.
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.
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.
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.
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.
I wanted to visualize Michael's experience with using Yumi's website, so I created his Journey Map.
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
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.
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.
Current User Flow
Suggested User Flow
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.
Home page sketches
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.
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
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.