perfect_recipes_mobile_ui_ux_design_tubik-1

Perfect Eats | Mobile App Optimization

  role: director of ux  //  sprints: 10  //  results: happy foodies 


perfect-recipes-app-ui-design-tubik

01 | The problem

Our client approached us with their baseline mobile lifestyle application for recipes. They wanted to add in the value of quick shopping for ingredients. They needed help conducting user interviews to build out defined personas to create a more targeted user base and identify key features and a UI refresh in phase 2.

02 | My Process

Process

Our first focus was to utilize our data analyst to pull any metrics to find breakdowns in the customer journey. With some key findings, we could deduce ample opportunity for personalization via onboarding and filtering. We also identified the need for better filtering options to look for recipes that you could cook now or add the ingredients to a short shopping list. Customers were falling off after clicking on only one or two recipes. The app had a breadth of simple and complex recipes, yet a more engaging experience would help.

Designing for our users

constantin-panagopoulos-9lf_erPHYG0-unsplash

Laura, 32, Busy Mom

“I prefer recipes that are fun yet simple. Healthy and not boring yet I don't have alot of time to cook”

 

           Goals and needs:

  • Find unique but adjustable fixed menu items
  • Healthy meals to promote weight-loss and maintenance
  • Quick, simple recipes with fast cleanup
  • Easy way to identify what ingredients I have vs. what I need to purchase.

         Motivations:

  • Discovering other users' favorite dishes
  • Getting complimented on her dishes
  • Clever, simple recipes
  • Favors strong photography
  • Clear nutritional information to select healthy recipes

         Frustrations:

  • Instructions are not always exact
  • Complex kitchen appliances needed
  • Unrealistic food photography

foodie-take-your-next-pilgrimage-to-these-5-cities

Jonathan, 28, Foodie

“I consider the art of cooking self-expression. I love complicated recipes, posting and sharing with my circle of friends.”

 

           Goals and needs:

  • Smart filters and categories to exclude irrelevant dishes
  • Thought through, detailed recipes
  • Needs a smart time-saving grocery list

            Motivations:

  • Planning balanced meals for the week
  • Flavorful yet easy dishes to entertain with
  • Social Presence
  • Beautiful yet realistic videos and imagery

         Frustrations:

  • Difficulty finding recipes for his dietary restrictions
  • Hard to find ingredients requiring grocery shopping in multiple stores
  • iPad turning off while prepping with food covered fingers

 

elieen-03

Eileen, 54, Health-focused Vegetarian

“There's nothing I love more than creating an elaborate meal for my dinner club, but it can be hard to find savory yet healthy vegetarian dishes.”

 

           Goals and needs:

  • An easy way to filter through recipes
  • A range of simple to complex recipes
  • Clear directions without long editorial blurbs

           Motivations:

  • Impressing her friends and family with delicious and savory vegetarian dishes
  • Loves to learn new tips and tricks
  • To keep cooking fun and interesting

         Frustrations:

  • It can be a challenge to find healthy yet delicious vegetarian recipes
  • Used to print recipes out but would like easier access on her phone, recipes tend to get ruined by food while cooking

 

03 | Key Features

General Interface Design Updates:

As the recipe app is aimed at daily basic operations and quite a diverse target audience, the user interface has to be super easy and accessible for users with different levels of tech literacy and all types of mobile devices. The application layout is structured around intuitive navigation, high readability, light background, and eye-catching visuals. The light and airy background set the effective space for a variety of photos and graphics that may come with the recipes. Clear and solid typography based on san-serif fonts makes the information scannable and legible on screens of different sizes. Color contrast is used for amplifying quick navigation: bright color accents attract users’ attention to interactive zones and active states of the layout elements. The search field is easily found on the top of the screen: its functionality is clarified for users with both text prompt and search icon.

Uidesign

Personalization:

The personalization of applications and websites has been one of the hot trends in user experience design for a couple of recent years. It’s not enough to give users the product to solve their problem – it’s cool to give them the ability to tune the interface so that it corresponds to their specific needs. That encourages designers to consider more functionality to customize the features according to their personal preferences.

That’s what the Perfect Recipe app features, too. At the start of the interaction, users set the goals they want to achieve, such as losing or gaining weight, keeping a healthy diet and the like. Also, they may mark the ingredients they don’t like so that the app doesn’t show the recipes containing them. So, the feed of recipes and search results will provide a personalized list, not wasting users’ time with information that doesn’t suit their tastes. The emotional appeal of the app onboarding process is supported with custom digital illustrations.

perfect-recipe-app-tubik-ui-design

Filtering:

One more way to personalize the recipe selection is the system of filters. The filter panel allows a user to sort out the list of recipes. The user can apply pre-sets: for example the preset “cook” shows only the recipes based on the ingredients currently available for the user. Also, the filters can be manually customized. Users can tune the following points along with their preferences:

  • calorific value
  • type of cuisine
  • cooking time
  • type of meal

The panel is placed in the bottom part of the screen to add more convenience to the operations with the app by one hand..

Recipe Cards and Engaging Photos:

Photography is a good way to impress users with realistic and clear visuals as well as set the needed associations. With rapidly developing photo stock websites, designers have more and more opportunities to find good images; still, for many projects, especially e-commerce ones, the creative teams shoot the original content totally corresponding to the goals of the product. It is especially noticeable in the spheres close to everyday life: fashion, toys, food, drinks, etc. That was the direction for the Perfect Recipe app as well.

The card and the screen of a specific recipe for the mobile user interface look mouthwatering. Big recipe cards enable photo content to attract maximum attention while appetizing videos set the needed associations and themes on a full recipe screen. Here are a few iterations that we tested.

Cook Now Feature:

Another user-friendly solution is the feature “Cook Now”: it selects only the recipes that have the full set of ingredients and do not demand additional shopping from a user.

The fridge indicator on every card shows how many ingredients are available for the recipe at the moment.

Shopping List:

Right from the recipe, users can add missing ingredients to their shopping list. Its screen shows the list of recipes with missing ingredients. Also, it’s easy to check the list of needed items for each particular recipe and remove the points which the user doesn’t plan to buy.

Pantry Feature:

We also developed the idea to sync up the app with Instacart. The Pantry feature of the app loads the e-commerce functionality showing the available offers according to the user’s shopping list. This way, shopping becomes a piece of cake and added in an additional revenue stream aside from media buys,

The app shows all the information about the required items by different producers and trademarks. The list of added positions is easily checked with a horizontal scroll. When users choose a product from the list, they see the full description, nutritional value, pricing, and other details.

perfect-recipes-app-ui-design-1 (1)

 

Outcomes:

With refined personas for targeted engagement and acquisition, our client launched a strategic marketing plan. This included a tiered affiliate program with food bloggers and more tailored push notifications. Within the first month, app downloads surged, daily active user engagement increased by over 6%, and there was a noticeable uptick in positive ratings and reviews. Additionally, we observed a 4.3% increase in click-throughs to Instacart, highlighting the plan’s success in driving both engagement and conversions.

Top