Heart of Texas Lab Rescue Web Redesign
Overview
THE CLIENT: Local nonprofit, Heart of Texas Lab Rescue is focused on rescuing Labrador Retrievers from shelters, pounds, abandonment, and other situations and place them in loving caring homes.
​
MY ROLE: UI Design, User Research, & Presentation.
TOOLS: Adobe XD, InVision, Miro, Google Suite, Optimal Workshop, Trello, Slack.
DURATION: 3 Weeks
​
​
THE TASK: Our team was tasked with choosing and redesigning a local, non-profit organization's website in 3 weeks. After searching for non-profits, we came across the Heart of Texas Lab Rescue's website. Our initial research during usability testing on the current site indicated that users were consistently struggling with finding the necessary information to be able to apply to foster a rescue lab, due to the current layout of the homepage, and the top navigation.
OUR SOLUTION: Create a simple, clean, and responsive web redesign that streamlines the process of connecting potential foster/adoptive families with rescued labs. The redesign focuses on adding clear calls to action (CTAs) on the homepage, and addressing the issues found within the site's navigation.
​
​
Skip to THE PROTOTYPE
The Research
Finding the Pain
To get a clear vision for our redesign, we began by communicating with the president of Heart of Texas Lab Rescue (HOTLR), Margaret Huston.
Stakeholder Priorities:
-
Immediate need for foster homes
-
Too much information on homepage
-
Donations needed to continue building expansion
Where are users feeling the most pain when using the current HOTLR Website?
We conducted several usability tests to HOTLR's current website, along with a Heuristic Evaluation. We noted that on the current site, the navigation contained many dead ends and broken links. There were no clear CTAs for potential foster families.
​
​
​
Users were struggling to find CLEAR information on the process to foster or adopt from HOTLR, often getting stuck, frustrated, and giving up before taking action.
​
Empathizing with our Users
One on One interviews and online surveys revealed that people want to be able to quickly locate key information on dogs that are available for fostering and adopting. We found that a large majority of our users were finding the fostering and adoption process more painful than they had expected it to be. We discovered that a lot of potential foster families were jumping straight to adoption due to a lack of clear information on fostering. We chose to focus on potential foster families to further empathize with.
​
See more user insights HERE
​
​
"Finding the right dog is challenging enough. I want to see all the info I need quickly!"
Jolene, 32
"Adopting and fostering should be as easy as browsing through cute images of puppies."
Sarah, 26
​
​
Meet Melanie, our User Persona.
Melanie's story focuses on a pain that both our users and the stakeholders at HOTLR both feel: the process of finding accurate information on how to foster/adopt a dog is confusing.
Redesigning the site will likely allow people to apply to foster and adopt quicker.
Our goals? Keep it SIMPLE and CLEAN. Clear CTAs, less text to digest, so that users can spend more time with the dogs, and less time sifting through text and documents.
Definition & Ideation
How might we improve the user's experience?
As we began to design a new web experience for our users, we prioritized key features that needed to be included. We prioritized these features based on both how much impact and how much effort they would take.
​
See the Feature Prioritization Matrix Here
Next, we gathered further insight from our users on how best to display these key features, by conducting a card sorting survey. This survey allowed us to better understand how our users chose to navigate through separate tasks:
Fostering, Adopting, Volunteering, and Donating.
​
Try out our Card Sorting Survey
New Heart of Texas Lab Rescue Site Map
Our data led us to a much more concise and consolidated Site Map design, which we believed would allow our users to locate the key features right from our top navigation, providing clear CTAs for site visitors.
We kept each sub page similar in function, prioritizing information and applications for each of our stakeholder's most important features.
For our side menu, we opted to include more information about HOTLR, testimonials from real foster/adoptive families, and of course, contact information for the organization.
User Interface Design
Mood Board
Original HOTLR Logo
As we began to design a new look for HOTLR's website, we did some research into Color Theory. We wanted to ensure that users felt a sense of joy, trust, and ease when visiting the site.
​
At the heart of our design, we kept the organization's most important aspects: Labradors and Texas!
​
​
​
​
​
​
​
​
We also took the opportunity to give the HOTLR's logo an update.
​
See the transformation below.
_edited_.jpg)
Redesigned HOTLR Logo
Sketching & Iterating
Low and Mid Fidelity Mock-ups
We sketched out a few low fidelity wireframes with potential looks for our homepage. We kept our new sitemap in mind as we iterated on these designs. We kept it simple, while prioritizing FOSTER as our first clickable tab, since this is the main priority of HOTLR.
We designed our homepage to include a featured labs section, to get more dogs available for fostering/adopting in front of our users immediately.
We opted to jump straight from sketching to mid-fidelity wireframes for time's sake. Our ultimate goal here was to get focused feedback on the layout of the site, as well as the UI components.
​
See more mid-fi wireframes here
From here, we checked in with some of our stakeholders again. Some insights we gathered during testing:
​
Users weren't immediately sure of which organization they were viewing.
Having a homepage that looks the same as the sub pages feels lackluster.
There's still too much text to read!
Time for some changes!
Users want to see more dog pictures, with small, easily to read snippets of information.
Prototyping
High Fidelity Mock-Ups
Try our Prototype HERE
With the motto "A picture is worth a thousand words" in mind, we gave our redesign a final round of iterations. Here, we challenged ourselves to ruthlessly prioritize the copy on our homepage, with only the most valuable information making the final cut. We included more high quality pictures of available labs, coupled with fun and friendly micro-animations in our top navigation, logo, and menu.
​
Our final mock-up showed HUGE improvements during time-to-target testing after implementing these changes. See the results below!
Results & Reflections
Where can we improve?
We decided to run some time-to-target tests on our new prototype. We gave our users the same two tasks: find the application to adopt a lab, and find out how to foster a lab.
​
​
Using HOTLR's current website, it took 38 seconds on average to find adoption application, and 4/7 users tests failed to locate how to sign up as a foster home.
Reflecting on what's next...
New Site
7 seconds to find adoption application and 100% of user tests successfully found how to foster a lab.
Our timeline on this redesign felt short. There were so many areas we wanted to focus on for this organization, as our team deeply felt the importance of getting this RIGHT. We knew that improving this site could potentially save MORE dogs in need, and connect them with their furever homes. A lot of our time was spent in the research phase, as we navigated contacting our stakeholders, found real users, and gathered data.
​
This redesign challenged my team, but it gave each of us an invaluable insight into the importance of gathering perspectives and feedback throughout the entire process. Empathizing with not only our human users and stakeholders, but also with our canine stakeholders helped drive our passion for this project.
​
Our next step in this process is to look into creating an additional page for resources and education. Margaret Huston, President of HOTLR expressed a need for improvement in this area on their website. We would love to be a part of building an additional page for site visitors to educate themselves through informative videos, infographics, links, and other outside resources. This could potentially give users a level of ease and comfortability with labradors, and maybe even lead to more labs being fostered/adopted!
​
So. Did HOTLR redesign their website? How close were we in design toHOTLR’s current design? HOTLR Site 2024: https://www.hotlabrescue.org/hotlab/main/index.html#/