Humane Society of Silicon Valley (HSSV) - Website Redesign | Web | NPO | Animal Welfare
Website redesign to improve information architercture
Image credit: HSSV
My role
Defining project scope and strategy
Content strategy
Conducting research
Delivering solutions through UX design methods and techniques
Deliverables
Project Concept
MVP Scope
User Research
Competitive Analysis
User Flows & Wireframes
Style Tile
Hi-fi mockup
Specifications
Duration:
3 weeks
Tools:
Framer, Figma, Photoshop, Microsoft Suite
My Team
Jon Mori, Jordan Davis, Sean Eng, Michelle Yee
The Brief
This project was a part of of the Information Architecture and Interaction Design course at UC Berkeley Extension (UX/UI Design Bootcamp).
Humane Society of Silicon Valley (HSSV) is a non-profit organization in California with its headquarters in Milpitas. HSSV serves communities through providing pet adoption and extensive veterinary services.
The goal of this project was to redesign selected HSSV webpages with a focus on the Information Architecture (IA) improvements as well as responsive design.
My design process for the HSSV
User Research
Persona
Based on gathered data, I formulated the following Persona:
Key findings
The key findings from the cumulative research data:
Information Architecture (IA)
Since the purpose of the redesign was to improve information architecture of the HSSV website, we performed open group card sorting to gain a better understanding of the target users’ mental models to guide the restructuring of the website’s IA.
We created 62 cards to be sorted into categories and organized into logical hierarchy to evaluate the effectiveness of our proposed draft navigation.
The site map was finalized after analyzing the overall findings of the card sorting using affinity mapping technique and making necessary modifications.
Content Structure
Defining the target user group and the MVP service scope enabled us to refine the ways in which to differentiate the chosen service — pet adoption. By identifying the top features that add the most value to the user, we were able to create a preliminary skeleton of the page's contents.
Value Proposition 1 - Decrease the obstacles to pet adoption.
HSSV displays information on pet adoption that is easy to locate and interact with: HSSV shows users interactive pet adoption cards on the Home page as well as the Adopt webpage.
Value Proposition 2 - Offer tool to facilitate pet adoptions on the website: a pet gallery and an calendar to schedule a visit.
A gallery of available for adoption pets is easy to navigate, pet cards with options to schedule an visit/sponsor without a necessity to make a phone call, and plenty of ways to ask questions or share a pet profile.
Learning from the Competitors
We analyzed HSSV’s competitors via heuristic evaluation to gain insight from their strengths as well as their design weaknesses.
However, our main focus was to examine how the four top players in the pet adoption space structure their Home and Adopt pages.
Among the evaluated were two direct competitors — SFSPCA, Animal Care Center of the City of San Jose, and two indirect competitors — PetSmart Charities and Pet Place. Of the four, SFSPCA had the most compelling landing page, SFSPCA and PetSmart Charities had the best structure of their Adoption Center/Database pages, and SFSPCA and Pet Place scored high on their pet profile pages.
Comparison summary
The strongest webpages among the four competitors had almost 1:1 ratio of feature set to CTAs and concentrated the frequency of CTAs evenly throughout the product page and uniformed, attention grabbing pet catalogues.
Interaction Design
This step in our process marked the transition from Information Architecture to Interaction Design.
We first began by brainstorming ideas with our past learnings and findings in mind and sketching out some ideas.
We synthesized our best ideas and we defined the most important service of HSSV on which to focus for our redesign study — pet adoptions. We created user flow based on our research and selected critical user journeys.
HSSV's user flow for Pet Adoption page
Structuring the pet profile page
Pet Profile webpage is crucial to conversion rate of pet adoptions. This is why is was important to optimise the structure of this page.
The initial page structure of pet profile features was nearly 1:1 ratio between feature set and CTAs.
I opted to add various versions of CTAs increasing feature set-to-CTA ratio to 1:2. This allowed me to give users different ways to be proactive in acting on pet adoptions, but not to be paralysed by analysis and choice
Initial Pet Profile page structure vs revised Pet Profile page structure
Design & Development: Color me humane
Visual Design
We created UI style guide to emphasize HSSV basic characteristics: humane, friendly and approachable. The original HSSV website uses many colors that dilute it stylistically. We chose sky blue as the main color, with purple and warm orange for accents.
The new logo was given a colorful background; the typography was kept simple and easy to read with typeface Fira Sans for the text, complemented by fun and round Gluten typeface for the headlines.
Accessibility Considerations
We consulted WCAG SC Standards to assure that the design complies with best practices and meets accessibility requirements. Some of the practices we implemented: contrast b/w background and foreground, content spacing and heading, different designs for different viewport sizes, and labeled, scalable elements.
Design Iterations & Preferences Tests
Our focus in designing a hero space was for it to be informative and organized in such a way as to facilitate the discovery of high value features — donation button and adoption tiles — without problems.
Hero space preference test
“Here are two options of the landing page hero for HSSV. Which one does a better job in conveying what the website is about?
Feature layout preference test
Here are two options of a layout showing the content for a pet profile page. Which one does a better job of encouraging you to reach out and is easier to read at-a-glance?
Responsive Design
At desktop widths, we lowered a horizontal top navigation bar and gave it more visibility.
At mobile widths, the triple-bar icon summons a side drawer (aka slide-out menu) that covers an entire viewport.
Results
HSSV's desktop web pages before and after the redesign
HSSV Home page before
Original Home page vs. redesigned Home page
HSSV Pet Catalogue page before
HSSV Pet Catalogue page after
HSSV Pet Profile page before
HSSV Pet Profile page after
Prototype Demo
Potential KPIs
we could measure to analyze the effectiveness of our redesign:
Adoption Inquiry Rate: The number of adoption inquiries made per visitor. An increase would indicate that the redesign makes it easier for users to find information or feel more engaged with the pets.
Page Engagement Time: The average time users spend on the pet adoption pages.
Adoption Conversion Rate: The percentage of users who complete the adoption process or at least start an application. An improved conversion rate would show the redesign is effective in guiding visitors towards taking action.
Next Steps
Develop all the relevant CTAs on pet adoption pages
Iterate the information layout on Pet Adoption page
Enhance microinteractions throughout the pet adoption pages
Takeaways
Human-centric design is really an activity-centric design, hence, clear and effective call-to-action (CTA) buttons are of a paramount importance when it comes to website creation and/or redesign. That is why I focus on feature-to-CTA ratio in content structure.