SmartChef App
Roles: User Experience Designer, Developer (HTML, CSS, JavaScript)
Project Type: Individual
Timeline: 6 weeks
Languages: HTML, CSS, JavaScript
Libraries: jQuery, GSAP
Task:
Ideate, design and develop a single-page app (SPA) that solves a real-world problem using JavaScript.
The Problem:
Most students, especially international students, upon admission into colleges face a challenge they never had to tackle before; 'Cooking.' But the actual problem is not about performing the task itself i.e. the physical activity of cooking, but instead, the challenge lies in 'knowing what to cook with what you have available.' Students ran out of ideas and recipes once they mastered a few dishes.
The Proposal:
To create an app that helps students identify the recipes that are feasible for them to cook based on the ingredients and time they have at their disposal. The app should play the role of a student's very own 'knowledgeable personal chef'.
Process & Solution:
Research: I undertook a quick phenomenological study to understand the experience students have when they juggle the task of cooking while managing their academic and social life. I went about interviewing few of my classmates to figure out the stressors and pain points they face the most when it came to cooking.
Ideation: The interviews indicated that the issue faced by the students was about figuring out 'what' to cook and not much so with 'how' to cook. Thus, I sketched out a few screens to figure out the best possible flow to incorporate the main elements, i.e. the available ingredients, the type of meal to be prepared, and the time available to make it. Also, it was highly possible that in the real world, the user would try and use this app while cooking which would entail them using the phone with dirty hands, it was crucial to reduce the number of screens and steps required to find a recipe.
Wireframing & Testing: Since, the focus of this project was on coding the app from the ground up, I went with the hand-sketch UI design route to enable faster user testing and iterations. These sketches were presented to my classmates to get their feedback and opinion. I made notes of how they wanted to navigate the app and determined which elements would increase the usability and intuitiveness of the app.
(Initial sketching and ideation)
(Application states and flow diagram)
Development & Design: Upon finalizing the sketches, I worked on the information architecture and created the flowchart/statechart of the app to design my first prototype. The app prototype was created using HTML, CSS, and JavaScript, which would be the technologies used to create the final product as well. I then created a JSON database of recipes basis the ingredients listed by the students as most commonly available to them. The database had around 9 recipes to demonstrate the functionality of the app. The prototype was further refined and developed into the final product basis user testing results.
The app would have 3 main screens i.e. the Home Screen, Input Screen, and the Recipe Screen. On the Input Screen, users have to simply select the meal they want to make, the time they have available to make it, and feed in the ingredients they have available. Once they fill in the required fields, the app would search the database of recipes using a search algorithm, based on the constraints provided by the user, to display a recipe that matched the input. Then its a matter of following the recipe instructions and preparing the meal. If the users liked the recipe displayed, they could add it to their favorites, which would store a list of recipes for the user to access again at a later date. Most users were also interested in knowing the calorie content of each recipe, which was incorporated as a standard feature across all recipes. For additional interaction and a smoother user experience, I sprinkled a pinch of animation using the GSAP library.
(Final App Screens. Click to view full screen.)