Hero sectionn ImageHero sectionn ImageHero sectionn Image

Meshi

CAPSTONE PROJECT AT THINKFUL (FORMERLY BLOC)
Healthy eating made convenient and personalized. Meshi allows its users to order customizable meals that are fresh, high quality and healthy on-demand, weekly, or on a monthly basis

Overview

Timeline
4 weeks (10/2019)

Project Background

Meshi allows its users to order customizable meals that are fresh, high quality and healthy on-demand, weekly or on a monthly basis.
Responsibilities
UX/UI Design, Visual Design, Branding & Identity

What is Meshi?

It’s 2019, the year of on-demand everything but we’re also experiencing a culture shift to being more aware of where ingredients are sourced and what we put into our bodies. In response to the growing need for instant gratification, current culture shift and the surge of food delivery apps available to users, I explored creating an app focused on delivering made-to-order, healthy and fresh meals anytime - whether it’s on-demand, weekly or even on a monthly basis.
‍

The Problem

I first identified the problem by recognizing that there’s a growing community of people who rely on food delivery apps due to time constraints or not being able to gracefully navigate their way through the kitchen. They struggle with having very little time to shop or cook amidst other daily commitments, so they turn to the convenience of getting meals delivered to them.

So I wondered, how would this app help its users eat healthy in a more efficient way while ensuring that their meals check off the following buckets:
  • Meals are within their dietary restrictions
  • Fresh and responsibly sourced ingredients
  • Can turn eating healthy into a habit
    ‍

The Solution

I first identified the problem by recognizing that there’s a growing community of people who rely on food delivery apps due to time constraints or not being able to gracefully navigate their way through the kitchen. They struggle with having very little time to shop or cook amidst other daily commitments, so they turn to the convenience of getting meals delivered to them.

So I wondered, how would this app help its users eat healthy in a more efficient way while ensuring that their meals check off the following buckets:
  • Meals are within their dietary restrictions
  • Fresh and responsibly sourced ingredients
  • Can turn eating healthy into a habit
    ‍

Discovery

The Problem

In order to create a healthy meal delivery app that would cater to my users, I sought answers to the following questions:

In order to create a healthy meal delivery app that would cater to my users, I sought answers to the following questions:
‍
  • What were their current dining patterns?
  • What are their main reasons for ordering delivery?
  • How easy is their current process in ordering delivery?
  • What were their likes and frustrations with their current food delivery app?
  • Have they ever tried meal prepping?
  • Why did they stop meal prepping (or what would push them to stop)?
View User Survey
User Behaviour AnalysisUser Behaviour AnalysisUser Behaviour Analysis
My initial assumptions proved to be incredibly wrong. I went into the project thinking that users were looking to save time, use an app that resembles current ones but with bigger photos and filters to help with discoverability of meals within a dietary restriction and a service that offered structured and simple meal plans.

After research, I saw that users are looking for the ability to view healthy meals but customize it to their liking, have access to the meals on the day they need it. If on a meal plan, they want personalized meal plans to fit their need and schedule. Last but not the least, they also want transparency with how meals are made, where ingredients are sourced and environmentally friendly packaging.
‍

Competitive Analysis

Currently, there are a lot of delivery apps in the market including very well-known companies like UberEats, GrubHub and Amazon. Many tend to wonder why consumers need many apps to do the exact same thing. The answer is pretty simple - it’s because the food delivery market is growing fast and competitors have plenty of business to gain. According to Second Measure, overall food delivery sales grew 51% and there’s no customer loyalty between different apps since users migrate from one app to another.

It was important to look into what current competitors in the healthy food delivery realm were doing in order to build a product that would be different from what is currently offered.
Mixt DescriptionTerritory Foods DescriptionSakara Description
View Competitive Analysis

User Personas

After research, it was time to define who Meshi would cater to. But how? Enter Aleyne, Lizzie and Richard, three vastly different personas to embody the full range of Meshi’s target audience that I could refer back to whenever I need to validate my decisions.
My initial assumptions proved to be incredibly wrong. I went into the project thinking that users were looking to save time, use an app that resembles current ones but with bigger photos and filters to help with discoverability of meals within a dietary restriction and a service that offered structured and simple meal plans.
After research, I saw that users are looking for the ability to view healthy meals but customize it to their liking, have access to the meals on the day they need it. If on a meal plan, they want personalized meal plans to fit their need and schedule. Last but not the least, they also want transparency with how meals are made, where ingredients are sourced and environmentally friendly packaging.
Aleyne ProfileLizzie ProfileRichard Profile

Ideation

User Stories and Flow

After analyzing data and creating my personas, it was easier for me to compile a list of user stories. I ranked these stories by importance, from highest to lowest and converted them into detailed user flows. You can view some examples of them below:
1. As a new user, I want to sign up for an account to log in and start ordering food
User FLow
2. As a user, I want to customize what entree and sides I want so I can build a meal I really want to eat.
User FLow
3. As a user, I want to view how much a subscription plan costs so I can decide if I’m willing to purchase it.
User FLow
View User StoriesView User Flows
Meshi Sitemap
Sitemap for Meshi

