Enter the password:
The password is available in my CV


About Portfolio Resume Education and Jobs Presentations


Toronto Cupcake


Website redesign of the Toronto Cupcake bakery

 

Toronto Cupcake is Canada's first gourmet cupcakeries Since 2010. It offers over 1500 different combinations with various tastes and custom designs for events, with special packaging and delivery.

TC has already served several special clients including BMW, Coca-Cola, Bath and Body, YAMAHA, and many more.



















Prototype
(desktop)





Before
After




Duration

5 Weeks
 

Team

Collaborated with a peer
 

Role

User Researcher
UX/UI Designer

Tools

Figma, Google Forms, Miro, Photoshop, Power Point, Excel

Problem Statement


  1. Design problems:
    • UI design principles are not met in the website, and it does not offer a user-friendly experience.
    • Toronto cupcake website is not fully aligned with their business goals, does not reflect all features and facilities provided by the store.

  2. Functional problems:
    • It does not have the necessary options to make online ordering.
    • Although the store provides customize cupcakes, but it is not possible to do it through the website.








Redesign Goals


  • Increase accessibility and attraction of the website, and provide a better user experience
  • Reflect all services and products of the store on the website in a clear way
  • Make it possible to place all orders online, including the customized cupcakes









Discover




Business research

Interview & affinity

Survey

Heuristic & WCAG eval ①

Competitive analysis

Define






Persona development

User journey map

Develop





Info architecture

User flow

Sketch
Low-fid prototyping
Deliver






High-fid prototyping
Heuristic & WCAG eval ②

Discover
Business research

Interview & affinity map

Survey

Heuristic & WCAG eval ①

Competitive analysis

Define
Persona development

User journey map

Develop
Information architecture

User flow

Sketch

Low-fid prototyping

Deliver
High-fid prototyping

Heuristic & WCAG eval ②


Discover



In the discover phase, we started with business research to develop a good understanding of Torronto Cupcake business features such as origin, services, strength, and what they are proud of.

Then, we started the user research by conducting 5 interviews and surveying 42 individuals who were either a current or a potential users to get a better sense of what are the design problems in current website and what users want to see on the website.

We also performed a heuristic evaluation to understand what are the design problems in the current website.

Also, via competitive analysis, we learned about features that similar businesses offer on their websites.


Research Goals



During the interviews, we asked participants about their online shopping behaviors and motivations to improve their online shopping experience. We also observed how they interacted with the current design and gathered feedback to identify user challenges.

The main goals of user interviews and survey were to understand about the followings:









Business research

  • Toronto cupcake is Canada's first gourmet cupcake created by Michelle Harrison. It makes the tastiest cupcakes with high-quality ingredients and customers are very satisfied with fast, safe, and responsible delivery services.
  • It provides onsite marketing and event planning consulting
  • It has over 1500 combinations of cupcakes with standard offerings.
  • Customers can make customized cupcakes by their own design.
  • It has some special clients such as BMW, Coca-Cola, Bath and Body, TV5, Android, and YAMAHA etc.



Nevertheless, the website could not attract new customers who have not any experience in getting services from the bakery and have weaknesses to show all products, and services, ordering online, and all things that customer needs to place any kind of order such as customized order cupcakes.













Interviews & Affinity mapping



We interviewed 5 individuals.
Format of the interview was semistructured.
The following themes are extracted about the factors that are most important for participants:





Quote

❝ I prefer in store shopping to make sure about quality and see all option available ❞
Quote

❝ Customizing cupcake for my daughters’ graduation trough the website helped me a lot ❞
Quote

❝ Freshness and nice design can make me satisfy to always shop from one store ❞













Survey


In this survey, 42 individuals participated.



Main takeaways:

In purchasing cupcake, people care most about the followings (in order of importance):
  1. Flavor
  2. Quality
  3. Appearance and design
  4. Ingredients
  5. Price
Important factors that they will consider for selecting a cupcake shop are (in order of importance):
  1. Ingredients that they are using for their products
  2. Popularity
  3. Good customer services
  4. Variety of products
  5. And freshness



People would like to see the followings on the website of an online cupcake shop (in order of importance):
  1. Pictures of products
  2. Price
  3. Ingredients of each cupcake
  4. All products and collections to choose
  5. Easy payment method
  6. Reviews
About 70% of peaple would like to be able to customize their cupcakes on the website. They would like to be able to customize the following features (in order of importance):
  1. Flavor
  2. Special decoration
  3. Ingredients
  4. Size




