Toronto Cupcake Site

Toronto Cupcake Site

Website Audit and Redesign

Website Audit and Redesign

Problem

The original site suffered from several design and accessibility flaws and required a full-scale overhaul that focused on the local roots, cute aesthetics and delicious edibles created by Toronto Cupcake. The goal was to complete a full user experience audit and identify major flaws, and then fix these flaws to immediately improve the general user experience.

Methodology

Complete UX audit and identify major flaws.

Analyze nearby comptetitors and pinpoint strengths that can be applied to this site.

Design new user interface designed to be minimal, cute and functionally sound.

Methodology

Complete UX audit and identify major flaws.

Analyze nearby comptetitors and pinpoint strengths that can be applied to this site.

Design new user interface designed to be minimal, cute and functionally sound.

Methodology

Complete UX audit and identify major flaws.

Analyze nearby comptetitors and pinpoint strengths that can be applied to this site.

Design new user interface designed to be minimal, cute and functionally sound.

UX Research

To gain a better understanding of the pain points experienced by the company and the users, I conducted an audit of the existing site, analyzing the information architecture, navigation, general accessability (WCAG) and overall aesthetics.

UX Research

To gain a better understanding of the pain points experienced by the company and the users, I conducted an audit of the existing site, analyzing the information architecture, navigation, general accessability (WCAG) and overall aesthetics.

UX Research

To gain a better understanding of the pain points experienced by the company and the users, I conducted an audit of the existing site, analyzing the information architecture, navigation, general accessability (WCAG) and overall aesthetics.

Key Findings

There were a few key takeaways from the audit. They are described below in detail.

Quiet Assistant

The application should not present itself or its capabilities as super-human, but rather as a quiet assistant that runs in the background and assists only as needed. Think butler rather than supercomputer.

Respect Privacy

The data will need to be stored locally, on the device being used to run the application. Adhering to ethical guidelines and data protection policies will also be crucial to maintaining confidentiality. 

Proper Guidance

Understanding the app's capabilities and limitations will prevent users from asking it to complete tasks outside its purview and inevitably becoming disappointed, thus leading to algorithm aversion.

Transparent Loop

Having a human-in-the-loop system to verify and correct the AI as it analyzes user data will rectify any misleading statements it makes while also training the AI to do better in the future.

Navigation & Structure

The navigation and structure are intuitive, but they are not easily identifiable. For example, the menu bar is hidden under an icon on the homepage. Buttons cannot be selected and there is little guidance on where to click.

Aesthetics

The design is not visually compelling. The pictures are of poor quality and do not attract attention. The accents on the site are also simple, with little thought to incorporate a cohesive brand look.

Accessibility

The site is not equipped for users with accessibility needs. The contrast in some areas scores around 4.35:1, which fails some color contrast parameters. General spacing between elements is also poor.

Interactivity

The site is mostly functional. All interactive buttons work as intended. The cookies pop-up is the only button that doesn’t work, as interacting with the buttons does not eliminate the pop-up.

Key Findings

There were a few key takeaways from the audit. They are described below in detail.

Quiet Assistant

The application should not present itself or its capabilities as super-human, but rather as a quiet assistant that runs in the background and assists only as needed. Think butler rather than supercomputer.

Respect Privacy

The data will need to be stored locally, on the device being used to run the application. Adhering to ethical guidelines and data protection policies will also be crucial to maintaining confidentiality. 

Proper Guidance

Understanding the app's capabilities and limitations will prevent users from asking it to complete tasks outside its purview and inevitably becoming disappointed, thus leading to algorithm aversion.

Transparent Loop

Having a human-in-the-loop system to verify and correct the AI as it analyzes user data will rectify any misleading statements it makes while also training the AI to do better in the future.

Navigation & Structure

The navigation and structure are intuitive, but they are not easily identifiable. For example, the menu bar is hidden under an icon on the homepage. Buttons cannot be selected and there is little guidance on where to click.

Aesthetics

The design is not visually compelling. The pictures are of poor quality and do not attract attention. The accents on the site are also simple, with little thought to incorporate a cohesive brand look.

Accessibility

The site is not equipped for users with accessibility needs. The contrast in some areas scores around 4.35:1, which fails some color contrast parameters. General spacing between elements is also poor.

Interactivity

The site is mostly functional. All interactive buttons work as intended. The cookies pop-up is the only button that doesn’t work, as interacting with the buttons does not eliminate the pop-up.

Key Findings

There were a few key takeaways from the audit. They are described below in detail.

Quiet Assistant

The application should not present itself or its capabilities as super-human, but rather as a quiet assistant that runs in the background and assists only as needed. Think butler rather than supercomputer.

Respect Privacy

The data will need to be stored locally, on the device being used to run the application. Adhering to ethical guidelines and data protection policies will also be crucial to maintaining confidentiality. 

Proper Guidance

Understanding the app's capabilities and limitations will prevent users from asking it to complete tasks outside its purview and inevitably becoming disappointed, thus leading to algorithm aversion.

Transparent Loop

Having a human-in-the-loop system to verify and correct the AI as it analyzes user data will rectify any misleading statements it makes while also training the AI to do better in the future.

Navigation & Structure

The navigation and structure are intuitive, but they are not easily identifiable. For example, the menu bar is hidden under an icon on the homepage. Buttons cannot be selected and there is little guidance on where to click.

Aesthetics

The design is not visually compelling. The pictures are of poor quality and do not attract attention. The accents on the site are also simple, with little thought to incorporate a cohesive brand look.

Accessibility

The site is not equipped for users with accessibility needs. The contrast in some areas scores around 4.35:1, which fails some color contrast parameters. General spacing between elements is also poor.

Interactivity

The site is mostly functional. All interactive buttons work as intended. The cookies pop-up is the only button that doesn’t work, as interacting with the buttons does not eliminate the pop-up.

Prototype

Prototype

Below is a fully functional prototype of a new site design, with better accessibility and overall improved user experience.

Below is a fully functional prototype of a new site design, with better accessibility and overall improved user experience.