Yum.me: End to End Application
Final Prototype
Overview
Client
Student project with Designlab
My Role
UX/UI Designer and UX Researcher
Duration
80 hours
Introduction
Yum.me is a social app for food lovers that will help users track recipes they cook, food they have cooked in the past, what they will cook next, and also everything they have cooked so far. Users are able to upload recipes with media content to their profile, follow recipe pages, bookmark recipes, and leave comments on recipes to correspond with other users to share their experience with creating a dish to grow their culinary skills.
The Challenge
Create a social application that invites users together to have conversations about food from all different backgrounds.
The Solution
Design an application to be bright, welcoming, easy to use, and with a highly customizable experience for the user.
Research
User Interviews
I met with 4 different participants to conduct 1-on-1 interviews to learn about the browsing habits of users when browsing for a recipe to learn the following:
Goals
Needs
Dislikes
Likes
User Criteria
Ages 25-60 since this application aims to reach people in different age brackets
Anyone who self reports that they regularly cook
People who primarily search for recipes online
Research
Competitive Analysis
My Competitive Analysis was based upon recipe applications that could be downloaded on a smart phone. They were analyzed based upon three categories:
Strengths: Based on aspects of the application that personalizes uniquely to a user strongly, features that are strongly executed, and features that facilitate a streamlined cooking experience for the user
Weaknesses: Based on aspects of the application that don’t allow for autonomy in choosing a recipe, UI issues, and aspects that hinder personalization
Notes: Based on any chart ratings, awards, or overarching aspects of having an account
Link to view below image larger: https://drive.google.com/file/d/1CQZom1irWK7Bds24UXq3aKbhO-7gt9bO/view?usp=sharing
Persona
I narrowed down to a singular persona to fit Yum.me’s core audience based upon what I gathered in my research. The target audience is based off of adult professions who are looking to cook more often but need a streamlined, quick, and simple experience when choosing a recipe.
Features Roadmap
Upon completing my research, I created a roadmap of features in the following categories:
Must-Have: High priority features that need to come in this prototype
Nice to have: Features that would be helpful to have, but not deemed necessary by users
Surprising and delightful: Features that would be nice to have, but can come in the next prototype
Can come later: Features that are a long term goal and can come later
Image on left clicks to expandUser Flow
I created a user flow that begins from the login page where a user has the option to create an account or sign in as an existing user.
From Sign In or Sign Up, a user is directed to the dashboard where they go on to search for a specific recipe where they can view reviews and add it to their cookbook. From here, a user is able to view their cookbook, where recipes that they upload or save are stored.
View larger image:
Design: Mood Board, UI Kit, and Wireframes
Inspiration
Before starting with the low fidelity wireframes, I brought some imagery together to create a Mood Board based upon some key terms that I envisioned for this application: fun, streamlined, colorful, collaborative, and food focused.
I truly enjoyed working to create a color palette and imagery that would fit the key terms in a way that would make users have a fun experience that makes them feel as though their experience would be quick and personalized.
Low Fidelity Wireframes
I created some low fidelity wireframes in order to get a visual of what I wanted the layout to be. While creating these, I kept in mind that I wanted a streamlined experience for the user that still allowed for a considerable amount of collaboration amongst users and options to customize experience.
UI Kit
My primary goal for this application was to create something that was fun, streamlined, colorful, collaborative, and food focused. My role was to come up with a color palette, font pairings, and imagery that would showcase this.
Link to view larger image: https://www.figma.com/file/3zCBHulg5gA3bV3pZcUojY/Untitled High Fidelity Wireframes
For the design, I created all of the pages for the user flow for the application. Below are some samples of some key pages of the prototypes that were utilized in the usability testing that was done before the final iteration.
Usability Testing
I created a prototype from some high fidelity wireframes where I had four participants complete five tasks in one round of a moderated usability test. These usability tests took place in person as I sat alongside the user and took notes based upon their experience with the prototype.
Tasks
Sign up as a vegetarian
Search for a vegetarian quiche that is easy to make for breakfast for a brunch gathering
Find the spinach and artichoke quiche
Add the spinach and artichoke quiche to your cookbook
Go to your Yum.me profile
User Experience
After the usability test, I asked each of the users the following questions to factor into my outcome:
How did you find sign up? What kind of rating would you give it if 1 was very hard and 5 was very easy? (Scale of 1-5)
How did you feel about searching? What kind of rating would you give it if 1 was very hard and 5 was very easy? (Scale of 1-5)
How did you find looking for a specific quiche recipe? What kind of rating would you give it if 1 was very hard and 5 was very easy? (Scale of 1-5)
Were you able to find your profile? What were your thoughts? (Scale of 1-5)
Do you think there was anything missing?
Can you pick 3 out of the following 11 words to describe your experience as a user of this prototype?
Accessible
Unattractive
Approachable
Busy
Confusing
Easy to Use
Fun
Effortless
Intuitive
Trustworthy
Attractive
Outcomes
100% of users were able to sign up without coaching
100% of users were able to search for the quiche successfully, however, 50% initially clicked browse
100% of users were able to find the spinach artichoke quiche
100% of users were able to add the recipe to their cookbook
100% of users were able to find their cookbook
Words used to describe app: accessible, easy to use, attractive, approachable, fun, trustworthy, and intuitive
Affinity Diagram
I created an affinity diagram of edits to be made in the final prototype from my observations in the usability testing and divided the categories in the following ways:
Positive Responses
Urgent Edits
Edits that can come later
Feedback
The Final Prototype
Conclusion
I truly enjoyed this project and the creativity that went into it. I feel as though I learned a lot from my usability testing where my takeaway was to label the navigation bar so that the search function would be more clear. In the future, I would love to do more usability testing to test how this allows for clients to more seamlessly search.
My future plans for this project is to add more to the social aspect of this application. I would love to add flows where users can view cooking livestreams and join groups based upon interest to collaborate with others in their culinary journey.
I would love for this to eventually be a collaborative and educational application where people have a customizable experience that they find a community in.