George Bernard Shaw once said: “There is no sincerer love than the love of food”. Perhaps, that is one of the reasons why food is the endless source of inspiration for UX designers.
About the Project
My role:
-
Product strategy
-
User research & Analysis
-
Persona creation
-
Wireframes
-
UI Design & Prototyping
-
Illustration/Icon design
-
Usability Testing
Tools:
-
Miro
-
Adobe XD
-
Adobe Illustrator
-
Pen & Paper
-
Lots of Coffee
Spring is a restaurant finder/delivery app that helps people to find food according to their dietary preference easily from their smartphone, without spending too much time looking for Vegetarian or Vegan options in the restaurant.
I chose this problem because it is incredibly important and interesting to me as I will be spending a lot of time on this topic! Being a vegetarian, it is time-consuming to find such places where I can eat delicious vegetarian food.
My process
I used Lean UX principles in the development of "Spring" to focus on users and their needs at each phase of the design process:
-
Formulate and validate the hypothesis.
-
Conduct early user testing with rough sketches to unveil unexpected pain points.
-
Define MVP.
-
Focus on research results to create features that users really need.
-
Develop a custom toolkit that includes Creative Clouds libraries, shareable inspiration boards, and Slack and Google surveys forms.
-
Externalize the work using sticky notes, printouts, or sketches.
The number of all-vegan restaurants has expanded greatly, and will continue to grow —nearly 20 years ago there were just 55 all-vegan restaurants; today there are more than 660, according to the Vegetarian Resource Group (VRG). Yet it is not easy to find restaurants that serve vegetarian/vegan food for many people.
A recent survey found that 91% of vegans are having a tough time finding to-go meal options.*
I conducted a user survey to prove my hypothesis and gain useful insight. To reach a larger audience, I wrote a short, 15-question survey and posted it on different online communities and Facebook groups that matched the target user profile. I received 52 responses.
RESEARCH AND PROBLEM DEFINITION
User interviews (remote)
At the beginning of my study, I conducted an interview with several participants who use a smartphone app to find restaurants or order food online regularly, strongly follow vegetarianism, and loves eating out in restaurants.
4 user interview from 52 user survey responses, 30 minutes interviews
Affinity Mapping
After talking with people about their real experience and expectation of the food delivery app, I developed a user empathy map to capture the crucial pain points and challenges users may encounter and cause frustration.
What did I find?
-
People with food intolerance struggle to decide what and where to eat on a daily basis
-
They use multiple blogs, websites to find the good restaurant that serves vegetarian options
-
They tend to plan ahead, although this does not always work out as planned
HOW MIGHT WE?
HMW open up to Ideation sessions where I explored ideas that can help solve the design challenge
improve the search engine to get accurate results to find vegetarian restaurants?
Encourage users to review and share experiences about vegetarian food at the restaurant they visit?
To help travelers find local restaurants with vegetarian options on smartphones?
Create an effortless online ordering experience for vegetarian eaters?
Help users to identify the vegetarian options on the menu?
PERSONAS
Based on the interviews and affinity mapping, I set up three personas. I referred to them throughout the entire product development process.
User Flow
I've created a user flow diagram to map every step of the user interaction required to achieve the main goal of this app: "As a user, I want to find Vegetarian options in the restaurant easily"
DESIGN EXPLORATION
Low-fidelity Wireframes:
I sketched each iteration and added the elements and screens that were necessary to reach users' goals, to quickly see which ideas worked best. I put the sketches into inVision to build an interactive prototype and tested some user stories with three different individuals.
Findings:
-
Importance of form fills up( preference of food) in the onboarding process.
-
Use of filter options for an accurate result
-
Select cuisine options near the search button.
-
MAIN 4 things to select the restaurant: Menú with vegetarian dish, ratings, reviews, and pictures
Hi-Fi
Wireframes
Mid-Fidelity Wireframes:
I turned my revised sketches into interactive wireframes in AdobeXD.
Style guide
Once I tested out all usability mistakes, I started designing the final screens in Adobe XD.
Look & feel
As a first part of the UI design process, I experimented with different colors and styles. I tried to focus on color and visual elements that can distinguish SPRING APP from other food delivery app
Final design elements:
-
Using White and cream as a base color.
-
Adding simple and clean typography - created components for title, subtitle, and paragraph.
-
Rounded edges and circles for a friendlier look
-
Vibrant, high-resolution food images.
Hi-Fidelity Prototype
Usability Testing
After a few more iterations, I designed the final screens in Adobe XD. I conducted A/B testings during the process to define the design pattern, elements, and colors.
The most challenging part was the icon design. It took a few concepts and revisions until I created a structure that was clear, concise, and easy to understand in 5 seconds.
My aim was a clean, modern look that helps users fulfill their goals. "Spring" is all about finding delicious food quickly; therefore, I focused on the color scheme to help transmit appetite and trust.
I also designed illustrations to keep the look fresh, diverse, and modern.
03
Iterations
10
Usability Testing
32
Screens
03
A/B Testing
What have I learned from this project?
I enjoyed working on this project, It also helped me to learn more about the current food delivery app market. Most importantly, it made me a good researcher.
-
Sage advice from my mentor, Carl Miller: “Design is never done!” (There’s always more to learn from users and to use that knowledge to improve upon from your design.)
-
Empathize with the user. What’s clear to you may not make sense to them.
-
User testing – Listen to what your users say, and more importantly pay attention to where they click when they’re silent. Most people are very accommodating and will want to please you with their responses.
You can see the final prototype here