Project Overview
Problem
Many studies were done to identify reasons why more and more people can't cook despite the benefits it has. They found that people would love to cook, but they feel that they don't have the time to learn it. Throughout the last years, many cooking channels like "Tasty" and "Binging with Babish" exploded in popularity and even more people are trying to pick up cooking as a result.
The problem is that this type of content is condensed into short videos. They are missing a lot of information and explanations as a result. Another problem is the sheer number of available cooking resources. It can take hours to find recipes that fit your tastes and match your skill level. Personal blogs are a big part of that problem where the author focuses on storytelling rather than cooking instructions.
What people say about learning how to cook
|
|
App Hypothesis
The cooking niche is very saturated, so the biggest challenge this new app has is the differentiation. Rather than building an enormous resource with thousands of recipes, the goal is to create a focused resource for people who are learning how to cook. They'll be able to look for recipes that match their skill level and book certified experts for personal lessons.
My RoleUX Designer, UX Researcher
This was a solo project as part of my UX learning Journey |
Timeline90 Days
|
ToolsFigma, PowerPoint, Word, Pen&Paper,
Balsamiq, Photoshop, Video Recording |
The UX Project Plan
Research
Competitive Analysis
The competitive analysis was divided into two major parts. A company and product overview and an in-depth UX analysis. At the time of the analysis, only two direct competitors existed, so I also looked at successful indirect competitors.
Company & Product Findings
The two cooking competitors featured different monetization models and featured growth over features. They are present on all major platforms but don't supply content for any of those. Out of hundreds of signed-up experts, there's also a lack of bookings and ratings. It seems that people used the app to generate income and not to learn how to cook.
From a UX perspective, that means that getting the user to visit the app often would be a top priority. This can be achieved by having excellent content and carefully selected experts.
From a UX perspective, that means that getting the user to visit the app often would be a top priority. This can be achieved by having excellent content and carefully selected experts.
|
Chefter
|
TalkToChef
|
Clarity
|
The most successful company here is Clarity. They have the largest userbase and profits. The App focuses on helping with specific business problems by connecting the user with a suitable expert.
As a result, "Expert Cooking" will focus on curated content and experts to help people learn how to cook and teach them rather than allowing everyone to sign-up.
As a result, "Expert Cooking" will focus on curated content and experts to help people learn how to cook and teach them rather than allowing everyone to sign-up.
UX Findings
All three apps were researched from a UX point of view. Surprisingly, most apps were weak in guiding the user towards using the premium feature. This includes "TalkToChef" where the whole app was based on choosing an expert and calling them. Even "Clarity" was confusing to use, especially when it came to choosing an expert. There are major improvements possible on all apps.
"Expert Cooking" will focus on user engagement and usability. Booking an expert will be displayed as a feature, not a requirement.
"Expert Cooking" will focus on user engagement and usability. Booking an expert will be displayed as a feature, not a requirement.
User Research
9 people with different backgrounds were interviewed for the "Expert Cooking" app. Quotes were gathered on a whiteboard before being grouped into 4 different categories.
After the quotes were gathered 4 different topic categories emerged naturally to assist with the UX and feature creation. The groups are named "Reasons" "Motivations" "Requests" and "Doubts"
The groups can be seen below. Clicking the image will pause it.
The groups can be seen below. Clicking the image will pause it.
With that in mind, these are the key findings:
- Not having enough time for cooking.
- Wanting to learn cooking to live a healthier life.
- Being frustrated with stories and fluff when searching for recipes.
- Not knowing most of the cooking lingo.
These findings confirmed the previous hypothesis. To be successful, the app needs to be focused, simple and easy to use.
Business Requirements
As the next step in the UX process, a business requirements document was created to supply stakeholders with enough information to make an informed statement.
The created document is featured below. You can scroll through it with your mouse-wheel or by dragging the bar on the right.
The created document is featured below. You can scroll through it with your mouse-wheel or by dragging the bar on the right.
The document contains an executive summary, business objectives, scope, functional requirements and a delivery schedule for the expert cooking app.
User Personas
At this stage of the process, a ton of information had been gathered in regards of user requirements and pain points. User personas were created to summarize that information and make it easier to present it.
There will be two main groups for the app. Users and experts. During the interview process, I made sure to include both aspects in the questions. As a result, three personas made the most sense to create. One expert, one user looking for teaching and one user looking for recipes.
There will be two main groups for the app. Users and experts. During the interview process, I made sure to include both aspects in the questions. As a result, three personas made the most sense to create. One expert, one user looking for teaching and one user looking for recipes.
|
|
|
User Persona cards highlight the main information that's contained in the full persona research.
User personas on their own can be valuable, but they really shine if combined with a user journey to also outline their emotions when completing specific app functions.
User Journey Mapping
Two user journeys were created to highlight the emotional state of both the expert and a user completing future tasks. The examples below highlight the journey of attending a pre-booked expert call.
A user who booked a private coaching call after work.
An expert who takes his first private coaching call with a client.
The user journey map outlines one core function of the app. It's used as a guide to identify potential pain points during their tasks. Now that the core information has been gathered through research, the app has to be mapped out with the mobile-first principle.
Mobile First Design
Even though "Expert Cooking" will be a mobile app, a website has to be designed as well to increase marketing and reach potential. This was supported through the interviews as most interviewees used their desktop PC's to browse for recipes.
The different screens and functions can be seen below.
The different screens and functions can be seen below.
The website is used as a marketing tool and doesn't provide the main app functions. Its main purpose is getting people to download the app and find the most relevant information.
With that the research part is completed and the design phase starts.
With that the research part is completed and the design phase starts.
Design
Information Architecture
Before a prototype could be created, the first goal was to map out the app screens and functions. The screen below shows the different paths a user can take when they start the app and the main functions they will encounter.
These were chosen based upon interview feedback and market research.
These were chosen based upon interview feedback and market research.
It's important to note that this was the first draft of the information architecture of the expert cooking app. Some of the descriptions and names caused confusion for prototype testers and were changed later on.
The first goal was to find out if the proposed structure would make sense for users and if they would structure the app in the same way, so a card sorting exercise was held.
The first goal was to find out if the proposed structure would make sense for users and if they would structure the app in the same way, so a card sorting exercise was held.
Card Sorting
|
Results AnalyzationMost of the touchpoints were conclusive considering the small number of people who participated in the survey. The biggest changes were in the settings and expert categories.
Upon further inspection, I don’t believe that the differences are coming from illogical information architecture, but from choosing names that can be interpreted in different manners. The tab “General” for example could be used in anything, same with “Rate & Comment” I believe that these terms carry more clarity if they are supported by visuals instead of words alone. As a result, I don’t think that updating the informational architecture is the correct thing to do in this case. |
Low-Fidelity Prototyping
The most important app features are booking and starting an expert call, as well as accessing and saving recipes. As a result, the low-fidelity prototype would focus on these features.
The hand-drawn prototypes are featured below.
The hand-drawn prototypes are featured below.
The main purpose of these low-fidelity frames was to check if the menu navigation would make sense and how the product could look like. They don't represent the main product and many changes were implemented later on.
After the main paths were created, the screens were translated into mid-fidelity frames.
After the main paths were created, the screens were translated into mid-fidelity frames.
Mid-Fidelity & High-Fidelity Wireframes
The mid-fidelity frames were created to translate the hand-drawings into scalable prototypes. Some changes had to be made to account for the spacing and prevent cluttering. As soon as they were finished, they were translated into high-fidelity wireframes as seen below.
|
|
|
The transition from mid- to high-fidelity wireframes included the proper UI alignment for the project. As a result, many elements had to be made scrollable. A total of 12 screens were created to produce a working prototype for the evaluation.
Evaluation
Usability Test Planning
Before the evaluation phase started, a usability plan script was written to hand out to future interviewees. The test plan was used as a documentation document and as an introduction later on. The document can be seen below.
An important part of that document was setting proper goals for the tester to achieve. Since the tests were not paid I wanted to avoid a lengthy test, but I also wanted to be able to gather enough data for evaluation. In the end, 4 test objectives were chosen. They were similar to the functions discussed earlier in the study with the addition of completing the onboarding process. It'd be the first thing a user sees and lets you draw conclusions about their engagement.
Usability Tests
To get a variety of opinions from different environments, a total of three viable research methods were chosen for the user interviews. They can be seen in the slideshow below.
Due to time and budget limitations I chose to favor moderated remote tests over the other two. This allowed for a moderate number of interviewees while also being able to ask questions and observe their body language during the testing process.
Interviews were scheduled and recorded on Skype.
Interviews were scheduled and recorded on Skype.
Test Result Evaluation
A total of 6 interviews were scheduled with users who were keen on learning how to cook right now. The sessions were recorded to identify roadblocks and to be able to re-watch them later on. I found that:
- Users enjoyed the quick onboarding.
- It was easy to complete the four tasks that they were asked to perform.
- Users wanted a colorful prototype with real texts and pictures.
The gathered feedback was evaluated with a rainbow spreadsheet to outline design and change priorities.
All observations were then rated with the Jakob Nielsen’s scale to determine and rank changes that would have to be made for the product.
The biggest take-away was that the interviewees wanted a colorful prototype. The high-fidelity one looked too out of place to be considered a real product even if all the functions were included.
Future Steps
The next steps for this project will include the feedback that was gathered with an updated prototype. The prototype will feature colors and real texts over placeholders to make it more realistic.
After completion, the agile method comes into play where the steps are repeated until a satisfactory result is achieved.
After completion, the agile method comes into play where the steps are repeated until a satisfactory result is achieved.