Recipe app: Key Lime Cake
What
[Design exercise] Create a recipe app that would help cooking more easliy.
Project Details
There are numerous recipes with wordy directions to read to follow. Especially while cooking, these directions are challenging to keep track of. In order to enhance the cooking experience, I designed an app that has visual representation of each step; as well as the ingredients lists that are responsive to where users are in direction pane.
Full view of Recipe app
Recipe app for both tablet and phone.
Tablet: Landing page
Shows Recipe name, author's note, and ingredients lists. Ingredient lists have check box next to them so that you can track what you have and what you need to start cooking.
Direction pane with illustrations
Directions are provided in both words and illustrations. Illustrations show a clear visual representation of what kind of tools / cooking materials to use, and also remind users about the amount of ingredients for each step.
Smart way to track Ingredients and Directions.
As user scroll the app, the ingredients that have been used in the previous steps will fade out.
For Phone
Phone has smaller real estate. So for users who just want to scan through the whole recipe quickly, there will be an option where users can hide Illustrations and read through steps only (the control is next to "Directions").
Phone has smaller real estate. So for users who just want to scan through the whole recipe quickly, there will be an option where users can hide Illustrations and read through steps only (the control is next to "Directions").
