MakeBake app
App that helps people customise bakery products, based on preferences and focussed on dietary needs
The problem
People who have dietary restrictions or specific requests often struggle to find suitable options that meet their needs.
The goal
The objective is to facilitate access to personalized bakery products that cater to individuals' specific preferences and tastes.
The solution
MakeBake offers a simple way for users to personalize their bakery items to match their preferences and dietary needs, ensuring a customized culinary experience.
Method ⚙️
User research 👥
Estimates suggest that between 30 to 40% of the global population currently experience some form of allergy, and this number appears to be increasing.
Persona 👥
In the user research phase, we created a persona to deeply understand the needs and pain points of our users.
User journey 🗺️
The user journey map has been essential to discover the point of view of the user, digging more into his pain points and finding new features that will be required by product.
Storyboard ✏️
The storyboard illustrates a common scenario where the MakeBake app proves invaluable to a user looking to customize and order bakery products for lunch.
Storyboards are invaluable tools for planning, visualizing, communicating, and problem-solving, making them essential in various creative industries and projects.
Competitors
audit 🔍
audit 🔍
Three direct competitors and one indirect. None of the competitors offers complete personalisation, just one has an app.
User flow 🗺️
Another important tool is the information architecture - which was initially on paper. It ensures users can quickly locate the information they need.
Paper wireframes 📄
The main focus was to create a flow to see if the user was able to understand the personalisation part and complete the task easily.
Low fidelity
prototypes 📏
prototypes 📏
Based on the paper wireframes, I developed the low fidelity prototypes of the main pages.
The main focus was to create a flow to see if the user was able to understand the personalisation part and complete the task easily.
Testing 🧪
Two rounds of testing: the first round users tested the wireframe, the second one they tested the high fidelity mockup.
The first round highlighted some issues with the flow and the need for more instructions during the process. The second round brought up some interesting features to be developed to make the user experience smoother.
Prototyping 🤖
The information architecture made it easy to lay down all the pages in Figma, also creating all the connections between the pages.
Iterations 🏗️
Based on the feedback that we received from the usability testing sessions, we iterated the pages and designed new bespoke components that went straight to our design system library.
Animations 🎬
Incorporating subtle animations can further enhance the overall experience, making the personalisation of the goods more enjoyable and engaging for users.
Style guide 📘
Challenges
1. The complexity
At some point the complexity of the process made me stop and rethink everything. Splitting the flow into new and recurring users helped to avoid the frustration of having too much or too little information.
2. The process
Multiple testing took place to make sure that the process was smooth and clear. Many amends followed until the final result. Diversifying the way we are communicating the process and the flow is making sure the message is coming through.
Learnings 🌱
User testing has been essential to find critical pain points and solve them easily and quickly improve the design and the user journey. Sometimes is useful to stop and rethink.
“Functional, practical.
I love the idea of customising the research with preferences and allergies.”
I love the idea of customising the research with preferences and allergies.”
Next steps 🛠️
Implement the ‘Pro' account in future updates.
Find new ways of improve accessibility