Design

Sketches, Wireframes & Initial Testing

I turned to sketching simple wireframes which, as always, allowed me to explore ideas quickly and efficiently prior to moving on to high-fidelity wireframes.
Sketches
Sketches
These sketches were then translated to wireframes using Figma. Since I wanted users to get a good idea of what the app had to offer through onboarding screens, I also decided to test onboarding and signing up for an account through Maze to ensure that it would be an informative and smooth process.
‍
Low Fidelity WireframesLow Fidelity WireframesLow Fidelity WireframesLow Fidelity Wireframes
Low fidelity wireframes
Through Maze testing, I was able to uncover the following things and quickly revise my wireframes:
1. Users wanted an option to skip the onboarding screens: I had made a mistake in thinking that customers would better understand an app by reading all onboarding screens but didn’t realize that some wouldn’t have time to read or, would rather learn what’s in an app by actually using it.
2. Interested in seeing the contents of the app prior to signing up for an account: A bigger oops on my part - after this was brought up, I revisited Apple Guidelines and saw that it’s always better to allow guest access so that users can explore an app before committing to it by signing up.
Low Fidelity WireframesLow Fidelity WireframesLow Fidelity Wireframes
Low fidelity wireframes

Branding

Logo Design

I finally narrowed down 3 options for an app name: Meshi, MealBox and Green & Grain after a mind mapping session and ultimately decided to go with “Meshi” which also means food in Japanese. My memories of growing up in Japan usually have food included - the Japanese are known for portion control (hence the bento craze) as well as eating a well balanced and healthy meal. All of which were synonymous to what this app wants to provide to its users.
Logo
Logo exploration  

Color and Typography

When I looked into established food brands, there seemed to be endless possibilities with color combinations. I wanted to keep the focus on healthy food - reds, oranges, yellows and a ton of greens. To avoid eye strain, I kept Japanese influence in mind by incorporating muted and neutral colors.
I kept typography style simple in order to set good visual hierarchy. The contrast between Kollektif and Cooper Hewitt was a great way to provide users with clarity when reading through screens in the app.
Colour Palette ImageColour Palette Image
Color palette and typography choice

Style Guide

To complete the branding process, I compiled a style guide for Meshi to help explain how to use the logo, which fonts and colors to use and shows preferred elements when making design choices.
Style guideStyle guideStyle guide
Some pages from the style guide

Validation

High-fidelity Mockups & Preference Testing

With branding work done, it was time to tie this into my existing wireframes. After building my initial high fidelity prototype, I had to put it through a series of tests.
First came two design decisions that I needed help with and what’s better than running preference tests?
The first test was to determine which checkout button caught the eyes of my users the most:
Screen 1
screen 1
Screen 2
screen 2
Screen 3
screen 3
Screen 1, Screen 2 and Screen 3
Screen #2 had won with 70% of the participants favoring the bright burnt orange color that matched the icons that served for filtering on the top of the screen. The other screens scored 15% each. I decided to listen to my test participants since the design felt cohesive and orange seemed perfect for a call to action button.
My second test to determine the design of the meal modal, wasn’t as clear cut as the first test I ran.
Screen 1
Screen 1
Screen 2
Screen 2
Screen 3
Screen 3
Screen 1, Screen 2 and Screen 3
Screen 1 scored 26%, screen 2 came in at 39% and screen 3 was favored by 35% of the test participants. Ultimately, I decided to go with screen 2 which was chosen by many but updated it’s call to action button to the same burnt orange color to keep everything consistent.

Clickable Prototype & Usability Tests

After receiving results from my preference test and revising my designs, I ran usability tests using my Figma prototype. I asked my participants to complete the following tasks:
  1. Read all onboarding screens and access app. Once app access is granted, add "Vegan Tofu Red Curry" to your cart to enter sign up process
  2. Complete sign up process, and continue to purchase "Vegan Tofu Red Curry"
  3. Go to "Personalized Meals" and purchase “Chile Colorado with Quinoa Pilaf & Roasted Veggies” as sides
  4. Try to purchase a meal plan
  5. Update your first name to "Noah" and change password
