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.
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.
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.
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.
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.