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 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.
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.
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.
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
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.
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.
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.
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.