Overview
This team of five created the desktop-based Progressive Web App, Beginner's Kitchen, to help busy, young, beginner cooks find recipes that match their skill level and available time.
Tasked with building a PWA surrounding the theme of a recipe finder, our group researched our specific user group, followed the User-Centered Design Process to find their specific problems, brainstormed design solutions, and finally produced a high-fidelity prototype using Vue.js.
Team: Rylee Hickman, Jordin Miller, Miranda Medina, Tony Bridges, and Thomas Wu
Role: Each team member held an equal role in researching, designing, and prototyping throughout the three-month process
Duration: 3 Months
Skills: User Research, User Centered Design Process, Progressive Web App (PWA) Design, Development & Deployment, and User Testing
Tools: Vue.js and Bootstrap/BootstrapVue
The group first did a round of exploratory, semi-structured interviews with people of various backgrounds to assess pain points within the cooking process. Our team devised a set of questions for these interviews, such as "How did you last decide what to make for yourself?" and "In the past week, how many different recipes have you made?". We also included more open-ended and qualitative questions, like "What do you value most when making a recipe?" and "Are you happy with the healthiness of your meals?". We designed these questions and prompts to follow best practices of user research methods, intentionally pointing to specific experiences and avoiding leading in our questioning. After these interviews, we created affinity diagrams to visualize commonalities between responses. This allowed the group to narrow down to our target audience: beginner-level, young professionals looking to improve their cooking skills. We then conducted a second set of interviews with members of our target audience to specifically discover the most pressing issues of this group.
Rough affinity diagram for exploratory interviews to assess commonalities in responses (different colors correspond to different interview participants)
Final affinity diagram for target user interviews to determine common, universal issues (different colors correspond to different interview participants)
From these interviews and affinity diagrams, we determined that our final user group described young professionals with beginner-level cooking skills, who wish to improve the quality of, and add variety to, their home-cooked meals. From our exploratory interviews, we discovered that many people we talked to only had a basic knowledge of cooking techniques and had only recently started cooking for themselves, and were tired of making the same meals every week. They were looking for inspiration for recipes that match their skill level while also taking into account their busy lifestyles.
Alex is a student and TA at a large university studying engineering, participates in research, and rock climbs in his free time at school.
Next, our team took the information we had gathered up until this point to identify the most significant problems for our target user group. Although our initial list of issues was more sprawling, we determined two key problems we thought would be most important to address.
Compared to the existing solutions for finding recipes (like Googling and using social media), our new product provides:
We will implement our app in desktop format to take full advantage of the larger screen size, affording the user to view more things at once.
Based on feedback from the user, we want the application to adjust content.
We want users to accomplish their goals all in the same place.
With our user group, problems, and project themes identified, our group began to brainstorm a possible product design. After we decided on a basic application structure, we iterated several times to produce these final sketches for our Progressive Web Application (PWA).
This sketch shows the design for the Explore page, the page that the user lands on upon opening the app. This page displays a grid of recipe thumbnails and buttons to filter based on ingredient, skill level, and time.
This sketch illustrates the Weekly Plan page's place in the navigation sidebar, as well as a sample plan for the user. Types of activities they could complete include skills (which will teach the user a new cooking skill while also prepping for a recipe), prep work (which will help them to prepare for an upcoming meal with skills they have already learned), and cooking (in which the app will help them to complete a recipe with the prepared ingredients/food). The users can navigate to previous and upcoming weeks, and click on daily sections to gather more information.
In this final sketch of the Daily Details page, we provided a clarified example of details for Thursday of Week 1. The morning section describes an example prep work activity for the user, as well as button controls to 'View Resources' (such as videos or written instructions to refresh their skills) and 'Mark as Complete' (to add to their skills). The night section describes the user's plan for the night, where the app instructs them to cook a dinner recipe, as well as a lunch meal for the next day. These recipes come from/are inspired by recipes that the user has previously bookmarked, and they can visit the specifics of both recipes through their respective buttons below the description.
The image below shows the wireframe of our PWA, indicating its proposed flow between pages. The Explore page will be the page that users first land on upon launch. They could then click the Filter controls at the top of the page to open filter dropdowns for Ingredient, Skill Level, and Time, respectively. They may also click on a recipe card, which will direct them to a recipe details page. From the Explore page or anywhere else on the app, users may also navigate to the Weekly Plan page through the navigation sidebar. From the Weekly Plan page, users may click on daily sections in order to open a daily details page. On this page, there may or may not be controls which will direct the user to recipe details page(s), depending on the week. From the navigation bar anywhere in the app, users can also move to the Profile page. The users may move from this page to a skills details page, by clicking the 'See More' control. Additionally, the profile page may direct users to a recipe details page through the 'Bookmarked Recipes' section.
Our final design took into account the critical problems of users that we identified in the previous milestone (users want a variety of meals throughout the week, and users don't want to spend too much time on a meal and to cook efficiently with their given skill level). To address the issue of variety, the 'Recommended For You' section on the explore page allows users to see recipes they wouldn't usually find (and don't have to search extensively). Furthermore, our design helps solve the problem of users wanting to spend less time on meals and cook with their given skill set by allowing users to filter all recipes by the time and the skill level they require. The weekly plan also helps the user to create time in their week for cooking and assists users with their goal of improving their cooking skills (which will allow them to increase the variety of meals they can make).
Additionally, the bookmarked recipes feature allows us to create a more centralized platform for finding recipes, which is one of our focuses in our value propositions. Allowing users to bookmark recipes to their profile establishes a place where they can come back any time and quickly locate a recipe they are interested in.
Overall, the design communicates effectively with our users because it has a natural flow. The navigation bar, visible on every page, includes the three main pages of the PWA. The app starts on the explore page, which is likely the primary feature users will use. From there, you can filter and access recipe details. The weekly plan is a separate page because it maps out what skills you are learning for the week and what days you need to prep/cook. The bookmarks page, previously labeled as the profile page, contains all recipes that users have saved.
To code this prototype, our team used Vue.js along with BootstrapVue within Visual Studio Code. These tools and other resources like JSON allowed us to develop a high-fidelity prototype of the PWA we wished to create.
Our team worked with Git/GitHub's repository branches to independently work on different sections of the PWA while avoiding troublesome conflicts within the group. Finally, we merged all branches to achieve our desired, functional product and published/deployed our final product using Heroku.
Our final design took into account the critical problems of users that we identified in the previous milestone (users want a variety of meals throughout the week, and users don't want to spend too much time on a meal and to cook efficiently with their given skill level). To address the issue of variety, the 'Recommended For You' section on the explore page allows users to see recipes they wouldn't usually find (and don't have to search extensively). Furthermore, our design helps solve the problem of users wanting to spend less time on meals and cook with their given skill set by allowing users to filter all recipes by the time and the skill level they require. The weekly plan also helps the user to create time in their week for cooking and assists users with their goal of improving their cooking skills (which will allow them to increase the variety of meals they can make).
Additionally, the bookmarked recipes feature allows us to create a more centralized platform for finding recipes, which is one of our focuses in our value propositions. Allowing users to bookmark recipes to their profile establishes a place where they can come back any time and quickly locate a recipe they are interested in.
Overall, the design communicates effectively with our users because it has a natural flow. The navigation bar, visible on every page, includes the two main pages of the PWA. The app starts on the explore page, which is likely the primary feature users will use. From there, you can filter and access recipe details. The weekly plan is a separate page because it maps out what skills you are learning for the week and what days you need to prep/cook. The profile page contains all the information about a specific user (skills they've learned, or need to learn, and recipes they want to make).
After the first iteration of our prototype development, the team conducted a round of testing using a predetermined set of user scenarios.
We then took the common issues determined from these sessions and fixed what we could, given the timeline and scope of the project.
View a video of our final product below:
Or click here to view the PWA yourself!
Be sure to reach out if you would like to work with me!
.png)
© Rylee Hickman 2022
Icons from Flaticon
