As the second project in GA, we were divided into teams and given a client for this project. Our client is Blue Apron. Although we are not working with them, it is interesting to have a stakeholder in our minds, and it affected some of our decision makings too.
Step 0: The task
The scenario we were given was that Blue Apron would like to come up with this new feature, users submitting their recipes to Blue Apron. Other users can vote on them, and Blue Apron would provide the ingredients of the recipe of the winner just like they do for their recipes. And the other users can subscribe to the winner’s recipes.
Step 1: User interviews
When we got the project, the first thing came to our minds was to think about who should we interview to gain the most valuable information. Apparently, Blue Apron users would be the most ideal choice. They can validate the hypothesis of the value of adding the new features. They are familiar with the service and will be able to tell us the goods and bads.
We screened from 15 people and eventually interviewed seven people in total. However, because of the limited time and limited resource we have, among those seven people, only three of them had the experience of subscribing Blue Apron. The rest of the interviewees were people who used similar services.
In the interviews, we focused on discovering users’ opinions on recipes either on their own recipes or other people’s recipes. During the interviews, we asked about their experience using Blue Apron, their process of looking for new recipes, their own recipes, their interests on origins of the recipes, and their opinions on online polls.
Because this project is the first team project for all of us, we did everything by discussing with one another. For example, when coming up with interview questions, we first split up and came up with some questions ourselves. Then we voted on each questions and saw which one got the most likes. We gathered those questions with more likes and then discussed them, also added some aspects we thought that was missing.
Step 2: Synthesizing Data
After we gathered the information, we started to synthesize them. First, we went through the notes and transcriptions to pull out some interesting insights, including the interviewee’s opinions, pain points and concerns. We wrote down all the insights and started to do affinity mapping, a method for UX designer to arrange the info they get from interviews and turn them into trends. We first arranged all the insights from each person. Then we put insights answering the same question together to find trends. After a few rounds of iterations, we came up with the six insights below.
We have validated the fact that users would love to share their recipes and are interested in knowing the story behind the recipes. As Blue Apron users, they are usually open to new recipes; however, they often prefer recipes from trusted sources. When talking about online poll, most of the interviewees are fine with it. Some of the interviewees hesitate because of the concern of leaking their personal information. As long as the voting procedure is easy and secure, they are willing to vote.
Step 3: Defining the Problem
So what is the problem? Defining the problem and our targeted audience, which is also called personas, can help us stay on track.
From all the data we collect, we summarized two personas: one being the voter, which will be the majority of the two; the other being the recipe creators, who anticipates the contest.
Eddie, the Eater, a loyal customer of Blue Apron’s, is not terrible at the kitchen. He can follow the recipes on Blue Aprons well and usually cooks three time a week. However, he started to look for more recipes with more connection to real people. When knowing there is a contest from Blue Apron, he believes it will be a great chance to try new things.
Courtney, the Cook, on the other hand, is a experienced cook. She has a busy day job but she is also a food blogger in her spare time. As a foodie, she is super excited about Blue Apron’s concept of cooking fabulous food with our own hands. She enjoyed recipes on Blue Apron, but she also has a lot things to say herself. The Star Chef contest is a opportunity to get her name out and gain more followers.
For Eddie, he wants to see new recipes with stories and background. The recipes also need to be easy to follow and actually tastes good. We had the huge discussion about how we should run the system. Because we think there will be a lot people to attend the contest with different level of quality of recipes being submitted into the system, it is not good for voters to go through hundreds of recipes to vote. It is also not good for Blue Apron to control quality of the recipes. For example, they need to consider the cost of the ingredients. If a recipe with lobster, oysters and premium steak being elected, they will have to turn it into the package for users to buy. Therefore, we came to an agreement that once the user submits the recipe, Blue Apron will have to approve it first, and each round there are going to be maximum of 20 recipes attending.
For Courtney, we got our inspirations from those who cancelled the subscription a lot. People who subscribe Blue Apron definitely have interests in cooking, a huge amount of them can cook. As experienced cooks, they have their opinions on food. Sometimes they can be disagreed with the content on Blue Apron and it is the one of the reasons people cancel the subscription based on the interviews. By introducing the contest, these people will get their stage. To make sure the anticipators get their shine, when being approved by Blue Apron, their recipes along with their bio and social media links, if they would like to share, will appear on the website and iOS Application during the contest. The winner, not only his or her recipe will be available for other users to subscribe. There will be another section of featuring the winner page. With the page, the winner gets more chance to talk about themselves and their cooking experience. Blue Apron also will send people to shoot a video of theirs, again for quality control and delivering brand spirit.
Step 4: Design Studio
Now it is time to put our thoughts on to paper. We ran three full rounds of design studios to first brainstorming, then discussing, finally cleaning up thoughts and coming to an agreement.
In the first part of the process, we decided what problem or what screen we were going to focus on, then go wild and sketch out as many ideas as we have. In the next section, each of us talked about our ideas and got feedback from our group members. After that, we wrote down what we agreed upon, and worked towards one solution.
Step 5: Feature Prioritization
Because we can’t accomplish everything we want to do, and even if we do put everything we want into the app, it will be confused for the users, too. We used two methods to clean our minds and found out what are the important tasks needs to be done. One is called the MoSCoW method. We wrote down every feature we talked about during the design studio and arrange them by “must-do”, “should-do”, “could-do”, and “won’t-do.” For example, “a function for voting” is a “must-do,” the whole thing will not be functional without it.On the other hand, “adding a tag for recipes” is a “could-do.”
The other method we used is the scale with the x-axis being “essential” and “nice-to-have,” y-axis being “high effort” and “low effort.” I prefer this method more, because I think this chart also talks about another important factor when determining if a feature should be on the top list, efforts. How much time, effort, or expense we need to put into in order to accomplish the task? Features are high essential and low effort will go before features are high essential but high effort.
Step 5: The first Prototype
Once we have understood what should be built first, we started sketching on white board. We just used very basic shapes and lines to indicate buttons, texts and images for different screens. When transfering into a mid-fi prototype, it looks like this:
Here is our first Mid-Fi prototype, I would like to talk about the voting prpcedure specifically. On the main page, there is a Promo Banner talking about the contest. It also serves as one of the three entry point of the contest. Once clicking on that, the user goes to the Contest Landing page where they can submit their own recipe or check out other’s recipes. Located on the lower right of the thumbnails, users can hit the heart icon to vote. By clicking into one of the thumbnails, the user can see the full recipe and they can vote for the ones they like. They can also go to their profile page and “liked recipes” to see the ones they voted for.
Step 6: Usability Tests (Round 1)
We have created two task scenarios fom the perspectives of the voters and anticipators, total five different tasks, trying to cover the experience of using the app as much as possible. From three rounds of usability tests, we got the chance to re-iterate our design based on feedbacks from our testers. Here are the tasks:
You are a passionate food blogger who is also a loyal customer of Blue Apron’s. Now you hear that Blue Apron came up with a contest for Blue Apron’s User Star Chef, where users can submit their own recipe. You feel that this is a great opportunity to get your name out and share your recipe.
Task 1: Submit your favorite recipe
Task 2: Find your submission draft and make some edits to your recipe submission
Your friend is coming over and you’re in charge of making supper. She’s a bit of a foodie and you want to show off your culinary skills with a unique dish you think she would actually appreciate. You know that BA has a user submitted recipe contest where you can see unique user recipes and “like” specific ones. So:
Task 1: Open the app, and find a unique Home Chef submitted the recipe to use and “like”.
Task 2: Discover the page of the Star Chef and her recipe.
Based on the feedbacks from our testers, they were confused when seeing both “liked recipes” and “saved recipes” on the profile page. We solved the issue by moving “liked recipes,” as a sub tab, into “saved recipes,” which is an original section in Blue Arpon’s App.
Other minor issues are users can’t understand BA stands for Blue Apron. Users don’t know the tabs below are clickable and would bring them into another tab. We also changed the term “user recipes” into “home chef recipes” to bring up the level of special of the contest.
Some users thought “submit your recipe” means they have already finished editing the recipe, and it is the final step. By changing it to “start submission,” users will have a clear understanding they will need to finish several steps to complete the submission.
When submitting the recipes, some testers pointed out that the icon next to the camera icon was ambiguous. The icon was for adding detail description for each step. We solved it by showing the block of description and make the step more visually intuitive.
User liked our bread-crump trail because they would be able to see how many steps are there. We observed people liked to click on it to go back, and in the next iteration, we made it clickable.
Step 6: Usability Tests (Round 2)
After the second round of usability test, we removed the heart icon located on the lower right of the thumbnails, because no one would like to vote before seeing it. We also changed the symbol of voting from heart to trophy to better indicate the contest. In order to make the voting procedure easier, we made the icon floating when scrolling through so that users can click whenever they wanted to. We also changed “my recipes” on profile page to “my submissions” so that user knows it is a section for the contest. The trophy icon appeared again when user visited their past submission page and they could see how many people voted for them.
We also fixed some minor issues in round two as well. For example, we made the description clear that in the Bio page, we want a photo of the anticipator not their food which they can upload in their recipe section.
Just like what we found in the interviews, the story and soul attached to individuals are the key feature of home chef’s recipe. We wanted to make it more clear by changing the “recipe description” to “recipe background story and history.”
Step 6: Usability Tests (Round 3)
After three rounds of iterations, the major issues have been solved. What left was when people looking for their drafts, although they fingured out fairly quickly, their instincts told them to go to the contest landing page for the draft. To solve the problem, we added a small entry point under the “start submission” button. We also duplicated the section of “Star Chef Feature page” from the main page to encourage users browsing the contest to see a former winner.
Step 7: Next Step
One of our testers mentioned that he would love to share his submitted recipes to his friends. We believed that it will be a great opportunities to bring new customers to Blue Apron. Also, there could be a short clip uploaded from the users to introduce themselves and their food, 30 seconds maximum. The final idea we have for next step is that we would love to introduce seasonal recipe contest. Different theme for different contests can keep the interests in a hight level and give users new inspirations.
Overall, I think it is a great experience working with people. Everyone has his own strength and I learned a lot from each others. Also, I am very appriecated that everyone is so engaged and speaks up for his opinion. When I work on my own, sometimes I use my assumptions. But when we work together, we have opinions from different perspectives. It is a great team!