Vancouver Foundation – UI/UX Case Study

  • UI/UX design

Vancouver Foundation

In this UX/UI redesign case study, I tackled the website of Vancouver Foundation, a member of Community Foundations of Canada.

This organization supports local initiatives through financial and leadership contributions from community foundations across Canada.

Given the amount of information the website needs to provide, the challenge was to create a clear and organized navigation system that would help users easily find the information they need without feeling overwhelmed or confused.

Current Website

vancouver foundation

Improving Navigation and Redundancy

The navigation of the current website is confusing with too many links in the hero image. Moreover, some links are redundant and lead to the same page. It is important to declutter the navigation to make it easier for users to find what they are looking for.

Increasing Negative Space

One of the main issues with the current design is the lack of negative space between the elements, resulting in a cluttered and overwhelming appearance. The addition of more negative space can create breathing room and improve the overall readability and visual appeal.

Consistency in Visual Design

While the website includes many photos, the design does not exhibit consistency in their presentation. The use of inconsistent images can create a disjointed appearance and impact the overall user experience. A consistent approach to imagery, such as selecting images that match in style and size, can enhance the visual cohesiveness of the design.

Optimal Line Length for Text Blocks

Some of the text blocks in the current design span the full width of the page, resulting in a lengthy line length that can be difficult for users to read. Ideally, the line length of text should range between 45 to 80 characters per line to enhance the readability of the content.

My solution

Improved UX

To create a more organized and intuitive user experience, I reorganized the hero image links into three clear categories, making it easier for users to find the information they need. Additionally, I removed any redundant links to avoid confusion.

Increased White Space

To improve the visual appeal and readability of the website, I increased the amount of white space between elements. This gives the website a more sophisticated and modern look, and makes it easier for users to navigate and read the content.

Unified and Memorable Visuals

To create a more cohesive and memorable design, I used a single strong image that represents Vancouver and its community. This creates a consistent visual theme throughout the website, making it more visually appealing and engaging.

Optimized Text Line Length

To improve readability and the user experience, I adjusted the width of the body text to ensure an optimal line length of between 45-80 characters per line. This allows users to read the text more easily and efficiently, without straining their eyes or losing their place in the text.


New Design

Vancouver Foundation
Vancouver Foundation
Vancouver Foundation
Vancouver Foundation
Vancouver Foundation