Concept
An app that connects users with local bakeries offering discounted baked goods at the end of the day to help reduce food waste.
Goal
To create an intuitive, user-friendly app that makes discovering and purchasing discounted baked goods quick and seamless. It aims to build trust and engagement through clear visuals, easy navigation, and real-time updates from participating bakeries.
Duration
1 Week
Wireframing
Wireframing was the first step in this process because it allowed me to plan the app’s structure and user flow before focusing on visual details and content.
This helped me identify key features, organise content effectively, to ensure a logical, user-friendly experience.
Overall saving time and reducing revisions later in the design phase.
*Note: You can click and drag to look around the prototype. Feel free to explore and get a closer look!
Low Fidelity Prototyping
Low-fidelity prototyping followed wireframing to bring the app’s structure to life through simple, clickable layouts, allowing early testing the navigation and functionality of the main user flow.
This step helped me validate main user flow quickly, before investing time in high-fidelity visuals or detailed design.
*Note: Just like the last one, you can click and drag to look around the prototype.
Branding
Colour Pallet
#FFF6E6 (body background): A soft, warm cream that mimics the warmth of a bakery, providing a neutral, calming canvas that keeps the focus on product images and key content.
#FFBF62 (call-to-action buttons): A friendly, golden-orange that stands out, drawing attention to key actions, while reinforcing a sense of warmth and urgency without feeling aggressive.
#1E1E1E (text, icons, borders): A charcoal black that ensures high contrast and readability, offering a modern, clean look that complements the lighter palette and maintains visual clarity across all elements.
Why?
These colours balance warmth and clarity whilst creating a cosy, inviting atmosphere. Ensuring strong visual contrast for readability and intuitive navigation.
Typography
Roboto, Bold, 24px
Roboto, Semi Bold, 20px
Roboto, Medium, 18px
Roboto, Regular, 16px
Roboto, Regular, 12px
-
Roboto’s clear, open letterforms support readability at different sizes and for those with visual impairments. This helps ensure the app is inclusive and easy to navigate for a broad audience.
-
Using different weights and sizes within the same type family creates a cohesive visual experience that reinforces brand identity and makes the app feel more reliable.
-
Roboto adapts well across devices and screen sizes, maintaining legibility from headlines to subtext and supporting a responsive, accessible, and user-friendly design throughout the app.
High Fidelity Prototyping
High-fidelity prototyping came last. I added detailed visuals, branding, and realistic content.
This step allows for more accurate user testing by simulating the final product’s look and feel, helping to refine the interface, catch usability issues, and prepare the design for development.
Give it a Try!
Use my interactive prototype to try to order a Smarties cookie from Bakery Number 1. There is more than one way to complete this action, so explore freely.
Simply follow the steps as if you were placing a real order. Let me know how the experience feels!
For the best experience, please make the prototype full screen by selecting the icon in the top right corner.
*Note: This is a prototype, so not all features or interactions are fully functional.
Key Takeaways
This Project allowed me to apply a user-centred design process, from initial wireframing to high-fidelity prototyping. Strengthened my skills in creating intuitive and accessible interfaces with Figma.
It also helped me learn how to balance aesthetics with usability and incorporate brand identity through thoughtful colour and typography choices.
Lastly, I improved my ability to iterate based on user feedback to create a meaningful product that would support sustainability and waste reduction.