Case Study
Better Batter
Overview
Better Batter is a UX/UI Design project surrounding a responsive recipe web page.
My responsibilities in this project encompassed background research including a competitor analysis, user objectives, user interviews, user personas, MVP iterations, user flows, a cohesive design style (color, typography, writing style, imagery), wireframing (low to high), low-fidelity prototyping for user testing, moodboards, preference testing and final responsive screens including prototyping and mockups.
Competitor Analysis
Baking Mad
Chefkoch
User Objectives
Who is it for?
• beginners learning to bake
• users looking for new recipes
• users wanting to share own recipes
Where is it used?
• anywhere with mobile device
• shopping in grocery store
• baking in a kitchen
Tasks and Goals
• upgrade account
• search for recipes
• rate & share recipes
• save recipes to recipe book
• leave comments
User Interviews
I conducted six user interviews between the 16.08.2022 and the 20.08.2022 in person and via Signal. The following are quotes from these interviews regarding the baking process and the frustrations and wishes that interviewees voiced.
User Personas
I used the interview results for the creation of four user personas. I named these four personas: “multitasking nurturer”, “inexperienced novice”, “skillful routineer” and “prudent budgeter”.
“multitasking nurturer” Lukas
is father to a 3 year-old and a 10 month-old. He has just started his paternity leave and is looking forward to what the next year will bring and to spending quality time with his children. He has gotten the hang of a daily routine and wants to make some simple baked treats for the family, ideally involving the children.
Goals include recipes with short preparation times, low complexity and low sugar content.
Pain Points include finding child-friendly recipes and navigating the page with dirty hands.
MVP Iterations
In the first MVP iteration I identified the required jobs for the release of the Better Batter web-app based on the user needs. I also developed a second iteration (not depicted) which contains users wants. This iteration provides guidance for potential expansions of existing features (e.g. expanding category and filter searches, recipe book etc.) and new features (e.g. substitution glossary, guides).
MVP Iteration 1 (needs)
User Flows
I created user flows based on analyses of the following tasks:
1. When I am using the web-app I want to be able to create an account so I can upload and save recipes
2. When I am using the web-app I want to be able to log in easily so I can save time
3. When making the one-time purchase to unlock all features, I want to know my personal Information is safe
4. When uploading images I want to be able to crop the image so I don’t have to modify it in advance
5. When I am looking for Inspiration, I want to browse by category to not get overwhelmed by too many options
6. When I search for a specific recipe, I want to use keywords to find relevant results
7. When I am considering a recipe, I want to have a comprehensive overview of key data to make an informed decision
8. When I am making a recipe, I want to have a good overview of each step without irrelevant additional information
9. When I like a recipe, I want to be able to access it again, so that I can refer it in the future
10. When I am uploading my own recipe I want to be supported by a form, so I am not forgetting important information
11. When I like a recipe, I want to be able to share it with my contacts
The two different colors visualize what actions can be done without having an account (all squares) and what actions require log in (light green squares).
Low-fi Wireframes
Based on the user flows, various screen designs were explored using the Crazy 8s method. The selected screens were then refined and used to create a first prototype in Marvel Pop.
Crazy 8s home screen
Revised design
User-Testing
Marvel was used to create a low-fi prototype to conduct usability testing with a focus on the navigational components.
The user tests were conducted in person with three participants in Graz and Vienna between 25.08.20022 and 29.08.2022.
Tasks
• view account type and upgrade it
• add your own recipe
Prototype link:
Mid-fi Wireframes
Based on the collected feedback mid-fi wireframes were created in Figma.
Moodboard
The moodboard was aiming for a fresh, sweet, friendly feeling.
Color Design
I wanted the color design to invoke the same feelings represented by the moodboard: fresh, sweet, and friendly. I also wanted the design to be reminiscent of a retro kitchen, with their teals and pastel blues and pops of red.
Since Better Batter is based on user-uploads, there is no editorial control over the aesthetic of the photos which will be uploaded. Based on other similar websites, however, I anticipate many of the item photos to feature many browns, beiges and pastels.
Based on the above considerations, I created a color palette consisting of a dark grey for elements like Icons, a cool green-grey as a primary color and a sea turtle green for buttons and interactive elements. An indian red was chosen as an accent color, which together with the pastel blue for input fields helps convey the retro feeling.
User Preference Testing
I conducted an A/B preference test of the item view screen using Lyssna, (formerly UsabilityHub).
I sought feedback on the design of the ingredients list. I experimented with a chalkboard look but was worried about the readability and the cohesiveness of design B. The user feedback confirmed that despite it being visually interesting, the cohesiveness was interrupted and it was not as easy to read.
Additional feedback stated the print and share buttons were too prominent, interrupting the flow of the page and the measurement unit toggle button drew too much attention with its color.
Option A
Option B
Revised Design
High-fi Wireframes
Image Credits
The new ESG website displays all image credits when hovering over the image.
