San Diego Animal Services
Date
June 2020
Scope
UX/UI, Web design
San Diego County Animal Services is the primary animal shelter and control agency in the county in coordination with San Diego Humane Society. Services provided include pet licensing, lost and found, adoptions, microchipping, spay/neuter, vaccination clinics, educational programs, and cruelty reports.
My goal with this project was to completely re-design the user interface of the website to increase the rate of adoptions and donations as well as build users’ trust and interest in the agency.
This project was completed as part of UCSD Extension’s UX Certificate Program.
The Challenge
Create a unique design to improve the site’s usability, emphasize greater trust in the agency, and increase the amount of donations/adoptions. The three main pages sampled in the UI redesign will be the homepage, adoptions, and lost pet information pages.
My Approach
Gather UX data through a site audit and user personas, create a prototype, then design UI.
User Personas
Designing with Older Generations in Mind
Because this website has a very large user base, being able to accommodate older generations’ needs is crucial. To ensure I make their experience as seamless as possible, I conducted some research on the best practices in digital design for seniors. The key takeaways are as follows:
Use clear navigation structure, larger UI design elements, and choose distinctive colors.
Use standard icons and navigation patterns, such as the top horizontal bar that visualizes all options at once or breadcrumb navigation that guides users towards specific locations with few clicks needed.
Use a minimum of 14pt for font size. Use boldface to emphasize content, and avoid using italic. Avoid long blocks of text by breaking copy into chunks wherever possible.
Wireframe
After analyzing all of the data from the UX research, I created a list of relevant visual themes and effective copy guidelines for the new website. This will facilitate writing a new content structure and designing high-fidelity wireframes.
Style Guide
Because of the site’s government association and the goal of increasing trust with its audience, I went with a classic deep blue theme. Blue is closely associated with feelings of trust and stability and is commonly associated with intellect and competence. By using a color so strongly and commonly liked to dependability, the agency can ensure that people can rest easy, relying on them to do their jobs effectively.
High Fidelity Wireframe & Prototype
