Loafly
*
Loafly *
Overview
Especially during and after the pandemic, interest in baking homemade bread has significantly increased, particularly among millennials. This surge is part of a broader trend where individuals seek self-sufficiency and healthier eating habits. Many millennials are drawn to the art of bread-making as a way to develop new skills and enjoy wholesome, homemade products. This generation is already accustomed to technology and enjoys having everything in one place, like a mobile app, while at the same time valuing tradition and high-quality, authentic bread. Baking bread requires performing various tasks at specific time intervals, making it easy to get lost in the process.
Team
Individual, consulted with a developer
My role
Product Design, Research
Duration
Tools
Figma, ChatGPT
100h
Skills
User Research, Ideation, Interation, Design, Design System, Wireframing, Prototyping, Testing
The problem
Home bakers, especially beginners, often feel overwhelmed by scattered and complex baking instructions.
People who bake bread at home as a hobby or are just starting their journey with baking often get confused by instructions and recipes spread across different sources. They can easily get lost in managing all the dough resting times, and when trying to broaden their knowledge, they’re often met with materials that are too complex and overwhelming.
The Goals & Objective
Core Product Objectives for an Optimized Baking Experience:
Provide clear, step-by-step guidance with timers and visuals to reduce confusion.
Offer accessible tips, explanations, and tools like a baker’s percentage calculator.
Design a calm, intuitive interface to help users stay focused and organized.
The solution
Introducing “Loafly”, a mobile app designed for home bakers that guides users through the entire bread-making process.
Find the recipe that suits you best.
Finding the right recipe can be challenging and time-consuming. In Loafly, users can search for recipes in two ways: by browsing through categories or by using the search bar. The search bar offers suggestions based on the first few letters typed, helping users quickly find relevant recipes.
A clear and easy-to-use Baking Mode for use during the baking process.
Baking Mode breaks down each recipe into clear, manageable steps. Every step includes a photo, a timer, and a helpful tip to guide the user through the process. This makes it easy to follow along while baking, even with messy hands or limited time.
Calculator for more advanced bakers.
The app includes a calculator for working with baker’s percentages, designed for more advanced users who like to experiment with their own recipes. It helps calculate the exact amount of flour, water, and other ingredients based on the desired dough weight.
Let’s see how I got to the solution
Comparative Analysis
The Insights
Overcomplicated for Beginners
– Many features and instructions are overwhelming or unclear for novice bakers.
– There's often a lack of onboarding or simplified baking guidance.Too Much Text, Not Enough Visuals
– Instructions are text-heavy, making it hard to follow while baking.
– Missing step-by-step visuals or images to guide users through the process.Lack of Integrated Tools
– No or poor integration of helpful tools like timers, baker’s percentage calculators, or timeline planners.
– Users have to switch to other apps or do manual calculations.Poor Personalization & Search Experience
– Search functions are limited and not intuitive (e.g., no smart suggestions, filters by flour type, or image-based search).No Learning Support
– No clear way to learn more about baking techniques or ingredients within the app.
– Lacking beginner-friendly explanations or educational content linked directly to recipes.
Qualitative Research
Getting inside the user's perspective
Key objectives
Identify the biggest challenges home bakers face when making bread
Understand how beginners and experienced bakers approach the bread-making process.
Explore what tools or methods home bakers currently use to track recipes and baking steps and how they improve their baking skills
Identify the key features users would find most valuable in a bread-baking app
Details:
5 intervied
Age: 30-57
Diffrent levels of experience
Key insights from interviews
-
Bake for Control & Enjoyment
Most interviewees started baking to control ingredients, avoid store-bought bread, and enjoy the satisfaction of homemade baking.
-
Use Multiple, Uncentralized Sources
All interviewees mentioned using scattered sources like YouTube, books, or friends—none relied on one centralized app or platform.
-
Struggle with Time & Scheduling
The majority mentioned missing steps, difficulty fitting baking into their routines, or trying to align baking with cheaper electricity hours.
-
Identify as Beginners
Half of the interviewees consider themselves beginner bakers, even if they've baked for years—highlighting a lack of confidence and clarity.
The Discovery
"Sometimes I give up on baking because searching for a good recipe and fitting it into my daily schedule feels overwhelming."
Many home bakers feel overwhelmed by inconsistent recipes and struggle to fit the complex baking process into daily life—highlighting the need for a simple, guided tool that supports them every step of the way.
User Persona
Who am I designing for?
Based on all the insights gathered from the interviews, I created a user persona — a home bread baker and hobbyist. The user is not a complete beginner and already has some baking experience. However, certain steps are still challenging, and he struggles with planning his time to fit this hobby into his daily routine.
Needs
Tom needs a clear, structured baking process with reminders, easy-to-follow recipes, and simple explanations that fit into his daily routine and support learning without extra effort.
Customer Journey Map
Understanding the User’s Experience Step by Step
The customer journey map helped me visualize the process a home bread baker goes through, clearly highlighting the moments of irritation and frustration—especially when searching for the right recipe and trying to follow each step while keeping to the correct timing. It also shows what brings them joy—learning interesting facts along the way and achieving a successful, fresh bake at the end.
“How might we make bread-baking knowledge more accessible and less overwhelming for everyone?”
Defining the scope
Home bread bakers often face fragmented, overly complex resources and struggle to adapt baking processes to fit their daily routines. Many miss key steps due to poor timing guidance, while more advanced bakers lack tools to easily customize their recipes and enrich their knowledge in a way that feels friendly, not overwhelming.
Brainstorming
Based on the How Might We...? question I created, I conducted a brainstorming session with ideas for features in the app.
Feature decision
Features that make bread baking easier
I chose features that organize the baking process and guide the user through it without unnecessary information overload. They can easily find a recipe, quickly assess whether it fits into their daily schedule, and smoothly follow each step one by one.
Timers would only make sense if they could run in the background when the app is not in use (some breaks between baking steps last several hours). I consulted with a developer, and yes, this is technically possible using local notifications.
Information Architecture
User Flow Overview
While creating the task flows, I faced uncertainty about whether the calculator should be treated as a separate task flow or integrated into the baking path. After conducting additional research and asking follow-up questions to my interviewees, it became clear that the calculator should function as a standalone tool, separate from the recipe flow.
Low-Fi Wireframes
Translating Concepts into Screens
I visualized the gathered research insights and concepts in the first version of low-fidelity wireframes.
Time for the first tests.
Usability testing
Key findings
At this stage, I enhanced the designs with more detail and incorporated visuals to give a more complete impression of the app. Although not refined to high-fidelity standards, the mid-fidelity wireframes included all essential features and interactions, making them suitable for user testing. These are the key findings:
Usability Testing
-
Key Findings
At this stage, I enhanced the designs with more detail and incorporated visuals to give a more complete impression of the app. Although not refined to high-fidelity standards, the mid-fidelity wireframes included all essential features and interactions, making them suitable for user testing. These are the key findings:
-
Searching
Participants were looking for bread using the search bar. After prompting they used the filters to look for whole wheat flour bread.
-
Calculator
The calculator is easy to find, and some participants would like it to be included on the recipe page as well.
-
Baking
Participants liked the timeline feature but found it unclear.
They suggested adding calorie info alongside skill level and baking time.
In baking mode, returning to the full recipe isn’t possible—only one step back.
Users also wanted clickable ingredients or terms linked to explanations in the “Learn” section. One participant said, “If not everything is clear to me right away in the recipe, I give up and don’t feel like using it anymore.”
UI Design
Creating a visual style guide
This UI kit defines the visual identity and interface components for the Loafly app. It features a warm, earthy color palette with a signature bread-brown tone that reflects the heart of baking paired with clean Kollektif typography.
Recipe cards and step visuals support clarity and engagement, while consistent UI elements ensure a smooth, accessible user experience throughout the app.
High Fidelity Wireframes
Creating high- fi wireframes
I created high-fidelity wireframes following the first round of mid-fidelity testing. Based on the feedback gathered, I made improvements, selected typography, added inviting yet realistic images, refined the user flows, and polished the overall design to prepare it for the next round of testing.
Usability Test #2
Testing high-fedelity wireframes & Key insights
I tested the app with 5 people who already have some experience with bread baking.
Task flows
1. Search for a recipe “Whole White Bread”
2. “Bake” the bread using baking mode
3. Use the calculator to calculate baker’s percentage
Goals
Ensure users can easily access and understand searching for a recipe, using a calculator, the recipe page and baking mode.
What Users Said
I wonder how it would work if I searched for the type of flour rather than the specific name 'Whole Wheat Bread.
— Participant #2
I don't think swiping in Baking Mode is a good idea when my fingers might be covered in flour or wet. Clicking would be easier in that case.
— Participant #3
The tip linking to 'Learn more' about baker’s percentage should be at the top, because as a beginner, I have no idea what it is.
— Participant #5
Key Iterations
Outcome
Users can easily go back to recipes they know but for some reason they haven't bookemarked them.
I added “Last view” suggestions. I was thinking between "last viewed” and " most popular" but “most popular” are already on the "Explore" page.
Outcome
A dual-filtering system for search suggestions, allowing users to search by both bread names (sorted by frequency) and specific ingredients (e.g., flour type) by clicking on suggested terms
Search suggestions are still sorted based on the frequency of searches by application users. Bread names remained in the suggestions, but after confirmation from the developer that it was feasible, I added the option to search by ingredients.
Outcome
Improved user flow and logical grouping, anticipating user needs for post-review recipe adjustments.
Repositioned the Timeline button — it now appears next to "Baking Mode" and "Edit" under the "How to make" section.
Outcome
A clearer and more direct method for users to advance through recipe steps.
Now the user has to click the arrow in Baking Mode to move to the next step instead of swiping.
Outcome
Improved the discoverability and accessibility of the 'baker's percentage' tip.
I removed the tip from the bottom of the calculator and placed it at the top of the page, linking it to 'Learn More'.
Final Design
Loafly is a comprehensive mobile application designed for home bread bakers, aiming to simplify the entire bread-making process from recipe discovery to final bake. It empowers users to easily find suitable recipes and seamlessly integrate baking into their daily schedules.
Core features
Intuitive Recipe Discovery & Diverse Catalog
Advanced & Flexible Search Functionality
Guided Step-by-Step Baking Mode
Integrated Timelines for Efficient Planning
Smart Recipe Calculator for Customization
Accessible Educational Resources
Takeaways
The Loafly project marked my first comprehensive experience in designing an end-to-end application. It was an incredibly valuable learning journey that encompassed all key stages: from in-depth research and conducting user interviews, through usability testing, to the final high-fidelity wireframes.
A crucial element of this process was the continuous collaboration with a developer. Consultations at every stage of the project provided me with invaluable insight into the technical aspects of implementation. Furthermore, the fact that the developer is also a passionate bread baker enriched the project with a unique user perspective, allowing for the creation of solutions even better tailored to real-world needs.
What I liked the most
I enjoyed delving into a topic I had to educate myself on, such as all the bread-baking processes and the calculator, which made the user interviews truly interesting as they walked me through the entire process. Consulting with the developer at every stage of the project further enriched my understanding of the technical side, for instance, regarding local notifications to ensure the app's timer ran in the background while using the phone. And I can't help but mention that throughout the entire project, I was accompanied by the scent of freshly baked bread, which I could almost smell while browsing all those delicious-looking photos of baked goods.