Project Summary
Overview
A mobile app designed to assist students with the task of maintaining a budget, managing time, and exploring new recipes to enhance a college student's experience with daily meals.
Virtually researched, ideated, and tested an application to help students like myself improve our ability to cook in the unique situations that a college student lives in.
Goals
• Help students broaden their cooking knowledge and make it easier for them to cook healthy meals while keeping their needs in mind.
• Conduct user interviews and determined personas based on team research.
• Create medium fidelity wireframe.
Role
Researched potential users, designed pathways for creating a profile and meal prep, including daily notes, weekly meal plans, and creating a grocery list, and assisted the team with critiquing the other pathways.
Problem Statement
College students often start with little culinary knowledge and face certain limitations which make it challenging for them to cook.
Span
This project was completed over the course of ten weeks in HCDE 318, a course on User-Centered Design, at the University of Washington during Spring 2021.
Tools
Figma, Miro
UI Design
This final product of our Chefy app prototype was altered using the feedback from the experience evaluation. The changes improved the users' ability to comprehend and interact with the various pathways including the meal planning, the profile, the explore page, and the community page. This version of the app can be used to create a fully functioning app in the future.
The Team
Elliana Beberness - UX/UI Designer, UX Researcher
Emma Drapp - UX/UI Designer, UX Researcher
Megan Ly - UX/UI Designer, UX Researcher
Research
Interviews
The team conducted three semi-structured interviews with college students and came up with a standard interview protocol involving ten questions that gauged the level of cooking experience participants had and their overall feelings about cooking. This allowed us to identify insights that narrowed the scope of our project and highlighted users' needs.
Prior to these interviews, the team had only identified target users - new or somewhat inexperienced cooks as well as some consideration for example potential dietary needs. This provided information about the kinds of questions asked such as, "What do you look for when looking for a recipe?" and "What kinds of resources did you use to learn to cook?". The interviews established the users' pain points which allowed us to create personas.
Insights
Fear of failure: The user felt held back from trying new dishes for fear of improperly cooking them which would prevent them from enjoying the meal.
Different modes of learning: Sometimes only descriptions of the recipe aren’t enough so the user prefers to watch YouTube videos to follow along visual cues.
Convenience is the most important factor: Convenience in the form of quick recipes, accessible ingredients, minimal clean-up, and easy cooking techniques were factors the user prioritized when deciding what to cook.
Inexperience: There were many things the user didn’t know how to do such as how to grocery shop, how to cook for themselves, and how to search for new recipes because they didn’t know what they would like.
Learning to meal-prep: The user hopes to learn how to meal prep healthy foods so they can take it to work - saving time and money.
Brainstorming
The team began to establish the goals, characteristics, pains, use/technology, desires/motivations, and scenario. The goals were what users wanted from the app, characteristics were of the users personalities, pains were concerns of the users, technology was the kitchen supplies and access users had, motivations were their meal goals, and scenario was their cooking circumstances. These ideas were collectively used to later establish personas.
Personas
The two user personas captured common behaviors and attitudes college students had about cooking which were largely derived from the user interview findings. Through affinity diagramming, different motivations and challenges participants had became evident. These users were kept in mind when deciding what features to include in the Chefy app.
User Journey Map
The user journey map explores one persona's actions and thought processes during various cooking stages.
It tracked the users' emotions which helped identify specific points that could be improved.
Research Takeaways
- College students have limited access to time, money, and kitchen equipment.
- Users have high levels of anxiety when deciding what to cook.
- Users get frustrated by how little time they have to cook more creative meals.
- Users wishes they were better at meal prepping.
- Users dislike the amount of time and energy it takes to cook and then clean up after their meal.
- Flexible functionality to support a variety of use cases is necessary
- Should include a step-by-step instructions to users in order to make sure their meals turn out delicious in the end
- Provide a creative variety of recipes
- Help users determine what groceries are necessary
Design
Design Proposal
After the research phase, our team had a better understanding of the users and their pain points. This led to establishing design goals, which are general qualities the app should have, and design requirements, which are more specific features that would be included.
Design Goals
- Create an environment in which users can enjoy cooking and gain confidence in their skills while still making healthy and accessible meals
- Provide guidance and motivation for users to plan their meals and explore other options safely and sustainably
- Provide new recipes and meal planning ideas for all living situations and budgets
Design Requirements
- Filter recipes based on dietary needs (allergies, pickiness, special diets, etc.), ingredients, owned, and time constraints
- Encourage users to explore out of their comfort zone through automatically suggested recipes targeted towards the user
- Contain step by step instructions with clear language that reduces ambiguity and confusion for users and short videos following the recipe with audio and written captions
- Assist in meal planning by allowing the user to filter based on categories(groceries required, recipes, time, budget, etc.)and offer a step-by-step plan with reminders (groceries needed, prep time, cooking time, etc.
- Allow users to build grocery lists within the app including where to purchase (with budget and time constraints)
Storyboards
My task was to create two storyboards using different techniques (hand-drawn and an online storyboarding tool) to envision typical cooking situations users encounter. This step helped empathize with users and create scenarios in which the app should be designed to improve the user cooking experience. The scenarios were informed by the previous interviews and personas created during research.
Information Architecture
Each screen was organized into an information architecture that mapped the pathways between the main interfaces of our app. I created the path for login process and the meal prep planner.
Interface Design Sketches
My assignment was to sketch five interfaces for the main functions of the app. The sketches described the operations and included a discussion section in which the interface was critiqued on its advantages and disadvantages.
Annotated Wireframes
I designed wireframes for the login and meal planning aspects and assisted with critiquing the other pathways from the information architecture. The annotations highlight the main features and interactions on each screen. These wireframes became the foundation for the lo-fi prototype in the next phase. Click here to view the full presentation on annotated low-fi wireframes.
Low-Fi Prototype
The Lo-Fi Prototype was a basic, grey-scale draft the app Chefy that allowed for interaction between the various screens. The lo-fi format led to creating the main pathways through the app and identify what functions were necessary from each individual screen and button. This prototype was created from the previously created wireframes. It assisted in identifying the problems with the current design that were then used to improve the final hi-fi prototype that is shown at the top of this page.
Experience Evaluation Plan & Simple Evaluation
The evaluation was used to receive feedback from potential users on their experience of using the Chefy app. A short interview was conducted before and after the user interacted with the app. We specifically evaluated three tasks: Searching for a recipe with a filter, changing their search preferences on their profile, and adding a recipe to the weekly overview meal plan. The lo-fi prototype was used to conduct this evaluation and the evaluation was used to make changes, such as adding more pages or altering symbols to better represent their actions, in the hi-fi prototype. Click here to view full evaluation document.
Design Takeaways
- There will be three main pages: explore recipes, meal prep, and profile.
- There will be some connecting pathways between meal prep and explore recipes when users add a recipe to their plan.
- Need to have pop-ups for many of our functions to ensure the layout is the same for all of them to maintain design consistency.
- One of the main interactions is adding a recipe to the meal plan so the flow should be clear and easy to follow.
- Pathways have unclear names that could potentially mislead users.
- More icons should be incorporated
- There needs to be a more clear indication that a user has added friends or selected a preference.
- The social aspect is unclear and should be made to encourage more user interaction.
- Preference settings in the profile aren't intuitive and need to be altered to be easily understandable.
- Explore page is overwhelming to a new user and needs to be simplified to reduce cognitive overload.
Reflection
Overall, this project was a great learning opportunity as I started my Spring quarter with little knowledge about the user-centered design process. This class allowed me to explore different design methods and apply them to create the Chefy app.
Project Reflection
What would you do differently?
One thing I would do differently is interviewing a wider group of users during the research phase. For example, I didn't interview college students living in dorms or male students which may have led to different insights.
What would you do if you had more time?
I would build out the functions in our hi-fi prototype. A few features like sharing a recipe with a friend aren't fully prototyped. Due to the time constraints, the design of some of our screens was chosen based on their simplicity, not necessarily their effectiveness. I would also want to do more user testing. When we did user testing this quarter, we used our lo-fi prototype which didn't have all the right pathways at that time. Furthermore, some of the features weren't fully functional so the feedback we got was limited.
What was your biggest challenge?
Completing this entire design sprint online was a huge challenge within this project. Asynchronous work prevented our team from in-the-moment feedback from team members, leading to certain disconnects within the lo-fi prototype that showed in our experience evaluation. Additionally, finding participants willing to be involved in user testing was a hurdle online and I had to rely on personal contacts which could have led to bias within the project. Overall, while working over zoom clearly doesn't replace in-person collaboration, we worked hard to regularly communicate with each other and follow internal deadlines strictly, and I am proud of the work we were able to come up with.
What was the most surprising thing in this project?
The most surprising thing in this project was the number of resources online to assist with app development and the design process as a whole. I was able to use sites to make storyboards, user journey maps, organize interview notes, and develop the app itself. Having all of these resources made collaborating virtually easier because we were able to work in real-time with one another even though we were working over zoom. We were able to keep all of our notes on an extensive Miro board that allowed for us to comment on one another's user research and other contributions. Learning how to use these sites, especially Figma, constantly surprised us because of the endless tools we had access to.
Team Reflection
How did your team work together?
Our team did an amazing job working together as we communicated effectively via text message and all attended class. We allowed one another to share personal opinions and suggestions for the various parts of the project and gave constructive feedback to one another. As a team, we were efficient and completed all of our deliverables in a timely manner, and distributed work amongst ourselves evenly.
