A hands-free cooking assistant?
My mom loves to learn and cook new dishes. She has a good hand over a variety of recipes. “Where did you learn these?”, I asked knowing she never went to a cooking class. She handed me over that old yellow-paged, coverless book. “Mother gave it to me”, she said. “But why read such long texts when you can find these on the internet?”, I asked. “Why to complicate things when I can simply read it?”, she replied.
Now, my mom is not tech-savvy and she isn’t comfortable with anything that requires more than 3 taps. ‘Complicated’ she calls it and her experience with cooking by following youtube recipes has often resulted in anything but that recipe. Often she didn’t have the exact ingredients and assuming ingredients resulted in something different than what she expected.
So why this cooking-experience talk suddenly? It all started with a design sprint at Design Studio IIT Roorkee. Let’s begin.
The Design Sprint
Design Studio is a group of self-learning designers at IIT Roorkee. I was one of the new recruits of this group and was recently introduced to the world of UI/UX. So after learning the basic UX design process, it was time for our first design sprint.
These were some broad ideas given to us:
- Car parking
- Musicians hub
- Canteen order
- Truck loader
- Police alert
- Cooking assistant
Each one of us had to choose any one of the above and research further to decide a reasonable problem statement. I went for the cooking assistant solely for my love of cooking (Yes! I can cook xD).
The search for the problem statement
What was the need for a cooking assistant? What problem could it solve that the present apps/services/products couldn’t solve? But wait! What exactly were the problems faced while cooking/learning-to-cook?
It was time to talk to someone who cooks regularly.
User Analysis
A person who cooks regularly and has tried learning online — My mom, the first person who came to my mind. It was time for a telephonic interview (I live in a hostel at IIT, away from my mom).
I questioned every aspect of cooking from cooking-time to ingredient-availability. I asked questions like “How many times a week do you try cooking something new?”, “What would you prefer a video tutorial or a textual recipe?” and jotted down every keyword she spoke. I enquired about the pain points while cooking and while using the app. I also asked her about what features would she want if I could make an app/service to assist her with cooking.
After I had an apt amount of data, I thought maybe interviewing one user wasn’ t enough. So the next person was my friend’s mother. She was a more geeky homemaker and was way more comfortable with handling technology. She had quite contrasting answers on certain questions which made my user analysis more practical.
After getting the raw data, it was time to arrange and cluster it.
Affinity clustering
In simple words, affinity clustering is basically segregating the data in meaningful groups. After collecting the data I divided it into 3 groups — user goals, pain points and requested features.
Affinity clustering makes it easier to interpret data and helps in the formation of information architecture. Here are the clusters:
These clusters and the data are cumulatively extracted from the interviews conducted with the two users.
Now, I finally had a problem statement to work upon:
“Indian housewives generally find cooking with video tutorials/recipe books cumbersome and inefficient. Design a plausible solution to this problem.”
The next step was to look at existing apps/services.
Competitive analysis
I explored the most popular cooking apps and services available and listed down their features. Then I compared those I thought were really important ones.
On analyzing these apps/services, I came to the conclusion that only Alexa is close to solving the problem, but it has database limitations, language issues and affordability in a general Indian household. Hence, there is a need for an efficient product, which solves most of the problems while being within Indian household constraints.
I felt one of the benefits of competitive analysis was that it gives you a take-off thrust at the problem by giving you already existing features that have been solving individual pain points related to the problem.
Feature ideation
The next step was to ideate features for the app, based on the clustering which could solve these problems.
As we were allowed to make reasonable assumptions for the stakeholders, I assumed a company which has all requisites like a chef, cameraman, and people to direct and program recipes.
Following the diamond approach, after thinking about all possible features, I filtered a bunch of them to deliver an MVP (Minimal Viable Product). In simple terms, the diamond approach refers to successive divergent and convergent thinking i.e. thinking all possibilities then filtering them based on the constraints. Hence these the finalized features were:
- Image-based steps
- Voice control
- Alternate ingredients in the list wherever possible
- Phone backlight override
- Categorization of recipes
- Share recipes
- Export ingredients
- Tags-based search feature
- Servings calculator
- Timer for certain steps
- Language options
- Measurement system toggle
The next step was to use these features to create information architecture.
Information Architecture
Information architecture is all about the organization of information in a clear and logical way. Such an organization follows a clear purpose — helping users navigate complex sets of information. It’s analogous to the arrangement of books in a library.
Information architecture helps the user in creating mental models which helps the user use a product efficiently. Mental models are the imaginary working models created by the user’s brain on introduction to a novel object. These are made using information from past experiences and consist of mappings i.e. the link between a feature/control and its use/effect.
Now it was time to think of possible use cases.
Use cases & user flows
Use cases as the name suggests are the possible causes for which an app/website can be used whereas user flows are the possible routes a person can take through the app/website for the corresponding use case.
So I found 2 major possible use cases:
- Exploring recipes
- Cooking
The save feature can be considered as a sub-case amidst other major use cases.
I haven’t worked upon edge cases because they are majorly based upon constraints and I assumed the constraints, stakeholders, etc.
Wireframes
Time for some scribbling and scratching! Wireframes are the first step towards visually representing the solution.
One noteworthy point is — Wireframes need not contain fancy UI, they can but it’s not necessary. It should just reflect the skeleton of the UI.
Branding and UI styling
Branding is the product’s visual identity, hence it must be done such that it is quite unique and compatible with the product’s emotion.
I felt yellow (#FFC107) is dominating color in the Indian main course so I chose it as the primary with charcoal black (#3C3C3C) as the secondary color and light grey (#A4A4A4) for tertiary uses.
UI design
“Users often perceive aesthetically pleasing design as design that’s more usable”. This is known as the Aesthetic Usability Effect. I guess we’ve all experienced it while using a not-so-good-looking product.
I designed the UI keeping in mind the basic UX laws and have tried to use them wherever possible. UX laws are psychology and design based laws, each one developed and researched by different scientists from varied fields like cognitive science, human-behavior studies and have proven quite functional.
The navigation bar, for example, is designed according to the Fitt’s Law which states, “The time to acquire a target is a function of the distance to and size of the target”. Thumb is the most active part of the human hand while using a phone and the navigation bar lies quite close to the thumb, thus making it easily tappable.
The navigations button are arranged according to the Serial Position Effect which states, “Users have a propensity to best remember the first and last items in a series”. Thus the two most important buttons i.e. Home and Settings are at the ends.
The navigation interface at the landing page features a close resemblance with Instagram’s navigation. This further ensures that most of the users would be comfortable as they will be familiar with the interface. This is further supported by Jakob’s Law which states, “Use of familiar patterns in design facilitates user experiences”. Although I’m not in complete support with the law as it hinders originality and creativity to some extent.
The cooking interface is voice-controlled, the users can say basic commands like:
- Stop — to pause/stop the recipe
- Repeat — to repeat the step
- Go — to continue with the recipe
Users can use buttons to navigate through the recipe steps. They are given textual as well as audio instructions with images. They can end the recipe at any time by tapping the cross. The bottom bar shows the progress of the recipe.
There is a timer for certain steps that need time-dependent execution. The backlight is overridden so it doesn’t turn off while cooking.
Eureka! Here we have a possible solution to the problem statement, which is a hands-free cooking assistant cum recipe app — Kookerr. Why this strange name? Well, the pressure cooker is one of the most used cooking utensils in India, and in Indian slang, it is often spoken as ‘kookerr’.
Conclusion
Design sprints are fun! and a great way of application-based learning, especially for self-taught designers. While working on this app I interacted with a lot of senior designers & colleagues, read quite a lot of blogs and articles and practiced the complete design process. I wouldn’t have been writing all of this if I had not documented my whole research, that’s how I know the importance of documentation.
This was my first UI/UX project. Although it was not an ideal one, owing to the liberty of choosing the problem statement and setting up the constraints according to my comfort, it did teach me basic design principles, working according to deadlines and brainstorming (this being my first article, it also taught me writing xD).
Thanks for reading this far. Suggestions welcomed :)
Practice good design, use a concept.
Peace.
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
