Lifelong Animal
Protection (LAP)
LAP is a charity whose aim is to shelter abandoned animals, socialise and re-home them into loving families. They rely entirely on donations to fund their organisation, as well as volunteers to keep them running.
Logo
Type
Web Design
Service
User Research, UI/UX Design, Prototyping, Usability Testing
Category
NGO
Timeline
Oct - Nov 2024
Final Prototype
project overview
LAP’s website has overlapping information and a confusing architecture, making it hard for users to find information. This reduces the probability that users will complete the adoption process, or donate / volunteer.
view lap website
research methods
Benchmark analysis
Compared to its competitors, LAP’s website is outdated in their user experience and interface. It is not responsive, and LAP’s competitors provide a relatively more seamless experience for users to view shelter animals, adopt them, and view upcoming adoption events.
User research
Through interviews, repeating patterns were found in user experience with LAP. Among them are frustrations with how LAP treats interested pet owners and the unnecessarily long adoption forms. Users have mentioned that they felt the process was awfully complicated and that deterred them from completing the process.
The information online for shelter animals was severely lacking, forcing users to dig through the adoption’s social media to find the latest news on the animals.
insights
From user research, an affinity map was synthesised to discover emerging patterns among users’ pain points and goals.
view Affinity Map
personas
From interviews, two personas were created.
research statements
the Cozy Caretaker
Darlene loves to foster and help socialise shelter animals, making them ready for adoption. However, she finds it difficult to find relevant information on each animal. She also has to navigate unnecessarily complicated forms each time, despite having a proven track record.
the generous volunteer
Patrick contributes to animal welfare through volunteering and donating. LAP's website has misleading or not enough information on volunteering. Multiple information on the donation page also confuses him.
wireframe
By starting the design process with mid-fidelity wireframe, I approached the project from a usability-first perspective rather than a visual direction. This allowed the user flows to be prioritised.
view mid-fidelity wireframe
moodboard
LAP's brand values were deduced to be humanitarian, kind, action-orientated and educational.
Based off the values, a moodboard centred around soft and bright colours, with a minimalist look and feel was put together. The aim was to induce the same values within the user when they visit the website, and to encourage them explore its pages.
brand style tile
Brand colours, font and iconography were re-designed at this stage. Based off the moodboard, the brand style tile guided the visualisation of the new website. Montserrat and Jost fonts were chosen for their readability and ability to invoke calm.
logo
LAP's existing logo was outdated and needed a revamp to go with its redesigned website. A sleeker and playful look was created that matched the brand style guide.
Giving it a more up-to-date look also helped in user confidence, the concept backed from the feedback received in usability testing.
features
The redesign took into account user's pain points around navigation, information architecture and complicated task flows.
In terms of navigation, LAP's adoption process was simplified and illustrated on the homepage. Users can easily view all shelter animals through the CTA button at the first scroll.
features
All forms were removed, and users can meet with the animals through an online booking platform, accessible on any animal description card.
features
Header contained a prominent Donation CTA button to catch user's attention and easily guide them to the Donation page. Containing three types of donation (one-time, recurring, and sponsor-an-animal), the interface was redesigned to be intuitive.
features
The volunteering process was also simplified, where volunteers could sign up through an online calendar on the website. The calendar shows the charity's schedule, and user will receive confirmation emails upon signing up.
high-fidelity prototype
The high-fidelity wireframe was prototyped for usability testing.
view high-fidelity prototype
usability testing
Usability sessions with five participants were held. Before starting the session, users were asked to answer a System Usability Scale (SUS) survey about LAP's original website.
results
Overall, the redesign received very positive feedback. Users felt the new colour palette was calming and inviting. They also found the new information architecture and navigation to be intuitive.
The amount of information on each shelter animal is now sufficient. In user research, popular requests were for the animal's background and personality to be displayed. This was accounted for, as well as for more photos of each animal.
view full usability testing results
“Everything is where it makes sense. This is how all adoption websites should be like."
Paul, interviewee
In terms of the SUS survey, the original website scored an average of 49.5 points, whereas its redesign scored an average of 94.5 points. This showed an increase in usability of over 90%, proving the redesign to be a success.
view sus survey
iterations
There was feedback on some of the UX writing, interface layout and additional components that could improve user experience.
The feedback was gathered and organised into a priority matrix. Iterations were made for Quick Wins and Other Tasks, while Important Tasks were moved into Features Wishlist.
final prototype
view final prototype