From my experience, my mother usually cooks some bakery accompanied with a document folder containing A4 papers of her recipes. It is quite struggling for her to track the recipe with the amount of text to read. Also, it takes time for her to find the recipe she wants in that stack of papers.
July - August 2022
UX/UI case study
I developed this project as I learn more about UX design from the Google UX Design Professional Certificate course.
Visit the case study deck here.
Case study deck
"Design a recipe organizer app for a café in your hometown." is a task I got from the course. Even though I didn't have a chance to have conversations with those who actually work in a café, I managed to develop this project based on personal experiences, competitive analysis, and interviews with my friends.
Summary
I also did a competitive audit on recipe management and organizing software either for f&b businesses and home-cooking. With that, I found some limitations that might make a small café staff struggle.
From the research, I concluded that the challenges are correctly following recipe directions while cooking, difficulties to search for a recipe, time limitations in working with orders, and allergen management in recipes. The staff may need a more effective way to manage recipes so that could enhance the quality of work.
Competitive Analysis
Pain points
1. Organizing
Users need a more easy way to access the recipe library, and quickly find the one they're looking for.
2. Accessibility
There are limitations to reaching their recipe while they are cooking.
3. Ingredient
There is a lack of management of allergens in recipe ingredients.
Persona: Jane
Problem statement
Jane is a busy café employee who needs an efficient way to organize and view recipes while cooking because she needs to work quickly and gets the orders right without any confusion.
User story
As a busy employee with many orders in hand, I want to want the recipes to be more organized in one place so that I can work faster and more effective without getting confused.
User journey map
Creating Jane's user journey map illustrates how the experience of staff would be and what opportunities can be offered there.
User flow
This diagram illustrates the main flow of the app; to browse for recipes, see the details, and follow recipe directions.
Paper wireframes
I drafted wireframes for screens that would be included in the main user flow: to browse and see recipe details. The screens are sketched after I listed some features that should be included to address user pain points. For example, the home screen must include search and filter buttons and allows users to create a new recipe. After that, I analyzed what elements are essential and sketched the final version.
Digital wireframes
I then developed digital wireframes based on the paper version. The home screen includes quick and easy ways to access recipes. It allows users to organize recipes in categories and search for ones.
The recipe profile screen offers some details a café might need, with accordion menus for ingredients, instructions, and final product images. The instructions are then broken down into separate screens for each step, so it is easier to read while cooking.
Low-fidelity prototype
After the set of digital wireframes was completed, I created a low-fidelity prototype for later use in a usability study. The prototype has a structure of the main user flow that users can browse through categories of recipes, create a new recipe, and see recipe details and instructions.
Low-fidelity prototype link
Usability study: findings
As the prototype was ready-to-use, I conducted two rounds of usability studies. Both of the studies revealed insights that help in refining the design to better address pain points.
Round 1:
The low-fidelity prototype was used. The results helped to develop the prototype into the first version of mock-ups.
1.
The ‘create a new recipe’ screen has many unnecessary items.
2.
The recipe customization feature is confusing.
3.
Limitations in navigating through the instructions screen when their hands aren’t available.
4.
Users are unsure if creating a recipe is completed and how to access it right away.
Round 2:
The high-fidelity prototype was used. The insights pointed out what aspects still need improvements.
1.
Users need more descriptions to explain some of the features.
2.
Users need a more easy way to manage ingredient units.
3.
Users asked for a sharing button.
Usability test round 1 - affinity diagram
Mock-ups
Create a new recipe
Creating a new recipe allows users to add specific details, ingredients with customization, and directions. Later, screens are divided to three steps to avoid overwhelming information, which makes it easier to navigate and manage.
Create a new recipe - Complete
After the completion, there will be an added confirmation page and a 'newly created' section in the home screen.
Customization
Users can choose to customize specific ingredients that have alternative options before they start cooking.
Home screen
Here, users can easily browse through categories of recipes. To make it quicker to find one, the filter search feature is offered to browse for recipes with specific criteria.
Recipe directions
The recipe directions offer a better accessibility experience by allowing users to autoplay the screen with various ways to proceed to the next screen. In the latest version, users can navigate through steps more easily with the number buttons. Also, they can have the instructions read for them for a better hands-free experience.
High-fidelity prototype
The high-fidelity prototype presents a user flow for creating a recipe, searching with filters, customizing ingredients, and browsing through recipe details and directions.
High-fidelity prototype link
Accessibility considerations
Features
Offer 'read aloud' and 'autoplay' features for users to access recipe directions despite limitations to their devices.
Imagery
Use images and icons to help make navigation easier.
Gestures
Allows various gestures for users to navigate through recipe directions.
Key mock-ups
Pain point
Users need a more easy way to access the recipe library, and quickly find the one they're looking for.
Solution
Offering ways to categorise recipes and access them easily through the home screen, with search and filtering features.
Pain point
There is a lack of management of allergens in recipe ingredients.
Solution
Offering features to record allergens and add alternative ingredients that allow customization for specific orders before starting cooking.
Pain point
There are limitations to reaching their recipe while they are cooking.
Solution
Offering user experiences that help follow recipe directions easier with interactions for better accessibilities concerning the limitations.
Design System
