AllRecipes App

Project Manager ∙ Information Architect ∙ Visual Design

AllRecipesMockup_Banner.jpg

Overview

about

All Recipes is a Seattle business that helps home cooks discover and share the joy of cooking. The app is popular and has opportunity for improvement through tweaks of the UI as well as a new feature.

For this concept piece, I worked on a team of three and served as the Project Manager, Information Architect, and Visual Designer.

duration

This project was completed over a 2-week design sprint.

Process

  • Online Survey
  • User Interviews (in person, 1:1)
  • Research
  • Site map, User Flows
  • Wireframes & Iterations
  • Visual Design & Prototype

final design

mockup_highfidelity.jpg

Discovery

what do users think about the current all recipes app?

The first three days were spent gathering initial data to better understand the current app and user needs. The team researcher (Randy) posted an online survey to his social media channels, while another teammate also posted the survey to an online forum he is a part of. The survey was completed by 35 participants across these channels.

As a team, we conducted a total of six in-person interviews. Participants were asked generic questions about cooking and recipe habits, as well as All Recipes App-specific questions. During the in-person interviews, participants were given two tasks to complete within the app. We took extensive notes throughout the in-person interviews and synthesized the responses using an affinity diagram activity.

We analyzed user responses to our interview/survey through an Affinity Diagram. Based on the analysis, we identified five primary pain points within the current app.

We analyzed user responses to our interview/survey through an Affinity Diagram. Based on the analysis, we identified five primary pain points within the current app.

The Challenge

All Recipes users want to easily find and cook simple meals. Users are often fighting against variables such as organization, time, and various dietary restrictions.

Currently:

  • The app lacks important filtering options  
  • Shopping List feature is not effective
  • Information is not laid out in a mobile friendly way, so users are unable to easily cook and follow along with the recipe.
1a: Hamburger Menu opens up to 1b. 2a: Search bar, on click opens up 2b. 3: Large ads distracting to users. 4: Confusion around terminology in profile ("Favorites," "Recipes," "Collections")

1a: Hamburger Menu opens up to 1b. 2a: Search bar, on click opens up 2b. 3: Large ads distracting to users. 4: Confusion around terminology in profile ("Favorites," "Recipes," "Collections")

Competitor research


Approach

who is our primary user?

Randy developed a persona based on initial user research. Our persona, Trevor, is an Engineer in his mid-30's living in Seattle with his girlfriend. They both choose to eat vegetarian and are often searching for interesting new recipes. Trevor needs recipes that are filling, healthy, and simple to prep. He hates cooking from a recipe on his mobile phone because his hands are dirty from the food, and consequently get his phone screen dirty as he tries to scroll through the recipe. I sketched a storyboard to illustrate Trevor's challenges.

feature prioritization

Based on the results of user research we selected the top three paint points to address in our redesign:

  • Allow for more robust filtering within recipes
  • Design a hands-free / voice activated mode where the app reads recipe instructions to users
  • Update the UI of the current shopping list and create an option to share the list with a friend

Sitemap: analyzing the current app structure

For the original app, I created an annotated sitemap to indicate specific information. 

card sort: what is the most important content?

My goal with the card sort was to identify what headings were viewed as most important and informative, which headings confused users, and if any were superfluous. The results were not entirely conclusive, but did help me to gauge what items were important for users to easily access (my feed/recipe list, popular recipes) and also better understand what terminology was confusing (dinner spinner, my collections)

reorganized sitemap

The final sitemap for the revised app is far more linear and organized than the original.

The final sitemap for the revised app is far more linear and organized than the original.


Design

wireframes & iterations

Josh (IxD) created low fidelity wireframes in Sketch. In a sketching session, Josh and I determined we would keep the basic grid layout of the current app. Users indicated they like the grid because it is similar to the desktop site and is simple to scroll through. We added in a pager on the home screen so users can slide through featured categories ("favorites," "seasonal," "dinner," etc.), which would update the recipe feed. 

Original screen (left) vs. wireframe of redesign. The original app's search function happens on clicking the arrow in the "search recipes" bar and users see three primary options to search by. We changed the search bar into a simple icon and added the page slider at the top so users can slide through common searches (Dinner, Snacks, Favorites, etc.) and update the feed.

Original screen (left) vs. wireframe of redesign. The original app's search function happens on clicking the arrow in the "search recipes" bar and users see three primary options to search by. We changed the search bar into a simple icon and added the page slider at the top so users can slide through common searches (Dinner, Snacks, Favorites, etc.) and update the feed.

design studio

A major feature we were still trying to figure out was the recipe view. Users indicated they dislike using mobile phones to follow recipes because they constantly have to scroll up and down to reference ingredients and instructions, resulting in dirty phone screens.

The initial solution was to have a toggle between ingredient lists and instructions, so there would be less active scrolling up and down the screen. This simplified the process, but not enough. A completely hands free option became our goal. To generate ideas quickly as a team, we held a design studio. This allowed us to brainstorm how a hands-free option could work, and became a major component of our redesign.

Sketching from first round of design studio. My sketches are on the far right. We took five minutes to sketch as many possible solutions as we could think of, and then discussed with the group. As we reviewed our design decisions, I took notes on the white board.

Sketching from first round of design studio. My sketches are on the far right. We took five minutes to sketch as many possible solutions as we could think of, and then discussed with the group. As we reviewed our design decisions, I took notes on the white board.

I drew out the design our team decided on using the whiteboard.

I drew out the design our team decided on using the whiteboard.

How will users interact with voice activated mode?

final wireframes & High fidelity mock ups

Josh completed the wireframes as Randy continued testing the designs with users. As Randy brought in results from testing, I took Josh's wireframes and incorporated changes while designing high fidelity mockups.

Additional iterations incorporated

  • I removed the hamburger menu completely, per the original suggestion in our design critique. Users had commented there were too many navigation points, and by removing the hamburger menu and relying solely on global toolbars, users would be able to see all navigation options on the screen.
  • I added a small "what's this?" link under the "read to me" button, so users can learn more about the voice activated mode before entering it.

Reflections

  • For future steps, I would spend time finessing the visual design. Due to time constraints, we were not able to get in a final round of user testing with the high fidelity comps.
  • I received good feedback from teammates on my project management skills, which reinforced my understanding of my organizational skills.
  • The key finding was that users need a solution when it comes to using a mobile app for recipes (both finding and using while cooking). We attempted to solve this with the hands free voice activation mode, but more testing is needed to find out if this is truly an effective solution for our users.