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.
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.
- 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.
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.
Participants would adopt
Participants used websites such as RSPCA
Participants had donated to a pet rescue charity
Jess, 28, Single
- Active in community
- 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
- Finding how to volunteer is difficult via the site
- Tiny Tails website is difficult to navigate
- No online donation available
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.
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.
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.
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.
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