Happy Cakes
A cheerful & engaging progressive web app for Happy Cakes
Client: Happy Cakes
Role: UI Designer
Software used: SketchApp, HTML, CSS/SASS
01
The Brief
Insight
My first task was to create a fun design of a cake product builder for a progressive web app. The cupcake character would start off sad, plain and undecorated. The users job was to make and decorate the cupcake. At each stage the user has choices to make and with every stage complete the character would get progressively happier. The final goal would be to finish making the cake and which in turn would make the cake character happy.
My second task was to build the app in flat HTML and SCSS. It would then be handed off to the senior developer who incorporated the elements/components into React.js.
02
UX Design
Delivering an App-like Experience
The Happy Cakes progressive web app needed to be responsive and intuitive, it needed to work just as well on mobile as it does on desktop. I experimented with various wireframe layouts and tested them with Invision's prototyping.
03
Toolkit
Branding
Happy Cakes is a light-hearted, cute app, I wanted to reflect this with soft pastel colours and the use of informal san-serif fonts.
CUTE CORAL
HEX: EF6A65
PEPPERMINT BLUE
HEX: ADE2FF
BANANA CUSTARD
HEX: FFFB97
BABY CARNATION
HEX: FFC2E1
PURPLE AMETHYST
HEX: E4B4FD
SPEARMINT GREEN
HEX: B5FFE3
04
UI Design
UI Asset Creation
Using the vector program SketchApp I created each UI component. These illustrations had to be recognisable even when viewed at small sizes, so designed illustrated them with a simplistic yet intuitive aesthetic.
05
Development
Using Code To Bring Happy Cakes To Life
I coded and styled Happy Cakes in HTML and SCSS, I then handed it off to the senior developer who incorporated the elements into React.js
06
The Result
The Birth of Happy Cakes
The result was a user friendly progressive web app which lead the user to intuitively follow each step and reach the end goal of creating a Happy Cake to share with others.
In the future this app could be developed further by adding more options and perhaps the theme could change between seasons/festivities like Christmas and Halloween.
