CLOSE
Get in touch
Thanks! Your message has been received
Oops! Something went wrong while submitting the form.
UX/UI DESIGN
Cakery
ROLE
UX/UI Designer (Individual project)
DURATION
July 2021
TOOLS
Adobe XD

OVERVIEW

Cakery is a responsive website that enables people to create their own custom cake. It also acts as a fictitious bakery shop that has a variety of pre-made cakes.
THE PROBLEM
People wanted an easy way of creating and ordering custom cakes
THE GOAL
Design a responsive website that will allow users to go through the process of creating their own cake

THE SOLUTION

Throughout this project, the main idea was to emulate a pizza shop’s process for creating custom pizzas. With that in mind, I conducted user interviews to really understand the users I'll be designing for and their pain points. With all the feedback I gained during these interviews, I started building out digital wireframes that adopted the look-and-feel of that "pizza shop" process, with the addition of the pre-made cakes section. These wireframes then became my lo-fi prototype (image below shows a few artboards from a larger set).
Link to lo-fi desktop prototype in Adobe XD
From there, I started working on creating my mockups. Once my initial mockups were created, it was time to work on my hi-fi prototype. This prototype focuses on the flow that allows users to create a two layer chocolate cake, with ganache, sprinkles and cookies.

Conducting a usability study on this prototype allowed me to change the layout of a few elements to better suit the overall flow and aesthetic of the site. It also allowed me to focus more on the aspects where users were having issues understanding what to do next.
Link to hi-fi desktop prototype in Adobe XD
Finally, once my hi-fi prototype was polished, I moved on to creating the mockups and hi-fi prototype for the mobile version of this site.
Link to hi-fi mobile prototype in Adobe XD

TAKEAWAYS

IMPACT
People can easily create their own custom cakes tailored to their liking
WHAT I LEARNED
Moving from a desktop layout to a mobile layout can be tricky. Space real estate is essential and plays a very big role when planning the layout of a responsive site
NEXT STEPS
Further refine and polish both desktop and mobile versions based on usability studies
Back to projects