Toronto Cupcake Redesign

Background & Objective

This project aims to document the workflow in redesigning an existing webpage by integrating UI principles of learnability, usability, and memorability.

The webpage chosen for the redesign is the landing page of Toronto Cupcake, an online cupcake ordering and delivering service. This page was selected due to its potential for improvement in navigation and layout. The goal is to enhance the user experience when interacting with the page. This is achieved by analyzing the original website, prototyping low-fidelity and high-fidelity mockups of the landing page, and coding a responsive design with HTML and CSS.

Accessibility

Accessibility enables individuals with diverse abilities to effectively use an interface. As part of the analysis process, I first put the orignal webpage into WebAIM WAAVE, a tool to help detect possible accessibility problems

The tool notes the following issues for the webpage:
- Multiple links go to the same URL
- Some link-texts contain information that are out of context
- Menu bar cannot be easily accessed
- Alternative text is present for an image that is within a link

These are all points that need attention during the early stages of the redesign process.

Wireframing

Below is an image of the original landing page. The interface lacks a central hub to navigate through the site and is instead locked away through a small menu bar that can be easily missed. The content displayed throughout the page lacks structure and is disorganized.

I created three wireframes (desktop, tablet, and mobile view) to help simplify the landing page while keeping the site's main purpose and functionality. The major changes include simplifying the overall features, making the navigation and footer selections more distinct, reforming the hierarchical strucutre, and organizing the overall layout of the interface. These changes decluttered distracting content and unnecessary information, optimizing the user flow of the page.

Here is the complete scrolling wireframe view for the redesigned webpage.

Behind the Design Concept

UI Principle	Original Interface	Redesigned Interface
Intuitive Design	Redundant features located in various parts of the page make it difficult to understand the difference between them and which one to click on.	A centralized and more simplified navigation bar and footer section were introudced to reduce cognitive load. Some of the components were taken out so that less effort is spent to browse through the site.
Readability	There is a lack of spatial relationships between items on the page to cohesively present the main purpose or selling point of the company.	The content of the page was restructured based on importance to help draw attention to significant pieces of information that aid the scanning of the page.
Consistency	The inconsistent elements (language, layout and design) of the site make users feel that they have little snese of control, familiarity, and reliability.	Patterns in button arrangement, language, text, and image placement were integrated to instill more comfort in users and allow them to apply the same knowledge to other parts of the page.
Ease of Use	The ambiguous and inconspicuous links that advertise personalized cupcake deliveries make it difficult for users to discover these options or understand them.	Subtitles and descriptions/icons before each button / link were added to make these options more apparent and clear to users. A scrolltop was also added so that users can find information more quickly.

Visual Design Style

After creating the different wireframes, a rough visual design style guide to display the main colors, typography, and reusable components’ different states (buttons on hover, click, etc.) were determined.

These choices were heavily inspired by the original webpage. However, the style guide reworks the color pallete and text in order to display a common theme.

High-Fidelity Redesign

Next, a high-fidelity mockup of the landing page was constructed.

Responsive Redesign & Annotated Mockup

A responsive website was created to maintain the visual appeal across the three different screen sizes mentioned earlier (desktop, tablet, and mobile). A high-fidelity prototype was created for each of the screen sizes.

Below are annotated mockups of how elements of the interfaces respond to their corresponding screen sizes.

Final Redesigned Website

The finalized redesign focuses significantly on eliminating ambiguous aspects of the original site. A more accessible navigation bar and footer were worked into the new interface. The structure of the original webpage was reconstructed so that clear strucutres and categories were presented, allowing the flow of the page to come to life.

Click here to access the final redesigned Toronto Cupcake landing page.

Lessons Learned & Afterthoughts

From ideation to creating low-fidelity and high-fidelity mockups, a responsive redesign of the Toronto Cupcake landing page was developed. The site has design features that can be improved. By redesigning the webpage, I gained first hand experience on understanding how usability and accessibility is integrated into the design process.