Elevating brand and web navigation for a local animal sanctuary to boost online visibility.
Elevating brand and web navigation for a local animal sanctuary to boost online visibility.
MY ROLE(S)
MY ROLE(S)
UI/UX Designer, sole Visual Designer
UI/UX Designer, sole Visual Designer
TEAM
TEAM
1 UX Researcher, 2 UI/UX Designers, 1 Web Developer, 2 Marketing Strategists
1 UX Researcher, 2 UI/UX Designers, 1 Web Developer, 2 Marketing Strategists
TIMELINE
TIMELINE
8 Weeks (June > August 2023)
8 Weeks (June > August 2023)
TOOLS
TOOLS
Figma, Zoom, Squarespace
Figma, Zoom, Squarespace
PROJECT OVERVIEW
PROJECT OVERVIEW
San Diego Animal Sanctuary (SDAS), a 501(c)(3) volunteer-run non profit founded in 2021, rescues and provides sanctuary to animals in need, offering a second chance at life to those facing euthanasia, homelessness, neglect, or abuse.
San Diego Animal Sanctuary (SDAS), a 501(c)(3) volunteer-run non profit founded in 2021, rescues and provides sanctuary to animals in need, offering a second chance at life to those facing euthanasia, homelessness, neglect, or abuse.
However, in their infancy, SDAS faced challenges in attracting donors, fosters, and adopters due to issues with web retention and lack of recognizable brand to form trust with potential community members.
However, in their infancy, SDAS faced challenges in attracting donors, fosters, and adopters due to issues with web retention and lack of recognizable brand to form trust with potential community members.
THUS WE ASKED,
THUS WE ASKED,
How might we improve SDAS’s outreach by addressing website and community challenges, and establishing a trusted brand to attract donors and support?
How might we improve SDAS’s outreach by addressing website and community challenges, and establishing a trusted brand to attract donors and support?
1/ UNDERSTANDING THE PROBLEM
1/ UNDERSTANDING THE PROBLEM
RESEARCH PROCESS
RESEARCH PROCESS
How did we approach this problem space?
How did we approach this problem space?
We began to tackle our problem statement by aiming to understand our target users through a variety of research methods. I contributed at each method and independently conducted the brand competitive analyses, as the main visual designer.
We began to tackle our problem statement by aiming to understand our target users through a variety of research methods. I contributed at each method and independently conducted the brand competitive analyses, as the main visual designer.
CLIENT INTERVIEWS
Talked to Sabrina, founder of SDAS to understand pre-existing concerns
USER INTERVIEWS
Interviewed 11 users to gather insights on interactions and impressions of original site
SECONDARY RESEARCH
Conducted website and brand competitive analyses to identify design opportunities
CLIENT INTERVIEW
Talked to Sabrina, founder of SDAS to understand pre-existing concerns
USER INTERVIEWS
Interviewed 11 users to gather insights on interactions and impressions of original site
SECONDARY RESEARCH
Conducted website and brand competitive analyses to identify design opportunities
INSIGHTS
INSIGHTS
Turning pain points into design opportunities
Turning pain points into design opportunities
I synthesized our findings into top insights to better guide our next steps:
I synthesized our findings into top insights to better guide our next steps:
WEAK BRAND (VISUAL IDENTITY)
SDAS lacks a cohesive brand across its platforms, which can affect trust and retention.
REFRESH
Create a strong, memorable brand to attract adopters, fosters, and donors and retain attention.
INCONSISTENCY (UI)
SDAS lacks a proper design system leading to bad accessibility and inconsistent buttons, colors, etc.
STANDARDIZE
Establish a reusable UI kit and standardize design components across website
POOR NAVIGATION (UX)
Website is hard to navigate to find available dogs and communicate impact to users.
PRIORITIZE CONTENT
Reorganize content to prioritize available dogs and call to actions. Highlight success stories.
2/ DESIGNS
2/ DESIGNS
VISUAL IDENTITY
VISUAL IDENTITY
From ruff to fluff: a strong, memorable brand to attract adopters, fosters, and donors.
From ruff to fluff: a strong, memorable brand to attract adopters, fosters, and donors.
As the sole visual designer, I gladly accepted the challenge to establish SDAS’s new visual and brand identity. Sabrina expressed a strong desire for a brand that pays homage to the city of San Diego and the color turquoise. The new identity conveys a playful, humane, welcoming atmosphere to represent San Diego Animal Sanctuary and their mission.
As the sole visual designer, I gladly accepted the challenge to establish SDAS’s new visual and brand identity. Sabrina expressed a strong desire for a brand that pays homage to the city of San Diego and the color turquoise. The new identity conveys a playful, humane, welcoming atmosphere to represent San Diego Animal Sanctuary and their mission.
OLD
NEW
LOGO REDESIGN
The deep teals and golden hues I’ve chosen evoke the tranquility of nature and sunsets on the beach, a San Diego signature. These colors also passed the WCAG 2.0 color contrast guidelines.
The deep teals and golden hues I’ve chosen evoke the tranquility of nature and sunsets on the beach, a San Diego signature. These colors also passed the WCAG 2.0 color contrast guidelines.
For our font selection, I opted for Plus Jakarta Sans, a modern typeface that strikes a perfect balance between legibility and approachability.
For our font selection, I opted for Plus Jakarta Sans, a modern typeface that strikes a perfect balance between legibility and approachability.
Headers
H1 Bold (64 px)
H2 SemiBold (40 px)
H1 SemiBold (24 px)
H1 Bold (24 px)
Weight
Plus Jakarta Sans
Aa
Bold
Aa
Semibold
Aa
Regular
Body
Regular (24 px)
Lorem ipsum dolor sit amet. At perferendis odio vel rerum omnis et veniam iusto. Et provident molestias non assumenda possimus ut repellat earum.
Regular (16 px)
Lorem ipsum dolor sit amet. At perferendis odio vel rerum omnis et veniam iusto. Et provident molestias non assumenda possimus ut repellat earum.
Regular (12 px)
Lorem ipsum dolor sit amet. At perferendis odio vel rerum omnis et veniam iusto. Et provident molestias non assumenda possimus ut repellat earum.
Typography
Headers
H1 Bold (64 px)
H2 SemiBold (40 px)
H1 SemiBold (24 px)
H1 Bold (24 px)
Weight
Plus Jakarta Sans
Aa
Bold
Aa
Semibold
Aa
Regular
Body
Regular (24 px)
Lorem ipsum dolor sit amet. At perferendis odio vel rerum omnis et veniam iusto. Et provident molestias non assumenda possimus ut repellat earum.
Regular (16 px)
Lorem ipsum dolor sit amet. At perferendis odio vel rerum omnis et veniam iusto. Et provident molestias non assumenda possimus ut repellat earum.
Regular (12 px)
Lorem ipsum dolor sit amet. At perferendis odio vel rerum omnis et veniam iusto. Et provident molestias non assumenda possimus ut repellat earum.
Typography
To foster (ha, get it?) a sense of fun and playfulness, I also created custom illustrations that we utilized across the website.
To foster (ha, get it?) a sense of fun and playfulness, I also created custom illustrations that we utilized across the website.
UI KIT
UI KIT
A cohesive UI kit and that delivers a consistent user experience.
A cohesive UI kit and that delivers a consistent user experience.
Standardizing design components utilizing the new brand identity streamlined the development of desktop experiences. Take a glimpse:
Standardizing design components utilizing the new brand identity streamlined the development of desktop experiences. Take a glimpse:
WEBSITE
WEBSITE
An intuitive site highlighting rescues, impact, and how to help.
An intuitive site highlighting rescues, impact, and how to help.
With a clear visual identity and reusable design components, we revamped the website to prioritize rescue dogs, impact, and ways to help—foster, donate, adopt—by focusing on information hierarchy.
Features:
- About page: Mission statement and success stories
- Adopt/Foster page: Easy-to-use sort & filter bar to narrow down the search for animals
- Pet Profile: Details of chosen pet
- Donate page: Multiple ways to contribute
With a clear visual identity and reusable design components, we revamped the website to prioritize rescue dogs, impact, and ways to help—foster, donate, adopt—by focusing on information hierarchy.
Features:
- About page: Mission statement and success stories
- Adopt/Foster page: Easy-to-use sort & filter bar to narrow down the search for animals
- Pet Profile: Details of chosen pet
- Donate page: Multiple ways to contribute
3/ PAWS AND REFLECT
3/ PAWS AND REFLECT
What's next? Product shipped!
What's next? Product shipped!
Working alongside our web developer, we successfully implemented our redesigns through Squarespace and the website is live!
Working alongside our web developer, we successfully implemented our redesigns through Squarespace and the website is live!
Be quick on your feet.
Be quick on your feet.
Communication with stakeholders will not always be consistent. Sometimes, you’re given the reins unexpectedly, and it’s important to be able to proceed without someone holding your hand along the way. Adaptability is key!
Communication with stakeholders will not always be consistent. Sometimes, you’re given the reins unexpectedly, and it’s important to be able to proceed without someone holding your hand along the way. Adaptability is key!
Be proactive!
Be proactive!
Pro bono work has shown me that you get back as much as you put in. Wanting to push my skills, I made an effort to wear different hats throughout the project. I’m glad I got to contribute to a variety of deliverables, including research resources, website wireframes, logos, design components, and illustrations
Pro bono work has shown me that you get back as much as you put in. Wanting to push my skills, I made an effort to wear different hats throughout the project. I’m glad I got to contribute to a variety of deliverables, including research resources, website wireframes, logos, design components, and illustrations
MORE WORKS
Leading visuals & growing UCSD’s largest design community
Volunteering design work for various initiatives and orgs