Yello Mango
April-Sep 2020

Yello Mango’s MVP

Deliver low-cost affordable meals to working professionals that fits their preference

Industry

B2C

Platforms

Responsive-Web, PWA

My Role

Founding Product Designer, User Researcher

Project Overview

About the Project

An early-stage B2C food delivery start-up aims to deliver affordable meals to working professionals that fit their preferences.

Working professionals struggle to find lunch at the workplace that fits their budget and preferences. So how might we create a product that solves this need?

My Team

External Developers,
Founder

Timeline

April 2020- Sep 2020(5 months)

My Responsibilities

I was responsible for overseeing the product from conception to the launch of the company’s first MVP through various design deliverables like synthesizing research; user flows, prototyping, testing, creating UI specification documents,…etc.

The Challenge

How might we create a platform to help working professionals order lunch at their workplace that fits within their budget and preference?

Research

Target Audience

The target audience were working professionals who went into the office and depended on delivery services to get lunch during their short lunch break—they had specific budgets and food preferences.

During that time, we were at the peak of COVID; the stakeholder assumed that COVID would be short-term, so there was push back into exploring other user groups (i.e. working from home professionals)

Research

Synthesize

The client handed me raw research data they conducted with the target audience. However, the results of this data were inconsistent due to research questions being superficial with all then interviewed users.

I advocated to conduct user interviews again for the following reasons:

Due to budget constraints and push back, I had to work with the raw research data and take pieces of the data and piece it to my best abilities.

The Challenge
#2

The data was insufficient to formulate trends around the users or understand the problem space. As a result, I could not make an informed decision about the next steps.

I did the next best thing to understand the problem space and did a competitive analysis to understand the market and user needs better.

Some Form Of Research

At this point, I felt we should think about scalability and whether exploring this market within COVID would be beneficial.

Competitive/Comparative Analysis

Synthesize
2.0

Research Deliverables

I created scalable artifacts and compiled the insights from research into a persona representing our target customer.

I would refer back to Alex’s behaviors, goals, and frustrations through the rest of the process to ensure Yello Mango would help her achieve her needs and goals.

User Persona

Mid-Fidelity Wireframes

Ideation

I had an ideation workshop in collaboration with the founder. First, I created quick sketches in Figma, playing with different features and ideas. Then, I evaluated which wireframes to move forward with based on our persona & competitive research.

Figma Ideation workshop using low fidelity

Mid-Fi
Wireframes

The challenge was focusing on finding the simplest solution while considering the user's needs. I took the prioritized features from the ideation workshop and created Mid-Fidelity wireframes that I tested with five users.

Mid-Fidelity Wireframes

Usability Issues

The usability testing showed that the wireframes were a hot mess.

1

Issues

Users loved that their dietary preferences were considered and felt that the application included their needs. However, the user didn’t want to enter this earlier in the sign up process.

“Before signing up, I would like to see if the meals are worth my dollars”.

2‍

Issues

Users loved that their dietary preferences were considered and felt that the application included their needs. However, the user didn’t want to enter this earlier in the sign up process.

Validation

High-Fidelity

After iterating on the wireframe to the point where it was usable, I did another round of user testing to ensure that the wireframe was ready for implementation.

Homepage

Window-shopping options

Ordering Page

Ordering Page

Defining
Patterns

Implementation
Support

An interactive prototype and a Figma file weren’t sufficient for the developers to know the micro-interactions of the design, especially for PWA, and that’s why there was a need to create this wire-flow.

Wireflow

Outcome &
Takeaways

The web app did not make it to beta and did not get any seed funding. I hypothesize that there was a lack of understanding and clarity of how is Yello Mango was different from any food delivery service.

Takeaways

1. I should have taken research into my own hands and prioritized researching the problem, then following the client's wishes.

2. Developers should have been involved within the beginning of kick-off, not just in implementation. Later in the process, I have noticed a lack of alignment on goals.

Additional Discussions

Points which are not covered but could be worth discussing

1. Feature Prioritization
2. Progressive Web Application (PWA)

Thanks for making it this far.

Here’s a GIF for you