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, FigJam, Balsamiq, Exacalidraw
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.
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
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.
A Tip from a Developer: Designing Timers That Actually Work
While designing Loafly, I envisioned timers guiding users through each baking step—stretching dough, resting, baking, and more. But during consultation, a developer pointed out something crucial:
“Your timer might stop working the moment a user closes the app—especially on iOS.”
That insight led to a deeper understanding of how timers behave across mobile platforms, and how UX has to account for technical constraints:
01. Background tasks are tricky
Standard timers like setTimeout can pause when the app is minimized or the phone sleeps. To maintain accurate timing, we’d need platform-specific solutions like background services, notifications, or even silent push alerts.
02. Local notifications are key
We decided to use local notifications as reminders when a baking step is done. This way, users could be nudged even if they left the app ("Time for your stretch & fold!").
03. Give users control
The developer suggested adding options to pause, reset, or edit timers, since real-life baking isn’t always exact. That helped us build more forgiving, flexible UX.
Sitemap
Structural Breakdown
This sitemap defines the core structure of a bread baking app built around clarity and ease of use. Guided by earlier feature decisions, users can browse recipes, adjust ingredient ratios with a calculator, manage personal bakes, and access educational content.
To support just-in-time learning, I introduced contextual shortcuts—for example, users can quickly access the Learn section from Baking Mode when they need help with an ingredient or technique.
Information Architecture
User Flow & Task 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.
Developer Insight: Why “Edit Recipe” Isn’t So Simple
Lower-end devices may struggle with recipe editing, as it requires storing more data in the device’s cache — which can be limited on older phones.
Responsiveness may also be reduced on slower internet connections, due to the need to send multiple requests to a centrally located database rather than accessing data locally.
Low- Fidelity Wireframes
Translating Concepts into Screens
I visualized the gathered research insights and concepts in the first version of low-fidelity wireframes.
-
Version 1 won.
Feedback: Users often don’t open the app with a specific type of bread in mind. Highlighting suggested recipes with large, inviting photos on the home screen helps draw them in. -
Version 2 won.
Feedback: There’s no need to take up space with a category description below the image. -
Ver 2 won.
Feedback: In Version 1, if the ingredients list is long, users would have to scroll to reach the buttons. -
Ver 1 won.
Feedback: Step indicator at the top is clearer and it’s better to see the timer immediately rather than having to tap to open it.
#1 Usability Testing Mid- Fidelity Wireframes
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.
An issue worth considering
Are filters in this form necessary?
Calculator
The calculator is easy to find, and some participants would like it to be included on the recipe page as well.
An issue worth considering
Should a calculator be included on a recipe page? If so, where?
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.
This was also the stage where I started addressing insights that emerged during usability testing of the mid-fidelity wireframes.
I removed the filter feature in its original form (previously, a "Filters" button opened a separate filtering window), based on feedback about its limited usability.
To keep the recipe experience clean and focused, I decided not to embed the baker’s percentage calculator directly into the recipe page. Instead, I designed it as a standalone tool — optimized for planning and experimentation, without disrupting the core flow of following a recipe.
I added inline links to certain ingredients and technical terms used in the recipe — they now direct users to relevant articles in the Learn More section.
#2 Usability Test
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
What Users Said
Goals
Ensure users can easily access and understand searching for a recipe, using a calculator, the recipe page and baking mode.
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
By adding “Last view” suggestions users can easily go back to recipes they know but for some reason they haven't bookemarked them.
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
Repositioning the Timeline button — it now appears next to "Baking Mode" and "Edit" under the "How to make" section improved user flow and logical grouping, anticipating user needs for post-review recipe adjustments.
Outcome
Now the user has to click the arrow in Baking Mode to move to the next step instead of swiping. It’s a clearer and more direct method for users to advance through recipe steps.
Outcome
I removed the tip from the bottom of the calculator and placed it at the top of the page, linking it to 'Learn More'. It improved the discoverability and accessibility of the 'baker's percentage' tip.
Measuring an impact
To evaluate the effectiveness of the recipe flow, I introduced a lightweight success metric: a simple “Like” button on the congratulations screen.
This gave users a quick way to signal that the recipe had worked for them.
Reflection
While this approach highlighted success stories, it missed an equally important perspective: when things didn’t go as planned. If I were to revisit the design, I would add an option for users to indicate “Something went wrong.” Instead of leaving them in frustration, the app could respond with helpful suggestions based on common mistakes (e.g. dough not rising, incorrect timings). This would both support users emotionally by turning failure into a learning opportunity, and provide me with more balanced insights into how recipes perform in real life.
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
Why Loafly is unique?
01. Time as a design system
Loafly treats time not just as data, but as an integral part of the UI:
Custom baking timelines auto-generate based on the recipe.
Timers are deeply integrated, with local notifications and real-time step tracking.
Users don’t just read recipes — they move through time with them.
04. Built with UX–dev collaboration in mind
Loafly’s flow was shaped through close feedback from a developer:
Feasible timers and offline logic.
Scalable data structure for steps and timelines.
Thoughtful constraints on editing to prevent user confusion.
02. Baker's mindset, not just instructions
Most apps tell you what to do — Loafly teaches you why and how:
Technical terms (like “autolyse” or “stretch & fold”) are interactive and link to bite-sized educational content.
It’s not just an app; it’s a learning experience that grows with the user.
03. Minimalist, moment-based interface
Loafly focuses the user on the current step only — reducing overwhelm and distractions:
No endless scrolling through recipes.
No cluttered screens full of measurements and ads.
Every design choice respects the pace and mindset of slow, mindful baking.
Refections
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.
Next Steps
Personal Notes per Recipe
Next Tests
Gamification: Baking Achievements
Photo Log ("My Bakes")- Let users add 1–2 photos per bake, linked to the date + recipe.