Cupcake Creator Website

General Assembly Final Project

Problem: How do I use HTML/CSS and JavaScript learned from a frontend development course to create a website?
Other students used this opportunity to develop portfolio websites; however, I wanted to create a more engaging experience for users.

Cupcake Creator on desktop

I decided to design a cupcake creator that users could interact with to make their own unique cupcakes. This required not only frontend development skills, but also graphic design and user experience knowledge as well.

The interaction to create a cupcake is simple. First the user selects a color from a color picker and then chooses what part of the cupcake to alter. Next, users click to add different accessories to their now colorized cupcakes. And voila! The user has created a fun new friend.

Though there was no formal UX testing for my page, I did have some friends test it out and took note of their behaviors. One major issue I ran into was users not utilizing the arrows to move from screen to screen, but rather scrolling (espeically on mobile devices). In order to get the user to interact with the arrows, I used JavaScript to disable scrolling on the pages. Unfortunately, this may have not been the best solution since a user's natural instinct on their mobile devices is to scroll, but with the time constraints and the way my JavaScript worked, I needed the user to interact with the arrows in order to trigger the next screen in the creator.

Cupcake Creator on mobile device

Create Your Own Cupcake