UX/UI Case Study - Responsive Website Redesign

Our team’s goal was to redesign the NFP Tiny Tails website to enhance the site navigation, visual aesthetics and overall usability so that website visitors are more inclined to contact the organisation for more information, offer to volunteer or adopt a pet.

Responsibilities: User Research, Prototyping, Interactions, Usability testin

Tools: Adobe XD, Miro, G-Suite, Trello & Slack

Time frame: 3 weeks

The current website

The design process was not a linear one but was full of iterations at various stages.

User Research

Interviews – As User researchers we wanted to understand the thought process and any pain points of pet adoption/fostering and supporting to local pet rescue charities.

"On Facebook, you can see the pictures of the animals, not text…."

Key Takeaways

  • Users love to adopt a pet.
  • They usually used sites like Google, FB or sites like RSPCA to browse pets.
  • They wanted to know more details about the pet.
  • They would prefer to donate online via card payment.

Survey Results

To get a more broad understanding of the pet adoption thought process of users we conducted a survey.
We created a survey using Google forms, distributed via social media and received 44 responses.
These were the more significant insights gathered.

1 %

Participants would adopt
a pet

1 %

Participants used websites such as RSPCA

1 %

Participants had donated to a pet rescue charity

Meet Jessica

Jess, 28, Single




  • Compassionate
  • Active in community
  • Hardworking
  • Extravert 



  • Strong Social media presence
  • Visual profiles of the animals up for adoption
  • Easy way to inquire details
  • Tips and advice about adopting


  • To adopt or foster a pet from Tiny Tails
  • To be informed about the pet she’s adopting
  • To have a secure and reliable way to donate

Pain Points

  • Finding how to volunteer is difficult via the site
  • Tiny Tails website is difficult to navigate
  • No online donation available

Problem Statement

We believe that a delightful redesign of the Tiny Tails Rescue website that focuses on enhancing the navigation, visual aesthetics and responsive standards, would improve usability and attract visitors to donate, volunteer with the organisation or adopt a pet.

Story Board

A storyboard was mapped to empathize the possible user journey of the created user persona. We needed this to get an idea to develop wireframes.

Competitor Analysis

In order to see where Tiny Tails stood amongst the competition we did a competitor analysis and we studied the main features that stood out in our competitors and used some of them baked into our wireframes.

Sketching & Wireframing

We began our design process by starting off with low-fidelity wireframes. These wireframes were the initial framework of our mobile site and were used during testing.

These wireframes were the initial framework of our website and were used during testing.

Visual Design

When deciding on what colours to go with for the redesign, we decided we wanted to have a friendly feel and bubbly nature while still displaying a care or pets and chose colours to communicate just that.


There were some changes made to the final prototype based on the feedback from the usability testings

We came across a colour accessibility problem and detected it at a crucial time and adjusted the colours to match the AA standards for colour accessibility.

Responsive Design

Completing same tasks intuitively on a Smartphone, scaling down legibly and reordering information to suit the new screen size were some of our mobile responsive design goals.

Future Steps & Conclusion

  • We would like to continue testing the prototype and understand any more changes that need to be done.
  • And in terms of the website itself, some additions such as the Success Stories page, an updated blog, and subscriptions to newsletters will need to be implemented.
  • Improving and developing the responsive design to suit the mobile screens is also one of the higher priority tasks