Mafer's Backery
A boutique pastry shop aiming to enhance user accessibility to their delicious baked goods with just a tap on their phone. A detailed investigation was conducted to create a comprehensive case study, defining a high-fidelity prototype to present to the client.
01
User research
I conducted user research through local surveys to address the problem and develop a solution. Subsequently, I created an initial sketch and a low-fidelity prototype of the product to conduct a usability study and refine the product. Finally, I incorporated this feedback into my design and created a final prototype using Figma.
The personas were created based on a locally conducted study through surveys. This helped us narrow our focus and concentrate on addressing the key issues.
The identified problem is that users need an easily accessible app to make purchases more efficiently, with all the options that Mafer's Bakery can offer readily available.
02
Sketching
A sketch was created both on paper and digitally to explore different ideas and design a user-friendly app that addresses the identified problem and ensures user satisfaction with the results.
The same page layout was transferred to a digital low-fidelity prototype, where we simulated the general behavior of the app. Using Figma, we created the wareframes and established the necessary connections to ensure proper functionality.
03
Usability Study
We developed a usability study to utilize the base prototype. With family members and people familiar with the bakery, we conducted a moderated study where participants were given specific instructions (such as browsing the catalog and making a payment). We analyzed each user comment and documented all observations to refine the app further.
“Users are satisfied with the design but would appreciate more guidance throughout the process."
"Users want to improve the payment system by adding a confirmation step and offering more payment options."
“Users would like to have larger buttons for selecting dates and interacting with the map.”
We incorporated the feedback received to design a mockup that closely resembles the final product.
04
Final Prototype
Considering the feedback, we made the necessary changes and created a mockup to showcase our final product in a more advanced prototype. This stage defines the color palettes, images, movements, and animations, everything that brings the design to life.
