Responsive Website Design
“The process is so complicated, I’m losing motivation.”
When our friend Heather(our persona) shared her frustration to our team of UX designers, we knew something had to be done. We were assigned a project to redesign an existing animal rescue shelter, ‘True & Faithful’, located in Brooklyn, where Heather tried to adopt a rescue dog to be part of a new family member.
Heather has a lovely dog named Biscuit. When Heather first adopted Biscuit from a breeder approximately five years ago, she didn’t know anything about animal shelters. Although Heather doesn’t regret adopting Biscuit as she loves her dearly, she wants to support the local no-kill shelters and all the animals that need help. Heather decided to adopt a companion dog for Biscuit. As a nurse, she doesn’t have a lot of free time outside of work hours.
Heather’s journey with True & Faithful wasn’t easy. She faced difficulties going through the adoption process with their current website. Her initial hopes and excitement disappeared very quickly when she had trouble locating the available dogs on the website. She noticed that it was unnecessarily confusing to locate all the information she needed to adopt dogs from this shelter; every contents were very outdated and didn’t seem very trustworthy. She was only able to locate the available dogs through an external website. When Heather finally found a dog she wanted, she was disappointed that she can’t arrange an appointment to meet the dog before she makes a decision.
Heather’s journey through True & Faithful gave us these insights of what she needs to see in the updated version of the website. She wants to create an emotional connection with the animals, she wants to find information easily, and she wants to communicate with the shelter. These insights lead us to create a problem statement to solve Heather’s problems.
The adoption process differs greatly from shelter to shelter, which can result in a confusing or frustrating experience.
Heather is a busy nurse working long hours with limited time. How might we help her access information easily to achieve her goal of adopting a new family member?
Our UX design teams used this problem statement as the starting point to research the existing website by conducting usability tests with real users. Through this process, we were able to observe the occurring issues users interact while completing different tasks through the website. The tasks that were given to users were as followed:
- Navigate your way through the True & Faithful to find a right dog for your given environment. (ex: small studio apartment, first time pet owner, etc)
- Navigate your way through the True & Faithful to find out more information about the adoption process. (ex: requirements, cost, etc)
The first thing users noticed as soon as they entered the site, was that the contrast between the text and the background made it extremely difficult to read what was written on the home page. This happened when the background video had a direct exposure to the sunlight that blended in with the text that was written in white. Majority of the users gave up on reading what was written here.
When users then navigated to the ‘ADOPT/FOSTER’ page to find adoption information, they weren’t able to find any. All they saw was the instruction on how to download and email the application to the shelter. When users clicked on the white box, it actually directed them to a different shelter website that we can only assume is somehow related to True & Faithful.
Users navigated to ‘AVAILABLE DOGS’ page to look for dogs, but were confused when they noticed that the website doesn’t display any information or pictures of dogs available for adoption in the shelter. Instead, all they saw was a logo ‘petfinder’ that directed them to an alternative website where users were finally able to find adoptable dogs.
So what happened? This usability testing helped our team understand which features of the website worked while which features caused confusion or frustration to users. Out of 4 users we interviewed, 3 users failed in finding information about the adoption process. We noticed that the users that found the application form, which listed all the information about the adoption process, immediately lost motivation when they saw the lengthy application form. We concluded that when too much information is being presented at once to complete the given task, users experience decision fatigue that cause loss of motivation.
Now we started to have a clearer understanding of how we can help Heather. We felt that by providing clear instructions, making the navigation simpler and breaking the adoption forms into smaller sections, we could help Heather complete the adoption process without losing motivation.
As we entered the design phase, we decided to set clear goals on how to make True & Faithful feel more credible and trustable; striving for a clean and consistent layout which was also legible, and keeping findability at the core of our design choices, in order to deliver the information that Heather needs.
Low-fi sketch was created during two rounds of design studio sessions.
During the first round, our team all put emphasis on creating a clear, legible logo, refined primary navigation, refined available dogs page with actual information of adoptable dogs, and a FAQs page that answers all the commonly asked questions about the adoption process.
After the critique sessions, our team was able to discuss which features were most successful and which features can be removed. For second round, our team refined the designs even further to include elements of a logo, improved primary navigation, a homepage, an adopt page that lists all the steps of adoption process, an available dogs page with dog information, and overall simplified navigation.
The mid-fi wireframe is a result of our team’s well-rounded, collective vision of our design. We placed our primary focus on the main task “adopting a dog” by highlighting the features on the carousel banners and featuring some adoptable dogs directly beneath the banners. Both banners and featured dogs are clickable, which takes users directly to the desired pages they were interested in. We made sure to include a clear language and instructions throughout the site in order to minimize confusion and maximize efficiency.
We also decided to include a fillable application form within the site, to reduce the headache that users have to go through by downloading the form, filling out the form, and sending out the form to the shelter’s email address. The application form is divided in sections, and includes save button for users to come back to the form without having to start over the entire process.
“The text prompts above the application makes me take it seriously.”
Another round of usability testing was conducted on 3 users, with a task of ‘finding an animal to adopt’. The result was a success! We noticed the trend of users wanting to view the dogs first before looking for other information that are related to the task. Of course, who wouldn’t want to see the dogs first? Overall, users wanted more detailed information about the dogs, as well as the adoption process itself. All users had different ways of navigating to the available dogs page, which gave us the insight to bring the ‘dog listing’ page to the top of the content hierarchy.
With all the discoveries from our usability testing, our team was able to create a redesign of True & Faithful’s high-fidelity mockup! We’ll now be inviting Heather again to look through the changes that occurred and how her overall experience with the new design will differ from the original site.
When Heather first enters the new True & Faithful’s website, her attention immediately focused onto the adorable picture of a happy, smiling dog. It made her want to adopt a dog even more than she already has. It made her want to check out the adoptable dogs that are available in the site. She noticed that the primary navigation was reduced down to 3, and the shelter’s mission statement that was now more legible and placed prominently.
When Heather clicked on ‘adopt’ page, she noticed a clear and detailed instructions of adoption process the shelter requires. It contained enough information Heather was looking for before making decision of adopting a dog, so she thought it was extremely helpful. Heather also noticed a ‘FAQs’ page located in the footer, so if she was to have additional questions, she knew where to go next.
Finally! Dogs! Heather was so excited to see all the available dogs that are ready to find their forever home in the shelter. She loved seeing pictures of the dogs and how individual dog cards included brief information about the dogs. It was extremely helpful for Heather as she doesn’t have time to click through each dog’s individual profile page to find out detail information about them. She especially loved the short quotes as they seem to be describing dogs’ personality in a short, and engaging way.
Heather decided to check out more about ‘Cookie’, an adorable white terrier that loves to go out for a walk! Heather loved that the first thing she sees is more pictures of Cookie when she clicked on Cookie’s page. Heather especially enjoyed the ‘doggie stats’ box on the bottom right, as it seems like a short summary of Cookie’s information in a very visually friendly way. When Heather noticed that Cookie is extremely friendly with other dogs, she knew that Cookie was going to be her next forever family member.
“It’s simple and easy and short.”
Did Heather successfully adopt Cookie using the redesign of shelter’s website? Of course she did! Other users from usability testing experienced similar success. All 3/3 users succeeded in completing the task of ‘finding an animal to adopt’ under 5 minutes with little to no hesitation. All users moved through the site along the intended path, and all users had a positive experience interacting with ‘doggie stats’ information. Hurray!
But… wait! This isn’t the end. To improve our site even further, our team decided to revisit some of the features. Such as removing application button from the adopt page, and working on our pathing in a more concise way. We also want to replicate filter option from the FAQs page to the available dogs page, potentially using the same drop down feature.
For further research, our team discussed that it would be a good idea to:
1. reach out to the owners of the site to go over the changes we designed
2. reach out to the people who have adopted from True & Faithful’s existing site and compare experience to our redesign
3. build out the prototypes entirely with full pages
4. perform more usability testing to eliminate path redundancies
That concludes our redesign project of True & Faithful! Thank you for following our journey from the beginning. If you’re interested in checking out the full hi-fi prototype, it can be found through this link. It was a great experience working with the amazing team of UX designers to create the awesome redesign product!
