Savor (Recipe & Delivery)

UI/UX Accessible App

As a mobile cookbook app with various cuisine and dietary recipes of all cooking levels, users can purchase ingredients through the app and search for recipes based on ingredients they already have. On top of providing cooking tips and tutorials, Savor also offers grocery delivery services, and the app is designed to be accessible to individuals with 20/70 vision, color blindness, and dyslexia.

Feature: CSUF - Department of Visual Arts website

What does it mean to have 20/70 vision?

According to the American Foundation for the Blind, "[a] visual acuity measurement of 20/70 means that a person with 20/70 (impaired) vision who is 20 feet from an eye chart sees what a person with unimpaired (20/20) vision can see from 70 feet away."

savor_intro_2.jpg

What is dyslexia?

Individuals with dyslexia have a language learning disability that interferes with their ability to correlate the letters seen with spoken sounds; as a result, this causes reading to be difficult and slowed. Additionally, struggles with memory and mentally organizing information is often common with dyslexics.

User Personas

Personas were created to ensure user needs are met by the design of the app. 

savor_persona_1.jpg
savor_persona_2.jpg

Competitive Audit

A few mobile cookbook apps are studied in both analyses. The UI analysis consists of branding aspects while the UX analysis includes key features in each app.

savor_ui.jpg

Color Palette

Each color’s y-tristimulus value is measured based on its distance from white (100) using the Classic Color Meter app downloaded from the App Store on Macintosh computers.

savor_palette.jpg

Accessible Color Combinations

Combinations with a y-tristimulus differential of 40 or more and a minimum luminance contrast ratio of 4.5 between the background and foreground color indicates that there is enough contrast. Luminance ratios are calculated using the Planetcalc website to distinguish how easily a human is able to recognize text or images in the foreground on a colored background.

savor_accessible.jpg

Color Blindness Views

Using the Color Blindness Simulator on the Color Blindness website, this shows the viewing perspectives according to each color blindness type.

savor_blindness.jpg

Green-Weak/Deuteranomaly

Each color’s y-tristimulus values are measured again, and luminance ratios are recalculated for each combination to confirm their accessibility with each color blindness type.

savor_green_weak.jpg

Typography

Sans-serif fonts and medium or semi bold weights (for body copy) provide better legibility and readability. Using italic and all capital letterforms are avoided as it interferes with the speed of reading for the visually impaired and dyslexics.

savor_type.jpg

Museo Sans Rounded Viewing Distances

Based on color, type weight, and type size, viewing distances are calculated using a formula provided by the Innovation Center for Design Excellence’s White Paper. Only the darker color (lower y-tristimulus number) in color combinations need to be calculated. The following calculations are for the darkest hue (#193326).

savor_viewing.jpg

Iconography

Outlined icons must have a minimum 2 point stroke. In order to ensure the readability of the icons, their viewing distances are calculated using the same type viewing distance formula.

savor_icons.jpg

Branding Identity

Savor intends to provide convenience with delicious recipes to even those who are not familiar with cooking. We want our chefs (users) to experience the greatest joys with every recipe that they try from our diversely vast collection. The simplified chef's hat allows it to function as a responsive logo icon.

savor_logo.jpg

Images

Objects are masked and placed on a colored background to maintain a simple and clean look. Color corrections are made to ensure that there is enough contrast between the object and background.

savor_images.jpg

User Journeys

A few user journeys are created to ensure that users can:

  • Browse for recipes based on ingredients they already have

  • Purchase ingredients and track their orders

  • Contact shoppers and Savor support

  • Add personal recipe notes

  • Rate and review recipes 

  • Save recipes and organize them by collections

  • Customize diet preferences

savor_journey3.jpg
savor_journey.jpg

High-Fidelity Prototype

Savor products created for employees and customers.

savor_products.jpg
Previous
Previous

Tote (Grocery Delivery)
UI/UX Accessible App

Next
Next

Cheer (Social Media)
UI/UX App