Recipesmart

Rupali Joshi
5 min readApr 3, 2018

--

This post is part of my 10-week long Capstone project from Coursera IxD Specialization from University of California, San Diego.

Recipesmart — My app introduction
The idea of a recipe app came from my own interest in cooking. I love to cook and try out new recipes and cuisines. I realized that over the course of time, we tend to forget the recipe of the special meal that we had cooked, especially if we had learnt it from our friend or grandma. Many times we browse online for a specific recipe, but unable to find it if it was not saved. Sometimes it can be simple cooking tips or garnishing ideas.

I believe, our efforts should not go in vain. So, I thought of having our own recipe app, whereby one can store their favorite recipes — be it from a website, YouTube video, a book or simply from handwritten notes. In addition to that, I also wanted to address the challenges people face while shopping for groceries.

Needfinding
From the 3 design briefs, TIME, CHANGE and GLANCE, my observations center on TIME and GLANCE. ‘Time’ because of time management and ‘Glance’ because of willingness to adapt to the changing need.

I chose to interview 3 individuals — a stay-at-home mom, a software professional and a student. My user needs catered to the ‘cook’ and ‘shopper’. The in-person interviews were very interesting and gave me some great insight. The participant feedback on cooking new recipes, searching and saving them and later grocery shopping was totally unexpected and different from what I followed. But we all faced a common problem towards shopping — forgetting the list at home or to buy an item from store, especially if the list was too long.

Point of View
Cooking and shopping (for ingredients) go hand-in-hand. People who love to cook, never follow only one recipe or idea, but take inspiration from different recipes/chefs. Also they are always on the lookout for ingredients, for the meal that they plan to make later, while they shop. By keeping a simple approach towards cooking and shopping, one can save time, as well as be an expert in the learning process. I feel the need to make use of latest technology in order to make life simple.

Better than existing apps?
In this course I learned many tips and tricks of creating a great design idea for my app. I looked at several app/websites for design inspiration, including a few cooking ones such as Epicurious, Garden Plate, Paprika, Food Network and Pinterest. Since there were many out there, I realized my app needed to have a unique selling proposition. How could I design a solution to the user problem in a fun and creative way? So I thought of taking some of the best features of existing apps and adding my own ideas to them.

STORYBOARD & PROTOTYPES
Working on Storyboards and Prototypes was a fun and time-saving method for expressing one’s idea at the same time finding solution to the problem.

One of my Storyboards
One of my paper Prototype

After multiple walkthroughs and a formal in-person evaluation, it was time for online peer evaluation of my prototype based on Nielsen Norman’s Heuristic Evaluation. My peer conducted a very detailed analysis of Recipesmart. This was indeed a great way of finding and fixing errors at an initial stage. Later I created my 1st wireframe for Homepage in PowerPoint.

Snapshot of Heuristic Evaluation and First Wireframe in PowerPoint

For the next iteration, a low fidelity prototype was ready with three key screens. I created my app in Marvel App. My focus was on the core needs of the users.

A few iterations later, I now had a fully fleshed out prototype ready for in-person testing. I developed my Testing Protocol and a Usability script along with participant signed consent forms. Through video and photo documentation, I observed two testers using my app. Based on the interaction and the feedback I got, I planned a few changes to the app. It was now ready for online user testing.

In-person User Testing 1 & 2

A/B Testing on usertesting.com
Platform — iOS. Prototype- Recipesmart app. Total participants: 4, 2 testers each test.
So basically Test 1 consisted of a URL to prototype A, with bottom bar icons all labelled. Test 2 consisted of prototype B, with bottom bar icons all labelled, except for the ‘Saved recipes icon’ which was highlighted in color. I wanted to check if the change made to icon for Saved recipes yielded more clicks and any way grabbing attention. There were 2 testers for each test.

The testers followed all my instructions well and gave me many suggestions and ideas where I could improve. Overall they liked the navigation, clean and simple presentation and the option of having to store both web based recipes and YouTube videos within an app. I was glad with some positive response. My ‘grocery shopping reminder option’ was not ready until then, and I added that to my Development Plan.

Comparison of ‘Saved recipes icon’ at bottom bar for A/B Testing

Results! Both the testers for Prototype B though the colored icon to be discouraging and unnecessary. It did not yield more clicks as I thought it would. I finally stuck to Prototype A.

Snapshot of my development plan

Final app name
It was challenging for me to find a recipe app name with so many good ones out in the market. Right from the initial stages of prototyping, I thought of naming my app as recipesmart and finalized it.
‘Recipesmart’ = Recipes + Smart (a smart solution to user needs).

Final Prototype
Now after several editing and changes, my prototype is ready to be presented, though it still has a long way to go. Please note, some pages such as User Login will get auto-populated. Be sure to check out the unique features such as, ‘setting up a Grocery list reminder for in-store purchases’. I have set up a timer in Marvel App to demonstrate this.

Screens from final prototype — Recipesmart

URL of final prototype, Recipesmart: https://marvelapp.com/c4g5h4j

You can watch a short video about Recipesmart here: https://youtu.be/EMmmBiV_2cc

Final words
Thanks to Professor Scott Klemmer from UC (San Diego) and all those who supported me along the way!

--

--