Seasoned

Responsive Recipe Web App

Role

Tools

Figma
InDesign
Illustrator
Photoshop

UX Design
UI Design
Branding

Type

Time

UX Case Study

6 Weeks

Find plant based meals, learn about ingredients & seasonal produce, and save recipes to personalised folders.

Brief

The objective for this project was to design a responsive recipe web app that would meet the needs of users and solve the problems they are facing with existing recipe apps.

UX research was needed to find these user needs and discover which problems needed to be solved with current offerings, followed by UI Design to turn this research into a prototype.

Problem

Home chefs are overwhelmed by information on recipe sites when using online resources to find meal inspiration. Web designs are often cluttered - making it difficult to find and save recipes. Conscious consumers, including those eating a plant-based diet, would like to have easily accessible ingredient substitute suggestions and seasonal recipes.

Solution

A personalisable recipe site that improves your cooking experience and ingredient knowledge.

Seasoned will host vegetarian and plant based meals, and offer substitute suggestions for ingredients. With a clean and simple design, and easy-to-use search and save features, it will be accessible to home chefs of all experience.

Process

Competitor Analysis, User Interviews, User Personas

01 Empathise

Competitor Analysis

Competitors were analysed to get a feel for what is currently on offer in the market and find weaknesses in other offerings where a gap could be filled. This was done by assessing each of the points listed below, for each company

key objective
overall strategy
marketing profile and advantage
SWOT analysis
UX analysis

Takeaways

Current offerings are often overwhelming in design and information, there are few extensive plant-based sites, consistent imagery and recipe displays are relatively rare

Pinterest

Clean, intuitive layout, easily save recipes and make virtual recipe books, but doesn’t host recipes on the site which means less efficient pathway and inconsistent recipe displays

Foodgawker

Clean and sleek design, large resource of recipes and cooking tips, well categorised, but recipes are hosted on external sites and recipes only favourite-able - no personalisable folder options

Epicurious

Home screen search prompt clean and clear, nice consistent imagery, ‘compare’ feature a plus, but navigation confusing, and a lot of pop ups

AllRecipes.com

Social advantage - personalised profile and ability to follow and share with other profiles, but search and categorisation system could be improved, and there is a lot of advertising on the site

User Interviews

An initial set of interview question was created for potential users, helped shaped by pain-points, strengths and requirements found in the competitors that were analised. In my research I found a lack of good vegetarian and plant-based recipe sites so decided to focus on this niche. Interviewees were home chefs of all levels who were primarily interested in meat-free meals.

Questions included:

How do you decide what to cook?
Do you use online recipes? If yes: how often, and which apps/websites?
What things do you like and dislike about online recipe sites?
What features would you like to see online recipe resource include?
What do you enjoy most about making food at home?

Takeaways

Users want a recipe platform that provides inspiration for what to cook, ingredient substitute suggestions, allows them to save and organise recipes, and is geared towards vegetarian and seasonal ingredients.

Main Requirements of Users

Add own recipes to folders

Organisation of recipes by theme

Change number of servings

Timer function so stop screen going to sleep

Show substitute suggestions for ingredients

Limited information above recipe

Save and organise recipes into folders

Measurements conversion option

Guidance towards seasonal produce

User Personas

From the research gathered, three user personas were created to give a summary of user needs and personalities, and an overall sense of the type of people that might be using the product.

Personality traits, goals/needs, motivations, frustrations and discovery methods were included. Here is a summary of the three user personas created

The Experimental Chef

Experimental • Artistic • Adventurous

To cook a range of recipes with diversity in flavours
Ability to find recipes based on what’s in the fridge or what produce is available at the local market
Ability to increase ingredients quantity based on how many people are being cooked for
Making healthy vegetarian meals
Cooking with partner
Cutting down food waste
Learning about different cuisines, cooking techniques and food pairings
Chaotic recipe websites that aren’t organised/categorised well
When no recommendations for ingredient substitutes are offered
Badly laid out and designed sites and recipes

The Social Chef

Social • Spontaneous • Price-Sensitive

Reliable cost-efficient vegetarian recipes
Sites that can be used on the go, and on all screens
Need to be spontaneous with recipes if suddenly end up cooking for multiple people with only ingredients already at home, or substitute out ingredients that others can’t eat
Cooking reliable meals for friends
Making affordable meals
Having previously-enjoyed recipes easy to find
Sharing recipes and meals with friends
Using multiple different sites: would like to have favourite recipes on one platform
Recipes that don’t have conversion tools
Screen timing out in the middle of recipes

The Healthy Chef

