Home Chef
Home Chef is a mobile web app that helps individuals who lost their jobs due to the pandemic can survive by selling their home meals
5 months (Revised)
✓ Design system, Grid layout
✓ Prototype interactions
✓ Visual / Information Hierarchy
Tools
Figma
Photoshop
Illustrator
React
Github
Trello
My Role
UX Research
Product Design
Built front-end components
Team lead
Design Process
Although design process is not always linear and perfectly applied to every single project but having a design structure can be helpful because it gives you structure, focus and direction.
1. Understand
I did foundational research and conducted a user survey to empathize with users’ pain points and their needs. This phase gave me an idea of what and why needs to be created.
Foundational Research • User Survey
Problem statement
Since the outbreak of COVID-19, many food and beverage industry businesses were closed temporarily or permanently and lots of people in the industry lost their income.
Home Chef app would especially benefit people who recently had to close their restaurants or do not have the resources to open up their restaurants.
“How might we create a convenient home meal sharing experience that’s going to financially help those who are suffering from losing their jobs due to Covid?”
Research
We collected data through user survey to identify problems and users’ needs for homemade meals and their related products.
We conducted a user survey using Google Forms to understand what users think about the existing products and explore possible solutions. Their response helped us to decide on the UX methods and action points for our product.
Key focus areas
• What are users’ relationships like with home-cooked meals?
• What do users feel about ordering homemade meals from apps?
• What factors / features do users consider the most when choosing between home meal marketplace apps?
• What are users’ main pain points and needs with existing products?
Survey Summary
Commonalities
▪ Users enjoy home-cooked meals and even prefer them over franchise foods
▪ Users enjoy the convenience of being able to order food online
Liking competing applications because they are quick, easy to use, and appealing to the eye
▪ Users find that the trust factor for food marketplaces is from online reputation and friend recommendations
Pain Points / User Frustrations
▪ Users find home-cooked meals take too much time to cook and having to clean the kitchen after cooking is a hassle
▪ Users have worries about hygiene and safety when it comes to ordering home-cooked meals from apps
Action Points
▪ A verification system so consumers can be assured that the vendor is certified to prepare their food safely
▪ A nice looking interface and user-friendly app
▪ Available to notify the vendor of an allergy before they prepare your food
2. Specify
To identify target users and where the users’ problems and needs exist, I analyzed how I could meet their needs keeping business goals in mind.
User Persona • UCBC
User Persona
To better understand the target customers’ pain points and needs, I created two user personas each – buyers and sellers. While doing this, I kept early adopters of our product and potential solutions for their pain points in mind.
- Identified and understood the primary target users
- Described the most relevant users’ backgrounds, problems, needs, and goals
The User-Centered Business Canvas
To specify how the product works on both business side and user side, I created the User-Centered Business Canvas.
There will be two main target user groups for this app: Sellers (Home Chefs) and Buyers (Gourmets). The app will provide a source of income for sellers working from the comfort of their kitchen. On the other hand, buyers can get home meal options that restaurants may not serve within their community.
3. Ideate
After conducting research, I combined it to observe where the users’ problems and needs exist. In this phase, I analyzed and planned out how I could meet their needs.
User journey map • Functionality map
Functionality map
A functionality map is a mind map where you reflect and decide what features to include in the product. To have a clear overview of the product and see what to include in the design, I created a functionality map with high-level and basic features of the app. Due to development time constraints, this app would be pick-up only, with no delivery option.
- Created feature ideas
- Started with high-level features → basic features (details)
- Reflected and decided what to include in the product
User journey map
Integrating the user personas, I created a user task model for each sellers group and buyers group to understand how the users would do step by step to complete their tasks and what pages I should need to build. Each user group goes through phases to achieve their goals based on their behavior patterns.
Sellers (Home Chefs)
Buyers (Gourmets)
3. Design
During my own revision, I built a design system from scratch and applied it to the design to keep consistency in design components such as typography, spacing, and colors. I also kept interactivity and design rationale in mind.
Hi-fidelity Mockups • Design System • Grid layout
Due to time constraints, I minimized the wireframe and low-fidelity prototype and focused on the high-fidelity prototype.
Sellers (Home Chefs) Pages
Buyers (Gourmets) Pages
Mobile web app
Considering the technical constraints we had and the benefits of mobile apps, it was designed and developed as a mobile web app.
Challenges
- Making sure the app is easy to navigate and accomplish the user’s goals
- Reducing features to MVP
- Understanding the core user needs
- Technical Constraints
Interactive Prototype
I created an improved functional prototype, and added animations. During design iterations it was refined for more interactive and smoother transitions.
Buyers – From product browse to order
Buyers can browse products through four categories – Trending, Chefs, Offers, Popular -, check details, schedule orders, and confirm their order after the pick-up
Sellers – From create menu item to confirm order
Sellers start by creating the menu items of their choice and set available pick-up times & locations. After finishing their orders, they can confirm the pending orders on the Orders tab.
Developed version
This is a pre-revised developed version.
Deployed on Heroku (Cloud Platform)
Seller login info
ID: merchant@example.com
Password: 123456
Buyer login info
ID: Dan@example.com
Password: 123456
Design System
Using a design system I created, repurposed it for this project. This allowed me to maintain consistency and reusability of my components.
4. Evaluate
I reflected on what went well and what could have been done better for the better next time.
Final thoughts
Iteration makes better
Through multiple iterations and revisions, I could find and fix the real problem and users’ pain points that I couldn’t see at the beginning.
What I have improved on:
- Defining the real problem space
- UX methods
- Design components & consistency
Using empathy to inform design decisions
Investing enough time in research & analysis and considering business aspects allowed me to understand the problem, users, and the product in-depth. No matter how good the design looks, it can only take the product usability so far.
- Business aspects
- Research in-depth
- Design thinking process