- Create a responsive (mobile and tablet) recipe app for 2 targeted audiences: visually impaired users and sighted users.
- Experience the design process of discover, define, plan, and develop.
Q1. What is a good cooking experience?
- Clear instruction helps a lot.
- Video instruction is even better.
- The timer has been set million times.
- 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?
- Design the same app for all population.
- Voice-over and other screen readers are good but not as useful when people are cooking.
- 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 ⇗)
- 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.
- 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.1 Technic Plan
- 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.
3.2 Information Architecture Map
3.3 User Flow
3.4 Design & Annotated User Flow
4.1 Interactive Prototype - Mobile
Code from the Framer.js prototype:
|background = new BackgroundLayer|
|cook_statusbar = new Layer|
|cook_appbar = new Layer|
|cook_navbar = new Layer|
|page = new PageComponent|
|page.on "change:currentPage", ->|
|layer = new Layer|
|image: "images/step 0.png"|
|for index in [1...9]|
|layer = new Layer|
|x: 162 + ((1452 + 4) * index)|
|image: "images/step " + index + ".png"|
4.2 Interactive Prototype - Tablet
- Mobile User Flow: mobile-flow.png ⇗.
- Tablet User Flow: tablet-flow.png ⇗.
- Mobile Interactive Prototype (main app): https://invis.io/7C9I9HB9H ⇗.
- Mobile Interactive Prototype (cooking directions): http://share.framerjs.com/zi0khldqkcst/ ⇗.
- Tablet Interactive Prototype (all): https://invis.io/F89IA0IUJ ⇗.