Bun Bun Bakery
An online shop for the best cinnamon buns in town
What A local bakery had no online storefront. Customers could only browse and order in person, limiting reach to whoever walked through the door.
Why E-commerce for small local businesses shouldn't require enterprise platforms. A well-designed storefront increases reach and makes the purchase experience match the quality of the product.
How End-to-end design and build from paper prototypes through guerilla testing to a working Angular e-commerce app: product listings, cart, and checkout.
Background
This was my first foray into paper prototyping after joining the MHCI program. The project traced the full arc from a blank page through lo-fi paper iterations to a pixel-perfect working web app, which made the design evolution unusually legible. I could see clearly at each stage why lo-fi prototyping and guerilla testing are essential in the ideation and discovery phases: they surface structural problems before you've invested in visual polish.
Visual Language
Before touching wireframes, I developed a visual language for the design. I surveyed food-commerce apps and websites for inspiration and used Coolors to explore color palettes that felt warm and bakery-appropriate. The result was a palette built around cinnamon and cream tones, with typography that felt handcrafted without being precious.
Paper Prototyping
I created low-fidelity paper prototypes to validate the skeleton of the web app: the online shopping experience sketched out with paper, post-its, and sharpies. Two use cases grounded the baseline testing.
- Use Case 1Alex is a businessperson who knows exactly what she wants. She needs quick ordering and a custom order option.
- Use Case 2Pam is a business event organizer looking for reasonable catering offers. She prefers to bulk order for events.
Guerilla Testing
I ran guerilla testing sessions on the first iteration and collected three rounds of feedback that shaped the next version.
- Feedback 1The homepage carousel images don't make sense. Switch to full-bleed images instead.
- Feedback 2The final confirmation page doesn't reflect whether the user chose store pickup or delivery.
- Feedback 3The ORDER call-to-action isn't easily discoverable in this iteration.
Implementation
Once the paper prototypes were locked, I moved to high-fidelity static designs in Adobe XD, then built the working prototype in Angular 5 and TypeScript. The video below shows the final working prototype.