Recipe app redesign
The Challenge
MyRecipes is a recipe app on the App Store with a current rating of 2.3 on the App Store. As a UI/UX developer, we want MyRecipes to have many users, an active community, diverse recipes, and see regular use.
Specifically, goals for us with this app include:
100k accounts made
50% profile fulfillment
average of 3 ‘follows‘ per user
average of 100 recipes saved per user
What do our users want?
The current MyRecipes app is not as helpful as it could be. It's The people who download and use our app will want it to have helpful recipes, simple UI, and overall convenience: easy access, printing options, favorites list, in-app shopping lists, etc.
The clearest thing our research showed was that overwhelmingly, users of recipe blogs and other food-related websites value simplicity above all else. For our users, videos are nice to have but unnecessary, ads are overwhelming, and anything other than the recipe + some tips are distracting.
The original app design was clunky and difficult to use.
user personas
ann
Age: 40
Stay-at-home mom
Ann loves to cook, often looks for recipe blogs on Google & Pinterest, and likes to print them out & save them for later use. Ann wants to experiment and find healthy dinners she and her kids will love.
matt
Age: 25
Recent grad
Matt is starting to learn how to live on his own, but he doesn’t really know how to cook. He looks everything up on his iPhone, and just wants to use what he has in the house.
Danielle
Age: 21
Student
Danielle doesn’t have the time to scroll through long recipe blogs or pages of recipe results. She uses her laptop to find recipes, and likes adding them straight to her shopping notes/online cart.
COMPETITORS
Allrecipes.com
Well organized, many categories
Well-established
Tips/techniques section
Suggested recipes
Tasty
Visually appealing, very easy to use
‘Community’ bar for tips/suggestions
In-app grocery list direct to Walmart
Both shopping list & direct purchasing
‘My Cookbook’ categories
Food Network Kitchen
Easy shopping list available
Lots of suggested meals
Cooking ‘class’ videos in-app
Kitchen basics & how-tos
Recipe Keeper
Easily adjustable serving sizes
Simple typography
Can print, add to grocery list easily
Recipe planner
Information Architecture
The audience’s experience is by far the most important thing to any digital design, so that had to remain the focus of my research before I could even begin prototyping.
As it is, the app I’m redesigning is very basic, yet difficult to use. It doesn’t have search filters, instead forcing users to sift through many nested folders and scroll through lists of recipes. I wanted to maximize simplicity and convenience while adding some interesting features to help users have the best experience possible.
This diagram also shows the sections that I added to my app after research. Some, like the Discover and Profile pages, are fairly common across the industry. Others, like the Allergy & Diet settings, were a gap in the industry that I noticed personally and made the decision to include for accessibility purposes.
wireframing
Wireframing is an essential step of designing any mobile/web interface. These wireframes illustrate how specific user flows will function in the end result- adding meals to the planner, setting allergy/diet preferences, and adding meal ingredients to the shopping list.
By testing user behavior, I can decide if a page is too complicated or if things like the navigation need to be moved or adjusted to better suit the user.
After testing these paper prototypes, I was able to slim down my user flows and ensure they made sense even to users that were completely unfamiliar with my project. It was a major piece of the process and integral to the end result.
prototyping
final design
The final prototype is a sample of what the final app would look like.
The strong pink I relied on in this piece accomplished multiple goals. First, it maintains a piece of the original app branding, while removing the parts that made it less effective (like the flowery background).
Second, it stands out from the usual recipe/food blog branding (the ubiquitous red & yellow or the soft bluish greens). Paired with the deep eggplant background, it maintains both of those goals without being overly feminine or off-putting.