Foodie Responsive Web App: UX & UI Design

Foodie Responsive Web App. UX and UI design work by Ellen Tisdale.

Project Overview

Although plenty of recipe apps currently exist, there is room to create a better product. This project aims to improve on the current options in this space.

To get a better idea of the issues found in current recipe apps, I conducted a competitive analysis and user interviews.

Competitive Analysis: Highlights

My New Roots

Strengths

• Limited number of menu options > reduces the number of choices a user needs to make

• Recipe pages are infused with personality, and portray a cozy atmosphere > builds trust with the user

Weaknesses & Opportunities

• Search results do not offer filters to allow users to narrow down what they’re looking for

• Recipes index page only organizes recipes according to breakfast / lunch / main dish / salad, and Spring / Summer / Fall / Winter, as well as a Raw Food category. However, the app offers a range of recipes (e.g. baked goods, preserves, etc) – providing more tags or subcategories would be helpful

My New Roots menu and recipe page

Kitchen Stories

Strengths

• Prototypical recipe instruction sections are easy to navigate > builds trust by meeting users’ expectations for this type of content

Weaknesses & Opportunities

• Some of their categorization of recipes is a bit strange – for instance, “asparagus recipes” and “raclette” are listed under recipes “by occasion”, along with more expected options like Party Recipes, Christmas Recipes, etc.

• Search results would benefit from filters, as was seen with My New Roots
• More specialized recipe websites may be threats, in particular any website offering a gluten-free category of recipes, as this is not an option on Kitchen Stories

User Interviews

Four current users of recipe apps were recruited for interviews to discuss their likes, dislikes, and needs.

Questions:

1. How often do you look up recipes on your phone?

2. Can you describe the process from start to finish: when you want to find a recipe to make, you choose a recipe, and how you use your phone while making the recipe?

3. How much time on average do you spend trying to find a recipe to make? What are some factors that slow you down?

4. When you’re following a recipe using your phone, what are some factors that make this experience easier and more enjoyable?

5. What might make the experience of making a recipe using your phone more difficult, frustrating, or less enjoyable?

Patterns:
• Two participants mentioned that good photography of the recipe is important

Frustrations:
• Needing to scroll between ingredients and instructions
• Needing to scroll past unnecessary information before getting to the recipe
• Trouble finding recipes saved previously because they can’t remember the exact name and there is no search option on the platform where the recipe is saved

Needs:
Finding recipes that fit dietary requirements (e.g. vegan), have a small number of ingredients, and don’t have unusual ingredients.

“Having a visual helps so much, I often find the recipes I’m looking for by looking at the pictures.”

“I like that with the app I am using, I can add the ingredients needed for the recipe to an in-app shopping list.”

User Personas

Personas are based on data from user interviews. As all participants were young women in their 20s and 30s, this demographic was represented with two personas; however, the app would aim to reach a broader audience, so including a male persona was important.

Other factors integrated from user interviews include:
• the importance of images – at least one persona would be a visual learner
• diet restrictions – many interviewees mentioned the need to find recipes tailored to a limited diet
• frustration around spending a lot of time searching for recipes – lack of time would be a factor for at least one persona

User Persona Zoey: 26 year old university student, low cooking experience, adventurous, vegan, eco-conscious, tech-savvy.
User Persona Francis: 32 year old graphic designer, high level of cooking experience, wants to impress dates with creative home-cooked meals.
User Persona Naomi: 37 year old administrative assistant, moderate level of cooking experience, married mother of two, busy, wants simple and quick meal options.

MVP and Jobs To Be Done

Minimum Viable Product Objective: To design a responsive web app for recipes that allows users to find recipes with specific requirements, follow the instructions more easily than with other recipe apps, and save recipes to find later.

Jobs To Be Done

  1. When I’m looking for a recipe to make, I want to have options to narrow down my search results, so that I can find options that fit my requirements.

Features:
• Support search of recipe index
• Display recipe search results
• Offer categories and filters in search

This job is essential to solve a problem mentioned by many interview participants: the need to find recipes that meet specific requirements (recipes that include ingredients they have on hand, that meet their dietary needs, etc).

