Case Study: “The OG Recipe Guide”

Prefer photos?

Link to case study with images can be found here:

No photos? Keep reading.

The Challenge:

Create a mobile application for a classmate that helps solve a problem they encounter in their daily life. (My partner was Imogen)

The Approach:

Day 1: August 2, 2016

1. User research:

The initial process for any type of research is an interview. I created twenty interview questions, and sat down with Imogen. The interview was about 14 minutes long and was conducted generatively, modifying and coming up with new question as the interview progressed. Below you’ll find three of the main questions from the interview.

Q: “What are some of your hobbies?”

A : “Well I like cooking, and outdoorsy type things.”

Q: “Do you run into any problems while cooking?”

A: “Mm yea, sometimes I’m not sure what to make.”

Q: “Would you use an app that helps you save recipes?”

A: “It’s likely …I think I’d like that.”

2. Problem and proposed solution:

Problem:

When Imogen goes into the grocery store, she’s not sure of recipes to match with her ingredients. Her current method is using Google to find recipes, but there’s always an overwhelming amount of results.

Proposed solution:

Create an app for Imogen that stores saved recipes while providing the ability to search for new recipes with specific ingredients in the form of TAGs. This creates a more tailored search and returns only relevant recipes giving Imogen what she needs.

Day 2: August 3, 2016

  1. Storyboarding:

In order to get a better idea of the problem, I found it really helpful to document the process Imogen goes through when in an actual grocery store: to do this I created a storyboard. Storyboards are particularly useful because they are the first precursor in a solution to the problem and generally start the app development process.

2. Making the proposed solution into an app:

To conceptualizing the process the easiest way was to figure out the needs Imogen has and how those translate to a solution in an application. I did this by grasping as many ideas as possible and creating a map for viewing them.

Day 3: August 4, 2016

  1. Sketching concepts:

By now I’d had enough information to conceptualize the app, so I began creating a sketch for some testing. The first iteration of the sketch was a rough version of what “The OG Recipe Guide” would look like.

Explanation of the paper prototypes:

In the first iteration of the sketch there was a home screen which is where the saved recipes were located, they would be scrollable and take up the entire screen. The second image of the first sketch contained the detail view of what a saved recipe would look like when clicked. There would also be the ability to flip between screens (indicated by the red circles in the drawing). There was also a navigation bar (aka the hamburger menu) which would be used to access search functionality and a “random recipe generator”.

2. User testing:

After the first couple sketches were created, it was time to test out the concepts. Imogen spent a couple minutes with the app, navigating through the various screens providing input as she was going through them. It was decided to remove the navigation bar, and the flip functionality in favor of a sliding menu activated via a swipe gesture. This provided the same access to the various features, but a much more minimal design aesthetic.

3. User flows:

Now that the sketches were tested it was time to get some actual user flows out to hone the sketching process and start producing prototypes. The first iteration of a user flow through “The OG Recipe Guide” didn’t indulge any real decision points and was a little difficult to understand per Imogen and Daniel’s feedback (my partner and instruction respectively), so a couple iterations were needed to produce a model suitable for prototyping.

Day 4: August 5, 2016

  1. Prototyping:

After creating the corresponding user flows it was now time to start prototyping out more realized versions of what “The OG Recipe Guide” would look like, to do this more screens were needed at higher fidelity.

2. User testing:

After the fist prototype was tested, it was time to create a second prototype, removing features that weren’t needed and adding a few. Some examples of removed features included removing the navigation bar officially as an option, the random recipe finder and the tabs at the bottom of the screen.

3. Prototype:

The third and final prototype included the functionality needed to operate the app as well as higher fidelity mockups to give Imogen a better idea of what the final product would look like. I was pretty proud of this version as it included all the features needed to accomplish the proposed solution, a splash screen and some notification style functionality as well.

4. Testing the third prototype:

Unfortunately Imogen and I didn’t realize until this far into the process that there was a major problem: I’d built the app for the android platform, which doesn’t really sound like a big deal except for the fact that she uses an iPhone. This meant the app had to be completely redesigned as there is no back button in android but there is in iOS.

5. The final design:

This time instead of going through the paper prototype process, I mad the decision to create a digital version which would be more suitable for Marvel interactive testing, not to mention it would give the app a little more focus. In the digital prototype I added the back button functionality, and removed the unneeded features.

6. The interactive prototype:

Creating the interactive prototype actually turned out to be really fun, below you’ll find a copy to the link of that demo if you’d like to take a look for yourself.

Marvel prototype here.

7. What’s next?

  • To create a physical android application: I think it would be really cool to see this app come to life, and I plan on doing so in the future.
  • To add the random recipe functionality: I really like this idea of adding a random recipe, and would like to integrate that feature into the app down the road.

Impact & Results:

Currently it’s too soon to really establish either impact or results, but I do believe that Imogen liked the app and I’m really happy with what it turned out to be! I look forward to developing “The OG Recipe Guide” in the future and am happy with what I’ve accomplished in my first UX focused mobile app design.

The End.

Change your mind about the photos?

Link to case study with images can be found here:

View presentation here:

Show your support

Clapping shows how much you appreciated Austin Harshberger’s story.