Website Mockup

OVERVIEW

This project is a figma redesign of the website Alley Cat Cafe, situated in the heart of Stratford. Through this project, I developed my efficiency and ability of using the program Figma, and developed my understanding of User Experience design and User Interface design.

YEAR

2025

ROLE

UI Designer
UX Designer

SERVICES

Personal Project

About the project

Goal

The original website - alleycatcafe.ca, had many unintuitive user experience design elements and most notably, a very poorly designed interface. Visually, it lacked cohesion, clarity, and hierarchy, so I redesigned its most notable webpages as a mockup to a potential final product for the business website.

Clarity and visual appeal is a very crucial element I honed in on when designing these pages, which I mainly achieved through effective page blocking and hierarchy, as well as creating a new colour pallete that matches with the aesthetic and mood the business was going for.

As a result of my work, my mockup of the redesigned website creates a much more cohesive and user-friendly experience for the viewer, which would increase website traffic as well as business cashflow due to effective placements of call-to-actions throughout the website.

Figma project: Redesign

image of second mockup page
image of third mockup page
image of fourth mockup page
PROBLEM AND RESEARCH

As seen in the image below (captured from the original site alleycatcafe.ca), the pages overall were formatted confusingly, the legibility of certain text was awkward, many of the images used felt out of place, and personally worst of all, the colour palette is very bland. As a viewer, I didn't feel any sense of warmth or welcome from the website, something that is crucial to translate to the user if you wish to have more customer business.

Hence, one of the main issues I tackled was redesigning the colour palette to better suit the mood the business wants to create. Personally, for a cat cafe, I immediately thought of warm browns and beiges, as they express warmth and hospitality, while also being closely associated to a cafe.

RESOURCES

A major crucial step before designing the final web mockup, was creating a site map to redesign the flow of the website and overall improve the site navigation for the user. In my redesigned sitemap, I completely removed two whole pages, while maintaining all important information.

The previous and current image also showcases early renditions of the colour palette I wanted to explore, but as I went further with the project, I made many revisions. The main reason for this is to emphasise the feeling of being in a cozy "alleyway" corner cafe (so using a darker theme with darker browns), as opposed to my initial palette of a warm autumn cafe (with lighter tones as shown with the sitemap). The final palette is showcased below.

Smooth Scroll
This will hide itself!

Website Mockup

OVERVIEW

This project is a figma redesign of the website Alley Cat Cafe, situated in the heart of Stratford. Through this project, I developed my efficiency and ability of using the program Figma, and developed my understanding of User Experience design and User Interface design.

YEAR

2025

ROLE

UI Designer
UX Designer

SERVICES

Personal Project

About the project

Goal

The original website - alleycatcafe.ca, had many unintuitive user experience design elements and most notably, a very poorly designed interface. Visually, it lacked cohesion, clarity, and hierarchy, so I redesigned its most notable webpages as a mockup to a potential final product for the business website.

Clarity and visual appeal is a very crucial element I honed in on when designing these pages, which I mainly achieved through effective page blocking and hierarchy, as well as creating a new colour pallete that matches with the aesthetic and mood the business was going for.

As a result of my work, my mockup of the redesigned website creates a much more cohesive and user-friendly experience for the viewer, which would increase website traffic as well as business cashflow due to effective placements of call-to-actions throughout the website.

Figma project: Redesign

image of second mockup page
image of third mockup page
image of fourth mockup page
PROBLEM AND RESEARCH

As seen in the image below (captured from the original site alleycatcafe.ca), the pages overall were formatted confusingly, the legibility of certain text was awkward, many of the images used felt out of place, and personally worst of all, the colour palette is very bland. As a viewer, I didn't feel any sense of warmth or welcome from the website, something that is crucial to translate to the user if you wish to have more customer business.

Hence, one of the main issues I tackled was redesigning the colour palette to better suit the mood the business wants to create. Personally, for a cat cafe, I immediately thought of warm browns and beiges, as they express warmth and hospitality, while also being closely associated to a cafe.

RESOURCES

A major crucial step before designing the final web mockup, was creating a site map to redesign the flow of the website and overall improve the site navigation for the user. In my redesigned sitemap, I completely removed two whole pages, while maintaining all important information.

The previous and current image also showcases early renditions of the colour palette I wanted to explore, but as I went further with the project, I made many revisions. The main reason for this is to emphasise the feeling of being in a cozy "alleyway" corner cafe (so using a darker theme with darker browns), as opposed to my initial palette of a warm autumn cafe (with lighter tones as shown with the sitemap). The final palette is showcased below.

Smooth Scroll
This will hide itself!

Website Mockup

OVERVIEW

This project is a figma redesign of the website Alley Cat Cafe, situated in the heart of Stratford. Through this project, I developed my efficiency and ability of using the program Figma, and developed my understanding of User Experience design and User Interface design.

YEAR

2025

ROLE

UI Designer
UX Designer

SERVICES

Personal Project

About the project

Goal

The original website - alleycatcafe.ca, had many unintuitive user experience design elements and most notably, a very poorly designed interface. Visually, it lacked cohesion, clarity, and hierarchy, so I redesigned its most notable webpages as a mockup to a potential final product for the business website.

Clarity and visual appeal is a very crucial element I honed in on when designing these pages, which I mainly achieved through effective page blocking and hierarchy, as well as creating a new colour pallete that matches with the aesthetic and mood the business was going for.

As a result of my work, my mockup of the redesigned website creates a much more cohesive and user-friendly experience for the viewer, which would increase website traffic as well as business cashflow due to effective placements of call-to-actions throughout the website.

Figma project: Redesign

image of second mockup page
image of third mockup page
image of fourth mockup page
PROBLEM AND RESEARCH

As seen in the image below (captured from the original site alleycatcafe.ca), the pages overall were formatted confusingly, the legibility of certain text was awkward, many of the images used felt out of place, and personally worst of all, the colour palette is very bland. As a viewer, I didn't feel any sense of warmth or welcome from the website, something that is crucial to translate to the user if you wish to have more customer business.

Hence, one of the main issues I tackled was redesigning the colour palette to better suit the mood the business wants to create. Personally, for a cat cafe, I immediately thought of warm browns and beiges, as they express warmth and hospitality, while also being closely associated to a cafe.

RESOURCES

A major crucial step before designing the final web mockup, was creating a site map to redesign the flow of the website and overall improve the site navigation for the user. In my redesigned sitemap, I completely removed two whole pages, while maintaining all important information.

The previous and current image also showcases early renditions of the colour palette I wanted to explore, but as I went further with the project, I made many revisions. The main reason for this is to emphasise the feeling of being in a cozy "alleyway" corner cafe (so using a darker theme with darker browns), as opposed to my initial palette of a warm autumn cafe (with lighter tones as shown with the sitemap). The final palette is showcased below.

Smooth Scroll
This will hide itself!

Create a free website with Framer, the website builder loved by startups, designers and agencies.