Toronto Cupcake
Designed a mobile-first bakery website to modernize brand presence and boost online orders by researching customer behavior and crafting an intuitive Figma prototype.
Team
Ghali Habti El Idrissi (UI/UX Designer & Brand Designer)
Discovery & Research
The Challenge
The existing website may have been outdated, lacking e-commerce functionality, not mobile-responsive, or failing to showcase the visual appeal of their premium cupcakes effectively, ultimately hindering their ability to expand market reach and increase online sales.
The Solution
A modern, visually-driven website redesign with seamless online ordering capabilities, high-quality product photography, clear categorization for different customer segments (event planners, businesses, individuals), and emphasis on their specialty offerings.
Target Audience
Cupcake Enthusiasts (40%)
Individuals who value quality ingredients and Instagram-worthy aesthetics
Event Planners (25%)
Professionals seeking reliable vendors for client events
Businesses (20%)
Corporate clients needing bulk orders for meetings and celebrations
Parents (15%)
Busy parents looking for convenient ordering for special occasions
Define
Existing Website's Pain Points
Analysis of www.torontocupcake.com identified key usability issues that needed to be addressed in the redesign.
No Call to Action on Home Page
It is hard to understand the website's purpose.
Solution: Add a button that takes directly to the product page.
Cart Navigation Issue
"Add to cart" button takes directly to the cart.
Solution: It should update the cart without taking you to it.
Missing Pricing Information
No price on the cupcakes product page.
Solution: Add prices next to pictures or top of the page.
Layout Inconsistencies
On the events page, holiday paragraphs and other elements not centered.
Solution: Center all elements to keep harmony.
Unprofessional About Page
The about us page looks unprofessional.
Solution: Add a smooth layout and information about the company and the owner.
Develop
Brand Strategy
Developed a fresh, modern brand identity that captures Toronto Cupcake's essence while appealing to a contemporary audience.
Brand Assets
Wireframes
Created low-fidelity wireframes to establish the website's structure, user flow, and key interaction points before moving to high-fidelity designs.
Home Page
Category Page
Products Page
About Us Page
Design Comps
High-fidelity design compositions showcasing the redesigned Toronto Cupcake website with modern aesthetics and improved user experience.
Home Page
Cupcake Page
Products Page
About Us Page
Deliver
Live Website
The final coded website, bringing the design to life with responsive HTML, CSS, and JavaScript implementation.
Print-Ads Mockups
Instagram Ads
