Friends of Loudoun County Animal Shelter Website Redesign
Redesigned FLCAS Website
Problem
FLCAS is a volunteer based friends group that raises medical funds for sick animals. Their current website is disorganized and busy. Users find it challenging to donate, and to volunteer with the organization.
Scope
This project lasted about 4 weeks. My role was UX Designer Generalist and it consisted of gathering user research, usability testing, working on multiple reiterations of the final prototype, branding and UI elements.
Solution
Redesigned website that allows users to quickly identify FLCAS mission and to donate towards animals well being.
Design Tools
Paper prototyping, Sketch and Axure
Discovery
The project began with a usability test of the original website with 7 users to identify pain points and to complete a few simple tasks.
Users were asked to identify the mission and goals of FLCAS, locate volunteer opportunities and to make a donation. Average time to do each task was about 30 seconds.
Feedback
From the discovery phase key reasons were identified for why a user visits the FLCAS website.
1. To donate to animals medical care and needs
2. To adopt pets through Loudoun County Animal Shelter
3. To volunteer with FLCAS
This led to developing personas for each unique user type. Having volunteered at the shelter site I was able to speak with a few staff members as well to better understand the visitors and demographics. A large following on social media platforms like Facebook, Instagram and Twitter helped to spread the word of the friends group and through community events in the county.
Personas
Donor
Volunteer
Adopter
Research identified that a large user group are donors who are generally older that continually give towards animal medical needs and sponsor adoption fees. Without them FLCAS would not exist and be able to sustain paying for expensive veterinarian costs. Now it was time to do a further analysis of the current site.
FLCAS Home Page and Navigation Bar
From initial glance you can see that the page is extremely long that calls for excessive scrolling, the large animal photos are not clickable and excessive blank space.
Current FLCAS Website
Taking a deeper dive you can see that the navigation bar on the header of the page have some drop down tabs while others do not.
Most of the users tested saw the content on the drop down tabs but skipped viewing the content on the About Us, LCAS Animals and Donate pages because they didn't realize the tab was clickable for more content.
The order of the menu did not have an intuitive flow and often left users confused.
Wireframes
Having robust data in hand from the research phase the next step was to create wireframes with a rearranged navigation. The site was condensed by taking out redundant information about the shelter and e-commerce pet supply store advertisements that distracted the user and often caused them to leave the FLCAS website all together.
Information Architecture
To better visualize the layout of the new FLCAS site and to understand organizing content a site map was created. This also took into consideration an older and more seasoned set of individuals who would appreciate a site that was easy to navigate and allowed them to successfully donate.
Primary User Flows
Identified pathways depicted a user volunteering, donating and adopting through the new FLCAS website. These flows were based solely on a user clicking the navigation menu and not by accessing the quick photo links on the home page.
Prototyping
Armed with solid foundation for the layout of the website the next step was to take the paper sketches and work in Axure to design it further with payment pages and volunteer forms that had specific information regarding where the users money was going and more information about the volunteer roles.
Testing and Iterations
In the second round of usability testing a clickable prototype was presented to 4 new participants and led to further improvements for the final design.
The average time to do the 3 tasks of understanding what FLCAS does, volunteering and donating was reduced to less than 10 seconds from the general website findings as shown in the earlier part of the project.
FLCAS Home
"Change format of the text to single stacked making the flow of sentences easier to read."
Before
After
LCAS Friends
"Group two action items together making the selection process easier for users and break up the adoption information by separating each day out by lines."
Before
After
About Us
"List organization goals in bullet points for it to stand out on the page, change the subscribe text to uppercase letters for consistency in all buttons and add an image of a pet to breakup the extra white space."
Before
After
Style Guide
A style guide was created with some elements already being used by FLCAS such as the logo and brand colors. The addition of typography elements allowed for consistency in text throughout the website and overall added to the visual design elements needed for the high fidelity prototype.
Takeaways
What I have learned
-
FLCAS is currently undergoing a major change in management and looking for a new set of passionate volunteers that bring diverse skills focused around animal advocacy and fundraising.
-
Having multiple roles in the entire UX Design process taught me about managing time and being organized.
-
It was difficult to communicate with a client that is going through management changes and it caused some delays in finishing the project.
What I would do differently
-
I would have the client be more involved during the initial user research stages of the project.
-
I would coordinate time with the shelters photographer to get more images of current shelter pets and volunteers.