Questions: Click on each question to see the results.












































Heuristic evaluation ①



Heuristic evaluation is a method of inspecting and evaluating the usability of a website, AKA “expert review” or “usability audit”. It involves specialists using general guidelines to assess user interface usability during separate walkthroughs and indicate the problems.

Ref: Lumsden, J. (Ed.). (2008). Handbook of research on user interface design and evaluation for mobile technology (Vol. 1). IGI global.



Main categories of the problems observed in Toronto Cupcake website



1

Visibility





  • Inappropriate (small) font sizes
  • Hidden information
  • The website could not highlight the prominent features of the shop, e.g., good customer service, high quality, delivery, etc.
  • Incomplete information about the cupcakes
2

Flexibility and efficiency of use





  • Inability to order some of the products online and customize them through website
  • Confusing categories
  • Unclickable/useless icons
  • Improper use of the navigation bar
3

Aesthetic and minimalist design





  • Inappropriate Typography
  • Text-heavy pages
  • Other Aesthetic problem such as low-quality photos, Inappropriate layout, etc.



A few examples of such problems are shown below:
















Web Content Accessibility Guidelines (WCAG) compliance evaluation ①


As a part of our evaluation of the current design, we checked the WCAG compliance.

The results show that the current design is not compliant with WCAG in color contrast and typography. Touch targets are good.



Before


Color contrast

Typography

Touch Targets













Competitive analysis










Define




Persona development














User journey map



The user journey map visually represents the various steps and touchpoints a user goes through when interacting with the website, from the initial visit to the completion of their goals:










Develop



Information architecture



Card sorting

To categorize the cupcakes properly, we conducted card sorting with 5 attendees.
The final categories are found as:

  1. Everyday cupcakes
  2. Holiday and special events
  3. Occasion
  4. Customize cupcake

 













Sitemap














User flow















Sketch



Homepage

 

All products page

 

Selected product page















Low-fidelity prototyping
















Deliver



High-fidelity prototyping



Initial version







Final version










Heuristic evaluation ②


As a follow-up to the Heuristic evaluation ①, we performed the second heuristic evaluation to ensure that our desing does not suffer from the previous problems.
In the following figures, some of the problems that were solved in redesign are illustrated.




(1) Before: Using hamburger menu instead of navbar (for which there is enough space) concealed the categories. (Visibility)

(2) Before: The hamburger menu contained confusing categories. (Flexibility and efficiency)

(3) Before: The position of the logo varies in different pages. (Consistency)

After: It is replaced with a well-designed navbar.


After: The categories of the products were refined via card sorting.


After: The logo is placed at the corner of navbar.









(4) Before: Text-heavy pages, bad layout for content and logos, small font sizes, etc. (Aesthetic and minimalist design)

After: Long texts were replaces with bullet points; logos are organized in a minimal layout; appropriate font size and face is used; as well as several other aesthetic changes.










(5) Before: There was no filtering or sorting option available. (Flexibility and efficiency)

(6) Before: User could not design the custom cupcakes on the website. (Flexibility and efficiency)

After: Filtering and sorting were added to products pages.


After: Users are able to create custom cupcakes through a few steps on the website.











Web Content Accessibility Guidelines (WCAG) compliance evaluation ②


As a result of our design, the accessibility of the product increased in color contrast and typography categories, and the final design is compliant with WCAG.


After

Color contrast

Typography

Touch Targets


Reflection



Lessons learned



During the course of this project, I learned the followings:

  1. Explored effective information architecture and content organization strategies to enhance accessibility.
  2. Recognized the impact of a well-designed navigation bar for easy access to information.
  3. Valued the importance of high-quality visuals and aesthetics in fostering user engagement and trust.
  4. Conducted heuristic evaluations and usability tests to identify and resolve issues.
  5. Adapted to unexpected changes and client expectations, understanding the iterative nature of the design process.


By reflecting on these lessons, I am equipped with a stronger foundation for future projects, enabling me to deliver even more impactful and user-centered designs.







What we can do next



Building on the knowledge and experiences gained from this project, I am excited to pursue the following goals and explore new opportunities:

  1. Conduct an assessment of the existing design and perform accessibility tests to ensure inclusivity of different groups of users.
  2. Enhance the flexibility of the customization feature, allowing users to easily order and apply custom-designed cupcakes with a wide range of design options.