We accomplished a UX Design Concept for Mobile and Web that appeals to people in Austin who need to access information. Humane Societies promote human and animal bonding through the compassionate care of the animals they protect. One user said, “Nobody loves their dogs like Austinites!” Please check out our much more modern website designs below.
Lead Researcher + UI Designer for "Volunteer" Pages for our Team of Three
For Austinites to be encouraged to foster, adopt and donate to Austin Humane Society (referred to as AHS), they need to feel a connection to the organization and accomplish navigation on the website to find the information they need easily.
Our goals are to utilize our research methods and to interview with stakeholders to create a user-friendly website that is easy-to-use and clear to navigate. Design a Web and Mobile website that would appeal to people in Austin who want to access information quickly, such as: How to Volunteer, Adopt, Foster and Donate.
I broke our research plan down into 4 categories to help us stay organized and set ourselves up for a successful delivery of the redesigned website and application.
We attended an official AHS event to see first hand how the company is run and imagine ourselves in their shoes for the afternoon. This allowed us to empathize with the organization, interview them, and understand their highest needs and see who their greatest competitors are. We spoke with the head of marketing for AHS, who gave us key insights about our user personas and what people most frequently use the website to accomplish.
Speaking with stakeholders about the final product was helpful to the success of our redesign.
From the results of the survey, to our early interviews with potential users, we were guided into making informed decisions for our design process. We discovered that the majority of animals owners in Austin adopted their pets and found them online. These exciting results helped guide us towards these four pages as our focal points.
Adopting
Fostering
Volunteering
Donating
The colors needed to stand out from the competitors and exude the fun and playful tone that was already exemplified in Austin Humane Society's branding. In our initial research the majority of our testers commented about how much they loved the colors on the page already, a user said they were, "bright, playful and fun!"
View Google Forms Survey
Information from the first set of wireframes was used to improve the navigation being that it was the biggest identified pain point. It was quickly discovered through a few rounds of usability testing that a more compact and less busy navigation helped the user process the high volume of information on AHS.
Early testing also helped inform a cut down and cleaner style guide to reduce visual overload on AHS.
"The whole page is lighter – even the word count has dropped by 25%. After an improved top navigation, the carousel is dropped in exchange for a smart, professional and inspiring illustration – and more organic shapes – with a bold value proposition and call to action. The carousel has been dropped in exchange for a single hero video, adding movement and life to this primary graphical element."
Ultimately, my goal while designing is to respect peoples time, so we choose to display all the categories at once to save them multiple clicks.
We had the option to show a single drop-down for each of the secondary categories. This however, took testers a fair bit of time to go through and find the information they were asked to locate.
We identified that when we displayed all the categories at once, it made it easier for our testers to do tasks as a result of it being easier to scan.
Examining our iterations enlightened our need for modifying the language and display of information. AHS offers local events, programs, and resources for pet owners not everyone may know about. We interviewed and then extracted that data onto individual post-it notes – distilling all of that data, until we arrived at our insights and moved to design.
To grow the subscription counts, we included an easy call-to-action for people to subscribe to the newsletter. Having a newsletter is still one of the best methods for gaining more followers. When AHS, or other social change organizations, gain more brand awareness, they increase the shelters effectiveness and save lives.
Opportunity to highlight how to adopt, donate or foster was a priority for the redesign seeing that these are the three main reasons people navigate the website. Using data from our competitive analysis, we identified the following threats and opportunities. Through user interviews and feature analysis, we discovered our strengths and weaknesses.
Jenna, our user persona, was created by a combination our early user interviews. She is on her way to preparing her home for a dog she is fostering through AHS. We learned to work together as a strong team by communicating honestly during our design sprints and stand-up meetings. We took on more work when someone was struggling and had each others back from beginning to end. Our empathy map was inspired by Jenna's emotional journey mapping.
View Heuristic Evaluation
Conducting heuristic evaluations confirmed what the original testers said about the AHS website's use of white space, content overload, and inconsistent navigation. The finalized design elements emphasized playfulness and simplicity while remaining true to the primary colors used on the original AHS website.
When producing wireframes, addressing the confusing display hierarchy in the home page, was the primary focus to alleviate the majority of concerns.
After usability testing we discovered that users expected and desired a search functionality in the navigation. It was also mentioned that, having adopt, foster and volunteer near the top of the home page, in the hero section, was repetitive.
When you get to the home page, you are "greeted with a full screen pop-up modal and then taken to more ads" in the hero section, a user complained.
We replaced the carousel images in the hero section because it looked unprofessional. We added adoptions call to action images and buttons.
We added a new "featured pets" section to highlight a dog and cat each month. We received feedback about users wanting a search bar.
This initial user flow formed the basis for all of our page routing. We discovered while laying out our pages, that the amount of information displayed on many of them needed to be condensed to make the flow more straight forward.
Six rounds of usability testing led to insights that became the main focus for the AHS redesign. Improvements to the wireframes were confidently implemented thanks to the feedback received during user interviews. Giving users clear-cut tasks such as finding the store hours, allowed the targeted issues to be assessed and modified in the redesign.
Testing gray-scale wireframes was beneficial since users were not getting distracted by our colorful visuals.
Turning the original lengthy form into this friendly pop up window when selected, was useful since we did not want to have users navigate away from the foster page. Thanks to the serious nature of taking on these animals into your home, we guide people to read the informative page describing the process involved with becoming a foster parent home for animals again.
The scale of our UI was the greatest pain point for us during this project due to our lack of having reusable components. Several teammates wanted components to be much larger than what our competitors websites were. Considering our time constraints and individual working styles, we were unable to make the UI scale on all pages identical on time.
Based on the archetype research I led, I came up with different solutions for showing the steps to volunteering and then had them validated with multiple usability tests. The Volunteering pages were my responsibility for the ending product delivery.
“Make an Impact” may sound clever, only did it mean to volunteer or donate? This use of language was an opportunity that our team used to transformed the redesign into a clearer, more informative website (without the long forms).
The AHS redesign improved the click-through rate of the animal adoptions pages on the Austin Humane Society website. It is now a straight-forward process to use the new filtering options, which animal is the best fit for a household.
You can never do enough usability testing!
In mobile, rather than having our main features hidden in the drop-down hamburger menu, we decided adding a tab bar at the bottom of the app would make it simpler to navigate. If we had more time, we would have added a stationary icon for: home, adopt, foster and volunteer in a that bottom navigation.
Our close-knit team of four worked so well together and we concluded with a highly successful presentation of our final product to stakeholders for constructive feedback.