Project Yum
A responsive website finding the best deals for young professionals ordering food online.
The Challenge
Propose a problem that real users face when it comes to ordering food and design a responsive website that helps alleviate the problem.
Role
UX Researcher, UX/UI Designer
Toolkit
User interviews, persona, journey map, information architecture, card Sorting, site map, sketching, wireframes, rapid prototyping, usability testing, specification document.
Initial Problem
Our assignment was to create a responsive website that solves the problems of real users in the category of “Food”. We brainstormed different avenues with opportunities, considering the food lifecycle, sustainability movements, niche markets, retail establishments and beyond.
![]](https://images.squarespace-cdn.com/content/v1/5bbbeacfa0cd2777830a675d/1557816109394-HZUENPOGXZZMPD8DG0PK/%5D)
USER RESEARCH
In order to narrow down the focus we sent a screener to reach out and identify users to interview for a deeper understanding of their needs.
To do so we narrowed down the scope from all food to those who identified as
PRICE CONSCIOUS
PREFER CONVENIENCE
We found 6 Users that met our criteria
20-50 years old - 4 Female-2 Male
Order their meals through online food ordering services
Set a weekly budget on their meals
Order food for lunch at work
KEY INSIGHTS
Users with a set budget are constantly looking for ways to save money.
6/6 Showed interest in saving money
4/6 Shared that they are price conscious
Users would like to use discounts, but they are often time-consuming and difficult to find
6/6 Use discounts when ordering food online
5/6 Expressed frustration with the process
Users have a limited amount of time to make affordable and healthy restaurant decisions
4/6 Were upset with inefficiencies of their go to website
5/6 Expressed that they are healthy eaters and shared the difficulties of finding affordable healthy food
“I went on Caviar and noticed the delivery fee, but then I looked on another website and I found a discount code for free delivery. I was like “HAHA!”, saving $.99 cents. SCORE!”
-User 2
“Spending alot of money on food that lacks taste and quality is a problem for me. If i’m going to spend money I need to know it’s gonna be good.”
-User 5
Meet Karen!
After synthesizing the data from our interviews through Affinity Mapping we developed Karen, a persona to bring our users to life by providing a consolidated view of the needs, goals, pain points and behaviors they shared when ordering food.
Karen’s Lunchtime Journey
With Benjamin on hand we walked through the existing process of commuting in the morning including his overall morning and his interaction with the app. The Journey Map below allowed us to visualize the highs and lows experienced by commuters and the ways in which we may be able to alleviate these pain points with a smoother design.
The Problem to Design For
When young professionals are short on time and are on a budget, there's a limited amount of food options that would fit within their price range.
Karen is overwhelmed from work, hungry, and only has $15 to spend. How might we help Karen enjoy her meals while trying to save her time and money?
DESIGN
We performed 6 rounds of design studio as a team to generate ideas and build off of each others.
As we were creating a responsive website we followed the rule of mobile first and created our first lo-fi mobile prototype performed usability tests and quickly iterated until we reached our final hi-fi prototype.
FEATURE PRIORITIZATION
During the design studio as we generated a number of ideas we prioritized which features to include on our MVP. Looking to our research we determined and mapped out which ideas we MUST have, Should have, Could have, and Won’t have, commonly referred to as a MoSCoW Map.
This was a valuable asset that helped in designing as we went through iterations and increased detail and fidelity.
Desktop Wireframes
User Landing Page
List with Map
Restaurant Page
Prototype
NEXT STEPS
Further develop personalization and customization feature
Build out the ratings section so users can determine quality
On boarding: Design an introduction to websites features and value
Continue to test and make necessary iterations on the design