Project Manager ∙ Information Architect ∙ Visual Design
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.
This project was completed over a 2-week design sprint.
- Online Survey
- User Interviews (in person, 1:1)
- Site map, User Flows
- Wireframes & Iterations
- Visual Design & Prototype
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.
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.
- 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.
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.
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
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)
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.
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.
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.
- 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.