OVERVIEW
A Food-allergy Meal Delivery Service App
Trust is an imagined brand. It's an app similar to Uber Eats or Postmates but for people with food allergies. On typical apps like these, you can request that the restaurant to "hold the cheese, please" but, these types of notes frequently get missed. That's why I invented Trust, the #1 trusted food-allergy meal delivery service.

OBJECTIVE/GOALS
Create a UI Design System
The purpose of this project is to create a UI Design System for the Trust app. Including layout, color, typography, and branding. Below, you will see my process of creating a mood board and style guide to create a relaxed, friendly, and inclusive brand.
Duration
3-4 weeks, December 2020

My Role
UI Design, App Design

Deliverable
UI Design System for an App
Below are mockups of the final design. (Left) is the main screen and, (right) is a secondary screen.
A mockup of the final design. (Left) is the main screen and, (right) is a secondary screen.
Challenges
Create a UI Design System
To get started on this project, I first had to download and explore popular food delivery apps and some less popular ones offering similar services. Right away, I knew designing the layout of the actual app was going to be the most challenging task. Luckily, there were some pretty well-established standards ready-to-follow. I only needed to indicate what food allergies each restaurant catered to at a glance. 

Review of main obstacles:
1. Design a user-friendly layout 

Next Steps
Research the most popular food-allergies and ways to convey information about them. Additionally, research similar apps for layout and design inspiration. 
Below is a mood board designed to convey a brand feeling. For the Trust app, I envisioned a relaxed, friendly, and inclusive brand.
Research/Insights
Create a UI Design System
Consumers who have food allergies or choose to eliminate specific food(s) from their diet typically use symbols or icons at the grocery store to identify which food they can eat rather than reading the entire ingredients list. These icons show a graphic of the food or an abbreviation of the food allergy so users can quickly identify if the product contains ingredients safe for their specific diet.
Relatively in design, icons and symbols are also used to convey meaning or messages quickly. Thus, using icons to show which restaurants cater to specific food allergies can be a solution to quickly convey information to users in the app.

Solutions
 Food-allergy Icons
To distinguish Trust from other food delivery services, I decided the design needed to focus on the user by making safe food choices obvious. That's why I placed the food-allergy icons at the top of each listing's content in the home screen and sub-screen navigation screens.  
Design Decisions
When designing the app, I considered using color phycology to make the user feel safe. For instance, blue represents safety so, I included it in the mood board and color palette. Additionally, the tints used in the color palette are also muted and soft. I intentionally used muted and soft colors because they are calming and peaceful. By doing this, I knew the user would feel more confident and at ease when using the app. 

Solutions include:
1. Making safe food choices obvious
2. Using soft muted colors
3. And, using color phycology
Below are graphics used in the Trust app design.
The results
An Enjoyable UI Design System 
The final design for the app achieves the goals set for the project. I achieved this by creating a UI Design System based on research and insights of the user's needs.
Celebrations 
The best part about the app is the mood and tone established by the design. I feel the icons, graphic, typography and colors help create an environment where the user can feel safe. 

Reflection 
The only thing I would change about this project is to spend more time sketching the design before creating a realistic mockup. 

You may also like

Back to Top