Bun Bun Bake Shop

I designed and developed a website for Bun Bun Bake Shop, a fictional bakery store. After iterating through multiple prototypes and conducting user testing in between them, I implemented the pages in HTML, CSS, and a bit of Javascript. This project allowed me to learn and gain experience in front end web design.

Skills: UI Design (Balsamiq, Sketch, Invision), User Testing, HTML, CSS, Javascript

05-430: Programmable User Interfaces
January 2018 - March 2018
Individual Project


Project Goal

Bun Bun Bake Shop, a small (fictional) bakery in Pittsburgh, wants to expand its business to allow customers to order cinnamon rolls online and have them delivered. The cinnamon rolls come in six different flavors and for each flavor, customers should be able to select their glazing and amounts preferences. After iterating through multiple prototypes, I created webpages using HTML and CSS and practiced implementing a few features with Javascript.


Design Process

Paper Prototypes

 

User Testing

Using my paper prototypes, I conducted a couple of user tests, having the participants simulate the process of looking for more information about the bakery and purchasing an item. It was through the user tests that I realized some missing or confusing parts of my design, which I incorporated in my next iteration.

Medium-Fidelity Prototypes

Medium Fidelity Prototypes.png
 

High-Fidelity Prototypes

I also used Invision to replicate how the prototypes would interact and flow.

Heuristic Evaluation

Before coding the pages, I conducted heuristic evaluations with a couple of classmates, focusing on the heuristics of H2-1 Visibility of System Status, H2-2 Match Between System and Real World, H2-3 User Control and Freedom, H2-4 Consistency and Standards, and H2-8 Aesthetic and Minimalist Design. I made minor changes to my high-fidelity designs, incorporating the feedback I received.


Website Implementation 

HTML and CSS

I implemented the pages with HTML and CSS while ensuring that my code was well organized and in standardized style conventions.

 

Javascript Practice

Lastly, I gained a bit of practice with Javascript to make the website functional. I implemented a few shopping cart features, using JQuery and local storage.