Homemade
Recipe Web App
Homemade is a web app aimed to create a user-friendly experience that connects home chefs with local customers who are looking for homemade recipes. This project focussed on achieving a seamless experience for the user to find, share, and try new recipes in their own kitchen.
Introduction
Project Role
UX Researcher, UI Designer
Team Members
2 supervisors
Project Duration
2 months
Project Context
As part of the UI Design Course at CareerFoundry, I developed a comprehensive design for a recipe app, focusing on creating responsive designs for multiple devices while honing my skills in UX research and UI design.
Project Objective
The objective of this project was to design a clean and enjoyable web app that meets various user needs and addresses the challenges that are faced with existing recipe apps.
Research
User Interviews
I conducted interviews with four individuals from the target audience to gain insights into their needs and preferences for a recipe app.
Focal Questions
- If you are looking for a new recipe, what are the most important things that will help you decide?
- When following a new recipe, what makes it enjoyable for you? What might make it unpleasant?
- If you want to share a recipe with a friend or family member, how do you typically do so?
Competitive Analysis
To inform my design for a new recipe app, I analyzed two existing web apps, focusing on their strengths and weaknesses in user-centric design, UX principles, and market opportunities.
Forks Over Knives
The Good
- Forks Over Knives has a strong legacy over the last eleven years that is built on the transformed lives of many users.
- The application has many accessory tools that enhances the user’s experience and engagement.
- The user can find valuable and expansive information on dietary health effects.
The Bad
- Though the application is curated for plant-based diets, it is restrictive to which users can benefit from it.
- The UI design is a bit outdated and cluttered at some points.
- Compared to other applications, Forks Over Knives has a relatively small selection of recipes in it’s database.
Kitchen Stories
The Good
- Kitchen Stories has a very clean and attractive UI that allows the user to navigate and engage with ease.
- The application has an extensive database of over 4,000 recipes.
- Users have the ability to curate their own recipes and engage in social interactions through their profile.
The Bad
- Though Kitchen Stories has many recipes to choose from, there are not many tools for the user to use beyond the recipe.
- Categorization of recipes under the search feature isn’t traditional and therefore may not match user’s expectations.
- The web applications presents some minor coding issues.
Key Takeaways
- When choosing a recipe, the most important aspects is the appearance of the cover photo, the simplicity of the recipe, and the accessibility to ingredients.
- Aggravation comes when steps are unclear or the blog post distracts from the recipe itself.
- Users wish to streamline the meal planning side of cooking to help with grocery shopping. On the other hand, users wish to see a feature that allows you to filter recipes according to what ingredients you already have.
User Profiles
User Personas
Based on user interviews, I created three user personas to guide the design process and keep the target audience’s needs front and center.
User Stories
I defined several user stories to set the scope of the app’s design, outlining measurable actions for the app to achieve user goals effectively.
- “When I want to find a new recipe, I want easy search functions to categorically find what I am searching for, so I can save time in the search process.”
- “When I find a recipe that I like, I want to be able to save it, so I can easily find it at a later point.”
- “When I find a recipe that interests me, I want to be able to see a lot of information at a glance, so I can have a reasonable conception of the details of the recipe without having to look at the whole thing.”
- “When I want to share a recipe with a friend or family member, I want a simple and hassle-free way to do so, so I can share my experience with them.”
Concept Development
Minimal Viable Product
Objective
To design a responsive web app for recipes that allows users to easily find, save, and share recipes according to their preferences.
Feature Requirements
- Support categorical search features
- Provide favorites function
- Provide at-a-glance UI for recipe search
- Support a share recipe feature
Hypothesis
This first iteration of the application will provide a platform for users to explore and interact with the database of recipes; the user will be able to accomplish the core function of the application by cooking a new recipe.
Success Metrics
- Number of users
- Quantitative interaction with recipes
- Feedback module survey
User Flow Diagram
Now that I had a better idea about the parameters and needs that should be met for the user, a flow for the application began to come together. Here, I began to map out the flow that the user would undergo to accomplish the given tasks.
Initial Design
Wireframes
Now is time to set the primary actions defined in the MVP and User Flow to wireframe and simply prototyping for a user test.
Lofi Prototypes
User Testing
I conducted one-on-one user tests on the prototype with four individuals. The individuals were given four situational tasks to complete to assess the learnability and efficiency for users interacting with the recipe application for the first time on a mobile device. My purpose was to observe if these users are able to complete basic tasks as well as to identify any pain points that could be a hindrance to the user’s experience on this application.
Key Takeaways
- Overall, the onboarding navigation was easily achieved. There was minor confusion between the sign in page and sign up page.
- All users were able to easily navigate to the search page through the search bar and find the add filter button. Applying the filter was no issue, however I believe that the function could benefit from adding a filter success indicator to give the user extra confidence in the action.
- The placement of the recipe interaction buttons is functional and easily accessible to the users. The users defaulted to the native share button, but taken out of context would possibly default to use the browser share function.
- The ‘add to cart’ button caused some confusion; perhaps changing the icon to reflect a shopping list would better communicate its function.
- All users quickly found the home button in the top navigation bar. The only change I would make with the is aligning it to the left with with profile button.
Design Systems
Style Guide
As I began the design and testing phase of the project, I pulled from two primary mood boards in order to define color, typography, and iconography of the app to set a style guide. Before finalizing the style guide, various sets of colors and typography through a user preference test on mid-fidelity designs to help refine my understanding of the user’s perception of the style choices.
Usability Testing
Test Plan
With this recipe app being a web application, responsive design is necessary to adapt to all device types. In order to achieve this, I designed on a 12-column based grid for three different break points.
Feedback
After finishing my first round of high-fidelity designs, I shared them with three fellow UI Designers and discussed strong and weak points in the design that would be helpful to give attention to before finalizing further designs.
Final Designs
> LinkedIn >> Instagram >made with ❤ from Berlin - last updated September 2024
© 2024 Patrick Tayne. All rights reserved. Impressum.