Independent • Health-Conscious • Consistent

Healthy, reliable recipes
Wants fast and easy to find recipes
Wants simplified recipe sites that get to the point, without the pre-recipe jargon
Eating healthily
Having meals and shopping planned and prepared ahead
Becoming familiar with and remembering favourite recipes
Copious amounts of text before recipes
Having to find measurement conversions
Finding it hard to find recipes again, having them spread across different sites and platforms

02 Define

Minimum Viable Product, User Flow Diagram

Establishing App Features

Based on the needs, motivations and frustrations of the user personas, a list of ‘jobs to be done’ was generated, followed by appropriate features to help these jobs be performed.

Jobs to be done structure:

When _____ I want to be able to _____ so that I can _____ .

Job to be done

>

Required Features

>

Rationale

When using an international recipe, I want to be able to convert measurements, so that I can cook with my own kitchen tools and not have to google search every time.

• Set location function

• Convert measurements function

The users experience is improved by being able to easily convert ingredients to their system of measurement, rather than having to leave the site to do so

When looking for recipe ideas, I want to be able to search by ingredients, so that I can make something based on what ingredients I already have.

• Search bar

• Filter by ingredients function

This reduces steps in the users cooking as well as food waste by allowing them to find recipes based on food they have already.

When finding recipes I enjoy, I want to be able to save and categorise them so I can have all my favourite recipes, easy to find, in one place.

• Create profile function

• Save button function

• Favourite button function

• Create folder function

Users are able to save their favourite recipes for easy access and categorise them in a way of their choosing

When searching for recipes, I want to be able to see images of the end product, so I can get a sense of what it will look like.

• Recipes supported by photos

• Design prioritising imagery

Images engage users and will make the choosing process quicker by allowing them to get a realistic idea of the end result of recipes

When finding a recipe, I want to be able to have ingredient substitute suggestions, so that I can have the flexibility to elminate things I don’t like or can’t find.

• Ingredient substitute suggestion feature

• Ingredient glossary

Catering to allergies, flavour preferences and difficulty in finding certain ingredients, this also educates users on food groups

User Flows

With a set of JTBDs and consequence feature requirements established, a corresponding user flow was drawn up for each, drafting initial ideas about how users might perform actions, and have those needs met. Combining these user flows into one diagram set out the initial structure of the web app and how it might be used.

Job to be done

When using an international recipe, I want to be able to convert measurements, so that I can cook with my own kitchen tools and not have to google search every time.

Feature Requirements

• Set location function
• Convert measurements function

Corresponding User Flow

Combined User Flow Diagram

03. Prototype

Paper Prototype, Digital Wireframes, Mid-Fidelity Wireframes

Rapid Prototyping

Paper wireframes were then created using the Crazy 8s method - where 8 frames were rapidly drafted up for each user flow. A couple of iterations were made to each of these starting-point sketches, before they were ready for testing.

04. Testing

User Testing, Design Iterations

Testing & User Feedback

The paper sketches were uploaded to InVision to be digitalised and and tested on users for feedback, before the designs were taken to the next step of the design process.

Log in / create account:

Option to log in through social  accounts should be added
Should be able to view site without creating account first
Profile picture doesn’t need to dominate the screen in account view

Searching for recipes:

Would want ‘sort by’ option  in results
Filters need to be more clear
Some prefer list view results,  some prefer tile: allow option

Other Feedback:

Want option to save recipe  without having to open it
Perhaps main page could be  divided into discover / saved
Reduce amount of clicking

Mid-Fidelity Wireframes

Feedback from user testing was used to make iterations on the design and develop Mid-Fi Wireframes, bringing the design into Figma.

05. Design

Mood boards, style guide, responsive design, mockups

Mood Board

A mood board helped draw inspiration for the look and feel of the visual elements - it included finding inspiration in:

imagery
texture
feel
colour palette
typeface
iconography
web, app, UI design

Style Guide

With the mood board guiding direction for the look and feel of the app, a style guide was designed - drawing inspiration from seasonal colours, fresh produce, and minimalistic recipe books.

06. Refine

Feedback updates, design iterations, final design, mockups

Implementation & Responsive Design

Once the style guide was applied to the screens, responsive design and breakpoints were created, accommodating to different screen sizes and then tested again on potential users.

Feedback in this round of testing was generally positive with a few suggestions on icon clarity and a removal of unnecessary information, including an extra menu.

Final Screens & Mockups

User feedback was implemented and the overall design across the different screen sizes was refined. With the final screen designs ready a series of mockups was the put together to show how the design might look in a real-life context.