Plan your meals for the week ahead and make cooking a stress-free and fun experience.
Project Overview
Role
UI Design, UX Design
Project Scope
User Interviews, Persona, User Stories, MVP, User Flow, Wireframes, Style Guide, Usability Testing
Tools
Adobe XD, Adobe Photoshop, Adobe Illustrator
The Problem
Managing a busy schedule and maintaining a healthy diet can be stressful and challenging. It can be quite daunting and overwhelming to scroll through a variety of recipes and decide what to cook, especially when there are numerous other tasks on our to-do list. All too often, a nutritious diet is one of the first things we neglect in our busy everyday lives.
The Solution
To minimize friction and save valuable time, users require a method to swiftly decide on their meal plan without spending excessive time browsing through numerous recipes. Consequently, it would be advantageous if the app could offer recipe suggestions aligned with the user's preferences. Furthermore, the option to directly transfer ingredients from the meal planner to a shopping list can alleviate potential stressors and transform cooking into a enjoyable and rewarding experience.
Planning the Structure of the Web App
Who is the User?
Before diving directly into the app design, I aimed to understand WHO the user was I am designing for in the first place. What are the users' goals? Do they experience any pain points or frustrations that I could address? When would users utilize the product? To gain a clearer perspective of the target audience, I first began to define objectives.
Who?
People with a busy schedule that want to save time but are also aware of a nutritious and healthy diet.
What?
Plan meals and grocery shopping ahead, keep an eye on their nutrition, adjust filter options to their personal needs and follow recipes to cook meals.
Where?
Mostly at home / in the kitchen. They might use it on their desktop as well as on their mobile device.
When?
When planning meals and while cooking.
Why?
To save time on their meal planning and grocery shopping list creation.
How?
Users will search for recipes by filtering them according to their personal needs. They will decide a meal plan beforehand by putting recipes in a “calendar” and decide about ingredients that have to be bought based on these recipes.
User Research
The objectives helped me with better defining the target audience and identifying suitable participants for user interviews, enabling me to gather more meaningful insights for the project. The interviews helped to unveil the frustrations and goals of my users, further shaping the idea and direction of the project.
Frustrations
- Difficulty to find new and innovative recipes
- Difficulty to meet dietary needs or taste of all family members
Goals
- Better balanced meals
- Meeting dietary needs of all family members
- Better compatibility of busy lifestyle and diet
- Planning meals 1 week ahead
User Personas
Drawing from the insights I acquired during user interviews, I crafted three distinct User Personas. These personas helped me to gain a more defined understanding of the target audience. Continuously keeping these personas in mind enabled me to make conscientious design decisions and develop a product that resonates with user needs, rather than relying solely on my broad assumptions of the user's preferences or personal biases.
The MVP
Upon creating the Personas, I understood who the user was, but which functionalities could effectively solve the user's problems and align with their needs and goals. With my Personas at hand, I began formulating User Stories to gain a deeper understanding of their needs and what they were looking for in a recipe web app.
After iterating and generating an array of features and functionalities (while reminding myself that not every potential feature I could integrate into the app necessarily enhances the user experience), I started to categorize each as either a 'nice-to-have' or 'crucial' functionality. Afterwards I gathered all this information into an MVP document, which would indicate the initial direction of the product design.
MVP Objective:
- To provide an overview about nutritional information to reduce frictions for a healthy diet despite a busy schedule.
- To provide an overview about nutritional information to reduce frictions for a healthy diet despite a busy schedule.
Hypothesis
A healthy and nutritious diet and a busy schedule are not always easy to manage. When there is to much friction to cook healthy meals, such as deciding for a recipe, organize their grocery shopping or planning in advance, people are more likely to choose an unhealthy but fast option. Therefore, the web app aims to accommodate busy people with their meal planning and a healthy diet.
Success Metrics
- Number of user profiles
- Number of newly created user profiles
- Number of meal plans that have been created
- SEO Ranking
- Reviews from users
Translating Research Results into Visual Design
User Flow
Following the MVP, I began outlining the user flow based on the User Stories. The User Flow illustrated the path users would follow to navigate through different screens, highlighting decision points that would impact their progression within the app and the specific screens they would encounter.
Low-Fidelity Wireframes
The User Flow helped me with obtaining a clear understanding of the screens and functionalities that needed to be designed and so I started iterating on how the app's actual screens and navigation would be structured. After multiple iterations, including a series of 'crazy8's', I ultimately crafted my Low-Fidelity Wireframes, which served as the fundamental basis for the screen layout.
Usability Testing
To assess the usability of the app's navigation and overall design, I developed a simple prototype based on my Low-Fidelity Wireframes. I recruited three participants and assigned them five tasks to complete, aiming to identify any significant pain points or difficulties that could affect the navigation. Although the testers encountered no major issues while navigating the app and completing the tasks, I identified some points that I intended to address in my iteration for the Mid-Fidelity Wireframes, with the goal of enhancing the overall user experience.
The Style Guide
While the Wireframes offered the foundational structure of the recipe app, it's unlikely anyone would engage with an app solely in grayscale. Thus, I shifted my focus towards refining the app's appearance and style. I selected colors and typography that harmonize with the app's positive and cheerful atmosphere, ensuring users feel welcomed each time they launch the app. Additionally, I crafted icons and a logo to further enhance the visual appeal.
Screens & Functionalities
Following the application of the styles I outlined in the Style Guide, I went on to incorporate them into my wireframes. However, since the visual style represents only one facet of crafting a successful product, let's also examine how I implemented the functionalities I previously defined and how I harmonized both the UX and the UI design.
What I've learned
Don't implement all ideas or possible features from the beginning
Having a bunch of ideas and solutions during brainstorming is great but implementing them all from the beginning consumes valuable resources and time. Instead of striving for a single finished product, it is more beneficial to create a functional version of the product first (MVP), and then iterate on additional features after the initial launch. This approach not only helps in generating early profits that can be reinvested in further development but also allows you to gather valuable feedback and insights from users for subsequent iterations.
Don't design alone
While involving users in the design process is essential, it's equally important to engage with other stakeholders, such as colleagues, fellow designers, developers, or industry experts. Each of these individuals can provide valuable insights and suggestions to enhance my work. Another designer might offer a fresh perspective and valuable tips for improving my design, while a developer can assess the technical feasibility of my ideas. Receiving, and more importantly, accepting critiques is crucial for achieving a well-designed end product and should never be overlooked.