Project Overview

As part of the course Programming Usable Interfaces, I designed and developed a cinnabon website using Figma, HTML, CSS, & JavaScript. The site is hosted on Github. The cinnabon prompt was assigned randomly, while each student had free reign over the design style and implementation choices.

Competitive Analysis

We began the process through a competitive analysis of three ecommerce websites that allowed for item purchasing. I focused on Laduree, COS, and La Colombe, and analyzed 2 strengths as well as 2 areas that could use improvement.

What I Learned from Competitive Analysis:
  1. Group similar items together to make it easy for user to browse.
  2. Headings such as ‘Customer Favorites’ help users better understand the product through recommended suggestions.
  3. Use of aesthetics through color, typography, and imagery establish the voice of the brand.

Low-fi Prototyping

1st Paper Prototype Did Not Follow Conventions.

Keeping the insights derived from the competitive analysis in mind, I created a very rough paper prototype that sought to include the components.

Homepage was a one-pager where all the products are laid out on one page, (since there aren’t many products). But when I tested this with a user, their immediate feedback was: “where is the all product page?”

She searched on the entire page for a link or a keyword. Yet all products are laid out on the page. It made me realize that it’s important to abide by common design conventions while designing interfaces, as users are accustomed to the sites they encounter and expect similar while browsing on your site.

More Fleshed-out Medium Fidelity Prototype to include the ‘All Product Page’.
Iterated on a 3rd Prototype that Refined the Details.

Visual Design

Using Visual Design to tell an Engaging Story.

In this high-fidelity prototype, I wanted to bring a whimsicial touch to the aesthetic of the site by incorporating my own digital illustrations and the design of the logo. Adding the visual language will set apart cinnabon from the rest of the competition, help tell an engaging story, as well as bring fun and personality to the mix.

High-fi Prototyping

Final Prototype
Revisions based on Heuristic Evaluation
Implementation using HTML, CSS, JavaScript, + Github

Coding this website was a big challenge in trying to replicate my design as closely as possible as well as trying to simulate an item purchasing experience by allowing the user to add products to their shopping cart.

On the single product page, user is able to select a glaze and add it to cart. As they select more glazes and add them to cart, the popup will display the glazes the user had selected. In the cart page the user is able to remove an item from the cart.

I used CSS grid to align all the components so the look is clean and streamlined across pages. It was also my first time learning how to code in JavaScript. I learned a lot about how the language works with HTML, such as using document.getElementById to pull html elements and using event handlers to handle input from user.

The most difficult thing for me was understanding the layers of logic that goes in towards building the local storage. I learned that the first thing to do is to store properties into objects as an empty array. In order to get what the user clicks, I push the target value from HTML into the empty array. Then this empty array is called by a function that sets its localStorage and gets its info. If I have more time, I would like to implement price and quantity into the selections.

My JavaScript page for Cinnabon

Final Design