2. When I’m following recipe instructions, I want to see the ingredient amounts with the instructions, so that I don’t have to scroll back and forth.

Features:
• Display recipe instructions with ingredients included

This job facilitates the cooking process. One interview participant mentioned solving the problem of scrolling between amounts and instructions by viewing the recipe in PDF print mode; this job will make that extra step unnecessary.

3. When I find a recipe to make, I want to be able to save it, so that I can make it later, or multiple times.

Features:
• Support saving recipes
• Support keyword search of saved recipes
• Users can create accounts

This job allows users to plan meals and organize their recipes. One user mentioned struggling to find a recipe again, even after having saved it, because the app she used lacked a search function.

4. When I find a recipe to make, I want to be able to quickly add the ingredients to a shopping list, so that I don’t have to make a new list in another app.

Features:
• Support shopping list feature

The in-app shopping list is a feature that was valued by one interview participant, and would be simple to integrate.

For second app iteration:
When I find a recipe to make, I want to have options to share it quickly in lots of different ways, so that the people I’m cooking for can see what I’ll be making.

Features:
• Support share via link, text, and social media

This job would support promotion of the app via social shares.

User Flow Diagram

This user flow diagram maps the process for searching for recipes and filtering search results; for viewing recipe instructions; and for saving a recipe for later, which requires the user to sign in or create a new account.

user flow diagram, mapping user movement between home page, recipe pages, and account creation process.

Interactive Prototype

Wireframe sketches were converted into an interactive prototype. The interactive prototype was used during the usability testing that followed.

Usability Testing

Three potential users participated in usability testing. Testing was conducted remotely.

Tasks: 1. Use the search feature to find a vegan recipe for the winter season. 
As the prototype does not currently allow user to type keywords, choose one of the "autosuggest" options from the search.​

2. You find a recipe you want to save for later. Is there a function within the app that supports this?​

3. Create an account with the app.​

4. Add ingredients to the Shopping List feature within the app. Can you find the Shopping List afterwards? Can you remove the first item on the list?

Results and Solutions

On the whole, testers were able to complete tasks successfully. No testers made use of the filter function in the search, although in this limited prototype, the only recipe page that was created had the tags required for that task; so, this task was a bit too easy to complete.

Issues to resolve:
• Missing “create account” option from Sign In link on homepage
• Missing Shopping List icon from signed in version of homepage
• Many testers wanted to use Account icon to find shopping list and favorites
• Some text was difficult to read

Developing an Aesthetic Direction

Two mood boards were developed, comparing and contrasting the potential aesthetic directions for the app. I believe that the selected mood board would appeal to a wider audience.

This board highlights the importance of organization in this app, the presentation of information with ease of use in mind, and the ability to discover new recipes that fit specific parameters.
The warm color palette highlights the creative aspect of this board, balanced by whites and light greys to maintain clarity.

Alternate Mood Board
Alternate Mood Board
Selected Mood Board
Selected Mood Board

Preference Testing

As usability testers did not use the filter function, I was curious as to whether the wording used on that button would have an impact. One user mentioned that they weren’t sure what they would see if they tapped the “Filter Search Results” button, so I tested the wording used on that button with nine potential users.

Six out of nine testers preferred the “Filter Search Results” button text, stating that the text looks familiar, and several testers mentioned that this option looks more clean and simple.

Final Mockups
Image displays the search page for laptop, tablet, and smartphone screens
Image displays a recipe page for laptop, tablet, and smartphone screens
mockup of recipe app page

Reflections

User interviews played a crucial role in this project. Although I was aware of some issues with recipe apps already, seeing them through the eyes of these research participants brought many more problems and needs to the forefront. Ideally, I would aim to interview a broader range of potential users in future work with this app.

I also learned about some technical considerations for conducting usability tests remotely. Having users share their computer screens proved to be more useful than accessing the prototype on their phones, which I could not see on the video call. Having full view of their screens allowed me to see where they were struggling to accomplish a task. Although they would not have the same experience using the prototype on a computer as they would on a mobile phone, conducting the tests in this way provided me with more useful feedback.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s