SPCA
SPCA
SPCA
Redesign of a local animal shelter’s
website and visual identity
Redesign of a local animal shelter’s
website and visual identity
Redesign of a local animal shelter’s
website and visual identity
Services
Services
Services
UX Research
UX Research
UX Research
Web Design
Web Design
Web Design
Brand Update
Brand Update
Brand Update
SPCA
January 2024
January 2024
January 2024
Tools
Tools
Tools
Figma
Figma
Figma
Notion
Notion
Notion
Live Prototype
Live Prototype
Live Prototype
01
01
01
02
02
02
03
03
03
04
04
04
05
05
05
Overview
Overview
Overview
Exploration
Exploration
Exploration
Updated UI
Updated UI
Updated UI
Brand Identity
Brand Identity
Brand Identity
Reflection
Reflection
Reflection
The Challenge
The Challenge
The Challenge
Lost in Disorganization
Lost in Disorganization
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 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 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
The Solution
The Solution
out with the old, in with the new
out with the old, in with the new
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.
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.
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
Exploration
Exploration
What’s getting in the way?
What’s getting in the way?
What’s getting in the way?
13
13
13
User Interviews & Feedback
User Interviews & Feedback
User Interviews & Feedback
1
1
1
Heuristic Analysis
Heuristic Analysis
Heuristic Analysis
3
3
3
Competitor Analysis
Competitor Analysis
Competitor Analysis
Discovery
Discovery
Discovery
Research, Research, Research
Research, Research, Research
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.
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.
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.
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.
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.
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.
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
Takeaways
Takeaways
the to do list
the to do list
the to do list
Lacking a "do something" moment
Lacking a "do something" moment
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.
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.
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
A Maze of Menus
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
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
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
Missing a personal touch
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.
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.
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
Before & After
Before & After
Adding Some Personal Touches
Adding Some Personal Touches
3
3
UI Updates
UI Updates
UI Updates
Problems are puzzles waiting to be solved
Problems are puzzles waiting to be solved
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.
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.
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.
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.
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.
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.
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
Brand Identity
Brand Identity
bringing back the personality
bringing back the personality
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.
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.
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
Fresh Challenges Ahead
Fresh Challenges Ahead
Another to do list
Another to do list
Another to do list
1
1
1
The Devil’s in the Details
The Devil’s in the Details
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.
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.
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
2
2
Shine a Spotlight on it
Shine a Spotlight on it
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.
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.
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
3
3
Still missing that personal touch
Still missing that personal touch
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.
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.
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
Iteration #2
Iteration #2
Changing up the vibe
Changing up the vibe
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
Reflection
Reflection
the updates just keep coming
the updates just keep coming
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.
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.
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.
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.
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
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
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
2025 Stephanie Dirpaul