Skip to content

Project

A Recipe App for Visually Impaired Users

2016

Project Goals

  1. Create a responsive (mobile and tablet) recipe app for 2 targeted audiences: visually impaired users and sighted users.
  2. Experience the design process of discover, define, plan, and develop.

1. Discover

Q1. What is a good cooking experience?

  1. Clear instruction helps a lot.
  2. Video instruction is even better.
  3. The timer has been set million times.
  4. Hands are usually dirty and greasy.

Q2. How do visually impaired people cook food alone?

We found this video from The Tommy Edison Experience ⇗:

Q3. How to be inclusive for a cooking app?

  1. Design the same app for all population.
  2. Voice-over and other screen readers are good but not as useful when people are cooking.
  3. Handsfree conversation is a perfect solution for cooking. (like the experience when using Siri, Google Now, or Alexa, like the following video from Joy Ross ⇗)

2. Define

User Stories

  • As a sighted user, I want to be able to view my recipe on a phone or tablet so that I can access my Strawberry Shortcake recipe.
  • As a visually impaired user, I want to be able to hear voices/sounds on a phone or table so that I can access my Strawberry Shortcake recipe.

Goals

  • Provide basic information: ingredients and cooking direction of strawberry shortcake.
  • Be inclusive: the same application that can be used by both sighted and visually impaired users, have a voice assistant as well as a visual user interface.
  • Improve cooking experience: understand the context of a recipe direction and give the user access to a handy timer.

3. Plan

3.1 Technic Plan

  1. Designed for Android phone and tablet
    • 360 x 640 pts for mobile (1200 x 1920 px, 800 x 1280 dp)
    • 1024 x 768 pts for tablet (2048 x 1536 px, 1024 x 768 dp)
    • Followed the Material Design guidelines.
  2. Android Color Palette

Android Color Palette


3.2 Information Architecture Map

Information Architecture Map


3.3 User Flow

User Flow


3.4 Design & Annotated User Flow

4. Develop

4.1 Interactive Prototype - Mobile

Portrait mode:

Open InVision prototype ⇗

Landscape mode:

Open Framer.JS prototype ⇗

Code from the Framer.js prototype:

background = new BackgroundLayer
backgroundColor: "#fff"
cook_statusbar = new Layer
x: 0
y: 0
width: 1776
height: 72
image: "images/cook-statusbar.png"
cook_appbar = new Layer
x: 0
y: 0
width: 1791
height: 264
image: "images/cook-appbar.png"
cook_navbar = new Layer
x: 1776
y: 0
width: 144
height: 1080
opacity: 0.9
image: "images/cook-navbar.png"
cook_statusbar.placeBefore(cook_appbar)
page = new PageComponent
scrollVertical: false
x: 0
y: 276
width: 1920
height: 768
page.on "change:currentPage", ->
page.previousPage.animate
opacity: 0.2
page.currentPage.animate
opacity: 1
page.nextPage
opacity: 0.2
layer = new Layer
parent: page.content
size: 1452
y: 0
x: 162
width: 1452
height: 768
image: "images/step 0.png"
for index in [1...9]
layer = new Layer
parent: page.content
size: 1452
y: 0
x: 162 + ((1452 + 4) * index)
width: 1452
height: 768
image: "images/step " + index + ".png"
opacity: 0.2
cook_navbar.placeBefore(page)
view raw app.coffee hosted with ❤ by GitHub


4.2 Interactive Prototype - Tablet

Open InVision prototype ⇗


Links

Thanks for Scrolling!