A Responsive Baking Recipe Website
EASY BAKING
Simply Sweet is a baking website built on the foundation of making baking as simple and easy as possible. Users can go to the site and explore a wide variety of recipes with standard inexpensive ingredients, low time commitments and effortless directions.
Problem
Recipe sites provide long, unorganized recipes that are hard to follow and require time, effort and money. Users are sick of scrolling through pages of unnecessary text and history lessons just to find the actual recipe.
Role
UX Researcher
UX Designer
UI Designer
Tools
Sketch
Invision
Success Metric
Increased website traffic
A B O U T
Lets Cut To The Chase
Simply Sweet is a straightforward baking website. All recipes start with how long the recipe will take, the number of ingredients involved and a photo of the dessert. As users try new recipes and want to save their favorites, they can like or add recipes to their library. This creates an organized digital recipe book for users to refer back to. The ingredients are listed at the top of each recipe, followed by detailed directions that provide photos of each step.
A P P R O A C H
Design Process
D I S C O V E R
Competitive Analysis
I preformed a competitive analysis to gain insight on how other websites are tackling similar problems. This helped me to understand what worked well for existing recipe sites and what could be improved.
D I S C O V E R
User Research
During the user research phase I interviewed 5 perspective users who bake on a regular basis. I wanted to determine what users want from a baking site and how to avoid common mistakes that lead to user frustrations. I asked this series of eight questions:
Approximately how often do you bake? Why do you usually bake?
Tell me about the last time you found a recipe to bake.
What do you consider when picking a recipe?
How often do you use websites or apps to help you with baking recipes?
What are your favorite features of any existing baking site? Why?
What don’t you like about baking/ recipe tools you currently use?
How much of a role does connecting with the baking community play into your enjoyment of baking?
How often do you substitute healthier alternatives into your baking recipes?
Which lead me to three main conclusions that users want:
1. Fast, Cheap, & Easy Recipes | 2. Clear & Simple Instructions | 3. Enticing Photography
D E F I N E
User Personas
D E F I N E
User Stories
Based on the user personas, I have crafted user stories that explain how users will accomplish their goals in Simply Sweet.
D E F I N E
User Flow
I D E A T E
Paper Prototyping & User Testing
Paper Prototyping
After mapping my user flow, I sketched ideas for the product design of Simply Sweet, taking a mobile first approach. I then put together a low fidelity paper prototype of my MVP for user testing.
User testing
After building an interactive prototype in Invision, my users were asked to accomplish 3 tasks to test the usability of my design:
Sign up and create an account
Add a recipe to your saved library
Search for a recipe
Insights
During the account/profile creation everyone skipped the step to upload a profile photo. Moving forward I will wait to include this step until users are setting up their profile.
The user profile needs its own separate screen and user flow.
I D E A T E
Mid-Fidelity Wireframes
D E S I G N
Style Guide
The visual direction of Simply Sweet is cozy, tasteful, simple, and clean. With the look and feel of the brand defined, I created a style guide to maintain a consistent UI throughout the application.
U I D E S I G N
Preference Testing
Because user testing helps guide successful design, I tested two versions of my home screen after applying my style guide. In this test I wanted to determine which typeface resonated more with my audience. I tested eight users who would be most likely to use Simply Sweet for baking. Based on the testing preformed in Usability Hub, 25% of my users preferred screen A, while 75% preferred screen B. Ultimately I moved forward with the Baskerville typeface in screen B.
U I D E S I G N
Final Screens
Discover Recipes
Browse featured, new and popular recipes from the home page. Explore categories and subcategories of your favorite desserts.
Recipe Page
Never mess up a recipe again.
Follow step-by-step detailed photo instructions.
Digital Cookbook
Like and save your favorites to build a baking recipe library.
Responsive Design
Users can follow simply sweet recipes from any device at any time.
P O S T P R O J E C T
Reflection
What went well?
I believe that through user interviews, research and testing I was able to create a product that really solves users problems and makes their lives easier. My user interviews went very well and ultimately drove the direction of the application’s concept. I also think the photography and ui design created an inviting application that users would enjoy viewing.
What were the challenges?
One of the challenges I ran into was recruiting the right user testers, it took some time to find the right people who would fit the applications target market. Secondly, it was challenging to get the various breakpoints to layout functionally and visually pleasing from mobile to web. I spent a lot of time to perfect this and think through the transitions of each section.
What would you do differently?
Ideally I would have recruited more testers and spent more time on the user experience of the product. I would have liked to performed more preference testing on other ui components to gauge what styles/variations engaged my target audience the best.