SPCA
Redesign of a local animal shelter’s
website and visual identity
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
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.
