SPCA

Redesign of a local animal shelter’s
website and visual identity

Services

UX Research

Web Design

Brand Update

SPCA

January 2024

Tools

Figma

Notion

Live Prototype

01

02

03

04

05

Overview

Exploration

Updated UI

Brand Identity

Reflection

The Challenge

Lost in Disorganization

The local animal shelter in my area, SPCA, is well known for its charitable efforts, amazing care and love of all animals, but also for its outdated and confusing website. The current layout of the website is a stumbling block to the SPCA's goals of education and adoption.

The Solution

out with the old, in with the new

As an exercise in research and design, I embarked on a self directed journey to put the SPCA’s best foot forward. I utilized UX design to ease user navigation and improve website UI and reimagined branding to help show the company’s personality at a glance.

2

Exploration

What’s getting in the way?

13

User Interviews & Feedback

1

Heuristic Analysis

3

Competitor Analysis

Discovery

Research, Research, Research

To explore the problem, I conducted interviews with friends and family and analyzed Google reviews of the SPCA’s current website to assess its user reception. The feedback was consistent: the website was difficult to navigate due to multiple menus, making it challenging for users to find information among the overwhelming content.

A heuristic evaluation of various pages confirmed these issues, revealing a cluttered navigation system, hidden information, a lack of clear calls to action, and an outdated UI.

To gain further insight, I performed a competitor analysis of two direct competitors and one indirect competitor. This analysis not only reinforced the previously mentioned issues but also revealed that the SPCA's website lacked a strong brand identity and missed an opportunity to connect with its audience by showcasing its personality.

Takeaways

the to do list

Lacking a "do something" moment

The SPCA is a non-profit organization that relies on donations and volunteerism to run efficiently. Adding calls to action would encourage users to engage with the organization instead of treating the webpage as an information guide.

A Maze of Menus

Finding information proved difficult for most users. Streamlining the navigation system would make it easier for users to find information quickly and enhance the overall user experience

Missing a personal touch

Animals have so much personality to share. A company that cares and loves these animals should share their personality as well. Updating the SPCA’s current brand identity would help generate traffic to their website and shelter.

Before & After

Adding Some Personal Touches

3

3

UI Updates

Problems are puzzles waiting to be solved

After extensive research, iterations, and refinements, I began the redesign process with a focus on bringing the animals to the forefront of the SPCA’s website.

The primary goal in updating the UI was to create a streamlined navigation system, featuring a simplified header, a comprehensive footer, and clear page architecture to ensure easy user flows. I also organized and consolidated information across various pages to enhance clarity and accessibility.

In addition to addressing navigation, I tackled other key issues, such as implementing clear calls to action, updating the user interface, and adding visual appeal. While modernizing the design, I retained the existing brand colors and a similar logo to maintain the company’s strong, recognizable identity.

4

Brand Identity

bringing back the personality

After I tested and received feedback for this first iteration, I learned there was lots more work to be done. For this second iteration I focused on details such as alignment and spacing, clear calls to action, and showcasing the brand's personality.

Fresh Challenges Ahead

Another to do list

1

The Devil’s in the Details

In all my Figma finagling during the first iteration, I never learned about the power of grids. Alignment, spacing, and visual hierarchy were on the right track but needed another iteration.

2

Shine a Spotlight on it

While my first attempt at action buttons was admirable, they needed a revamp. My current buttons looked more like badges and users were a little reluctant to be called to action with this current look.

3

Still missing that personal touch

My first attempt at the rebranding brought more color than the original design but still felt very sterile and corporate. This still doesn’t embody the fun, playful nature of the SPCA’s main clientele and needed a major double look at.

Iteration #2

Changing up the vibe

After numerous iterations and testing, I tackled the UX issues by incorporating whitespace to minimize clutter, employing a grid system to ensure consistent alignment, and using text to establish a clear visual hierarchy.

Fleshing out the brand identity was the funnest part of this project by far. I brought in wavy section dividers for a more casual feel, played with variations of the main color palette to bring more life to the website, and selected a rounder serif and sans-serif typography to convey a friendly and welcoming tone.

5

Reflection

the updates just keep coming

This case study was a personal practice project and a thoroughly enjoyable experience. It focused on enhancing the SPCA’s essential user flows, including adoption, fostering, donations, contact, and company information. If the project were to continue toward publication, the next steps would involve designing and implementing application forms, expanding FAQ sections, creating blog page templates for community news, and integrating additional information currently available on the SPCA website.

As I’m documenting this case study, I can already see elements I would like to update. Most notably I would build upon the brand identity by designing a new logo suite with custom illustrations for social media and correspondence. These updates would not only elevate the customer experience but also increase the SPCA’s visual recognition at a glance.

Thanks for joining me

on this journey

Thanks for joining me

on this journey

Thanks for joining me on this journey

Stephanie

Dee

Dirpaul

SOCIALS

Stephanie DIrpaul is a Saskatoon based designer and developer. She is currently taking on freelance work and is always seeking out new, exciting projects and work opportunities.

COMPANY

Projects

Souris Flats Ranch

Gose Club

2025 Stephanie Dirpaul

Stephanie

Dee

Dirpaul

SOCIALS

Stephanie DIrpaul is a Saskatoon based designer and developer. She is currently taking on freelance work and is always seeking out new, exciting projects and work opportunities.

COMPANY

Projects

Souris Flats Ranch

Gose Club

2025 Stephanie Dirpaul

Stephanie

Dee

Dirpaul

SOCIALS

Stephanie DIrpaul is a Saskatoon based designer and developer. She is currently taking on freelance work and is always seeking out new, exciting projects and work opportunities.

COMPANY

Projects

Souris Flats Ranch

Gose Club

2025 Stephanie Dirpaul