Toronto Cupcake

Toronto Cupcake

Website Redesign

Website Redesign

Client

Toronto Cupcake

Services

UI & UX Design UX Research

Industries

Food & Service

Timeline

3 months

Meet the Project

Toronto Cupcake is a Small Business Cupcake shop located in Toronto. My group was tasked with the redesign of their website and User Journey.

Dashboard Sidebar Close Up
Dashboard Sidebar Close Up
Dashboard Sidebar Close Up

Project Summary

During my time in the Master of Digital Media program, my group was required to redesign a website of our choosing in my Interaction Design class. We were required to review the website and discover the pain points and interaction issues. We conducted user nine user interviews to learn what people wanted and did not want in an online cupcake shopping experience. We then compiled our findings in an Empathy Map, Customer Journey Map, and Final User Persona. We later crafted our POV & HMW Statement, Information Architecture, User Flow, and Wireframes (Desktop & Mobile). Lastly, we compiled our research and designs to create our final Mobile and Desktops designs and presented them to the class.

Interaction Issues

Toronto Cupcakes' current website is difficult to navigate, there are missing signifiers regarding cancelling pop-ups, and a few pages lead you to a dead end. The current site displays overwhelming amounts of information, and the font is small and hard to read. The website is not mobile-responsive as text gets cut off, and the cupcake images are rotated unnecessarily. There is no way to customize an order on the site, and without a contact form, you must call to place a custom order. The pricing system is confusing with no way to complete the purchase on-site (the payment is completed after your order has been submitted and sent via an invoice to your email).

User Research

We conducted interviews with nine interviewees and aimed to follow the user interview guidelines and focus on the why, when, where and how. Questions: 1. Tell us a little about yourself and your background. 2. Where would you say cupcakes rank on your list of favourite desserts? 3. When and why do you usually buy cupcakes? 4. What sort of cupcakes do you buy? (flavour/mini/regular/personalized or specially ordered cupcakes) 5. Which part of the cupcake do you prefer most? (frosting/topping/cake) 6. What are the key qualities of cupcakes for you? (dietary restrictions, design, taste, brand, price, etc.) 7. Where do you usually purchase cupcakes? (online or in-store?) 8. How important is it to you that your cupcakes are delivered on time? 9. What do you expect to the process to be during the payment process when buying cupcakes online? 10. What is the best online cupcake shopping experience you've had? 11. What is the worst online cupcake shopping experience you've ever had? 12. Thinking about both of these experiences, what are some key features you look for in an online cupcake store? Main Takeaways • Interviewees usually buy cupcakes for a special event • Interviewees prefer Red Velvet cupcakes • Interviewees have dietary restrictions • Interviewees strongly believe in on time delivery • Interviewees appreciate a quick and simple user experience • Interviewees get fustrated with extra steps when completing an order

Empathy Map

Full Dashboard
Full Dashboard
Full Dashboard

Persona

Customer Journey Map

Information Architecture

Extracted currency modules
Extracted currency modules
Extracted currency modules

User Flow

Full Dashboard with Sidebar
Full Dashboard with Sidebar
Full Dashboard with Sidebar

POV & HMW Statement

POV Statement: A working mother needs a quick and efficient way to buy custom gluten-free cupcakes in time for her daughter's 14th birthday party. HMW Statement: How might we design the cupcake customization process to be quick and comfortable?

Wireframes

Final Designs

Prototype

Mobile: https://www.figma.com/proto/h2740nRw0vGpsq9JMoSqsL/Toronto-Cupcake-WireFrame?type=design&node-id=588-19598&t=Rvbw89RlIPy1nhoa-6&starting-point-node-id=588%3A19598 Desktop: https://www.figma.com/proto/h2740nRw0vGpsq9JMoSqsL?type=design&node-id=588-37197&mode=design&t=798SbKBqpfgWXu3Z-6