All test participants completed tasks with ease and stated that the app was easy to use and intuitive but pointed out a few design and process flaws which were revised accordingly.
1. Meal Plan Subscription Process: Participants had mentioned how limited the meal plan subscription process felt and that options felt very restricted.
Previous Meal plan and Subscription ProcessPrevious Meal plan and Subscription ProcessPrevious Meal plan and Subscription Process
Previous meal plan subscription process
To address this, I implemented dropdown lists and a calendar rather than having the user enter a start date. By doing so, it would provide more personalization and clarity for the user as to when their meal plan would begin, which days it’d be delivered and what time each day.
Subscription ProcessSubscription ProcessSubscription ProcessSubscription Process
Updated meal plan subscription process
2. Meal Plan Review Screens: Users wanted more detail in the meal plan review screens and noticed a typo. I updated the design by adding more detail to the meal plan review screens which would help set better customer expectations.
Meal plan Review
Before
Meal plan Review
After
Before › After
3. Adding Payment Information Screens: This flaw turned out to be the biggest mistake that I made. One test participant was able to point out was that I missed creating screens that prompted users to add their payment information. With the help of Apple Guidelines, I incorporated this step during the first time a user completes their purchase.
Meal plan subscriptinon procesMeal plan subscriptinon procesMeal plan subscriptinon procesMeal plan subscriptinon proces
Adding payment information
4. Account Update Acknowledgement: Test participants also wanted acknowledgement of any account updates they’ve saved rather than just returning to the profile screen which was another oops moment for me. My initial design failed to acknowledge user action and was glad that this suggestion was brought up. A quick pop up was added to eliminate user confusion.
Meal plan subscriptinon proces
Before › After  

Iterations

Final Refinements

After applying changes to the design to significantly improve Meshi’s usability, I still found myself not feeling 100% satisfied. I gathered more feedback from my mentors as well as test participants to find things I could improve.
1. Alignment Issues: Previously, meal names on the left column were too close to the end of the screen and required more white space. In order to adhere to the margin requirement, I fixed text width of meal names and added more space.
UI
Before
UI
After
Before › After
2. Creating an inVision Prototype: My initial prototype was created in Figma since inVision didn’t support horizontal scrolling which was a part of my design (dietary restriction filters located on the top of the screen). I successfully found a work around to this issue by creating separate images to simulate the horizontal scroll.
View InVision PrototypeView Figma Prototype
3. Landing Page Animation: The landing page of my initial prototype depended solely on smart animations available on Figma. I turned to Principle to animate this page and incorporated it into the inVision prototype.
Principle Animation
Principle Animation
4. Microinteractions: My mentor, Mike Dekker had brought up that microinteractions would be a great way to refine an app and suggested that I do research on it. My first thought was that microinteractions existed to make an app seem more playful and fun but after research, I learned that it improves the user experience since it communicates the brand and encourages engagement.
It’s also an easy way to acknowledge the user’s action in the app which was something I had lacked prior to usability testing. I applied microinteractions to these parts of the app:
Add to cart illustration
Add to cart for built and personlized meals
Previously, users would click add to cart and it would lead them to the next screen immediately without any acknowledgement. This was improved by adding microinteraction so that users are made aware that they’ve added a meal into their cart prior to moving on ot the next screen.
Account Update
Account update
In the existing design, a simple notification would pop up to alert the user that their information was updated. Just like the add to cart function, a microinteraction was updated to signify that the update was completed.

The MVP

Final Refinements

After creating numerous screens, several iterations and conducting many tests, Meshi MVP finally came to life.

An easy onboarding experience

Learn about what Meshi has to offer even before you’re in the app then explore without having to sign up. Once you’re ready to make a purchase, you can sign up using your email address or Facebook account.

Zero waste, empty plate

You’ll never have to pick out the olives from your plate again. Meshi allows you you to personalize your meal so that you know exactly what you’re getting every single time.

Turn healthy eating into a habit

With customizable meal plans, you’ll never have to worry about your next meal or give into your cravings.
View High-Fidelity MockupsView Final Prototype

Wrap up!

Learnings

Food delivery isn’t the new kid around the block anymore - it’s a heavily saturated market that gets even more crowded and competitive as years go by. The biggest lesson I’ve learned during this project was to:
  1. Research and dig deep into current user frustrations
  2. Listen to customer wants and “dream” features are
  3. Identify what would increase customer loyalty while following your process
During the research and discovery phase of the project, I was able to unearth likes and frustrations that users had with their current preferred app, but I didn’t know the right questions to ask to find out more about the frustrations they were facing as well as what features an app would need for them to be loyal to it.
In addition to this, although I was able to follow my process, I know that I designed my wireframes and mockups so quickly that I forgot to take a step back to revisit my user flows more than once to dot my i’s and cross my t’s. This ultimately led to some missing screens for important processes and acknowledgement of user action.

If I Had More Time

If I had more time, I would’ve spent it more on user interviews to find out more features that users want out of their food delivery and meal planning apps. I’d also continuously look back on all the data I’ve accumulated to ensure that I don’t overlook anything.
This project was definitely an eye opening experience but as they all say, you have to make mistakes in order to learn.

Want to View My Other Projects?

Icon
Project card
Meshi
Project card
Summit
Up Health Logo
IRIS Client Portal

Let’s Talk!

Let's Talk Icon
Feel free to reach out for opportunities, or to say hello!
✨ Contact
Linkedin
Resume
© Sara Papa 2024