Discovereats

An UX study on an app concept

— The task was to wireframe and design a mobile app for iOS, Android or Windows phone. Given my own experiences with food apps, I decided to create an app that offers recipes specifically tailored for dietary needs.

My role: UX, UI, Brand Identity 

Course: Bloc UX Design Apprenticeship

 
 
Discovereats_iPhone6s.png
 

The Brief

Discovereats is an iOS app that allows users to create a personalized nutrition chart and view recipes according to their needs. Rather than filtering out recipes altogether, the mobile app offers suggestions for modification or replacement of ingredients, allowing for greater customization and convenience.

 

Strategy

Research

To initiate the product discovery phase, I conducted user interviews to help define user needs and objectives. I also did a comparative analysis to gain a better understanding of the market context, learning more about other food apps (ie: Yummly, Fooducate, and Foodgawker) and their users via feedback found across the web. I shared my product proposal and initial research findings with my Bloc mentor, who I worked closely with throughout this assignment.

 

 
 
user-flows.png
 
 

 

Planning

To solidify the concept, I evaluated and prioritized feedback before identifying core user requirements. These requirements included the ability for a user to:

 Declare their dietary restrictions

 Search recipes that match their dietary needs

 View a recipe’s ingredients, nutrition facts, and directions

 Be alerted to trouble ingredients and be able to modify the ingredient

 Save recipes to a digital recipe box

 Add ingredients to a shopping list

From here, I developed personas and user flows to lay the foundations for the app's development.

 

wireframes.JPG

Information Architecture and Wireframes

Based on the user flows, I was able to create a map view of the user journey and methodically develop wireframes on top of each step. Before launching into development, user testing of flows helped me ensure the app was meeting requirements, and if not, provided insight needed for iteration.

When preparing to wireframe, it was also helpful to review Apple's Human Interface Guidelines for iOS7 to better understand common UX and UI patterns specific to this platform.

In general, in designing mobile apps, I try to consider the following design guidelines:

 Screen resolution: ensure content and touch-points are appropriately sized across all platforms

 Feedback and interactivity: help users understand what is happening at the time

 Content hierarchy: prioritize content and focus on the actions users will take to complete tasks

 Intuitive navigation: help users know where they are and how to move forward to complete their task


Brand Identity

Defining the brand identity

Before delving into visual design, I spent time crafting the brand identity. I began by brainstorming a product name. I created word clouds, exploring words related to food, recommendations, health, and find until I decided that “Discovereats” was a catchy, adequate representation of the product.

Next, I explored logo concepts in a similar fashion. I quickly created thumbnail sketches that related to “discovery” and “eat” before creating high-fidelity designs in Illustrator. 

 

 
 
color-palette.png
 
 

 

Following these explorations, I determined a color scheme and typography that, together with images throughout the app, would create a warm, friendly tone. During this time, I shared progress and gathered feedback from my mentor, which was essential before tackling visual design next.

 

Visual Design

In this phase, I was able to use all the UX and UI strategy to create high-fidelity screens. My goal was to thoroughly represent user flows by designing multiple screen views and possible actions for each scenario.

 
workspace.png

Prototype

Finally, I created an Invision prototype and conducted interviews to test user flows. Once again, feedback from user testing allowed me to iterate quickly and strategically improve upon the design.

 
 

Thanks for reading!