Hong Kong Paws Foundation
Website, UX/UI Design, Brand Identity
2023 - Current
Live Project

Jump ahead to
📋 Project Overview
The Hong Kong Paws Foundation (HKPAWS) is a compassionate and dedicated non-profit animal welfare charity, registered in Hong Kong.
The aim of this project is redesigning their website to increase the outreach of potential adopters and donors.

HKPAWS is dedicated to finding abandoned animals a 'furever' home. However, amidst a growing trend in relocation, HKPAWS is encountering a significant decline in adoptions.
By enhancing transparency in adoption processes and providing detailed background information on animals awaiting homes, our goal is to foster trust and ignite interest among potential adopters and donors.
Highlight
Collaborated with client and developer for a year to complete UX/UI design process and website development.

Problem
🥹 More dogs and cats needing home!
As people leave Hong Kong , more pets are abandoned, resulting in fewer adopters and higher operating costs for HKPAWS.
Solution
🧡 Enhancing trust and emotional connections between potential adopters and HKPAWS
Adopters need comprehensive information before pet adoption. Increasing HKPAWS and animal stories aims to enhance emotional attachment and confidence among potential adopters and animals seeking homes.

Research
What does HKPAWS want?
From an initial meeting with HKPAWS' director and marketing/community lead, as well as website auditing:
Increase adoptions
More donations
Branding alignment
Competitive Analysis
Hong Kong animal shelters lack transparent adoption processes.
See detailed competitive analysis
What does potential adopters want?
Through 7 User Interviews and 10 surveys , I have discovered that..
90%
are not satisfied with the adoption process.
WHY?
" I was not informed animal’s health problems! "
" No one got back to me! "
" The cats look so dirty! "
" I wanted to know my pet’s past live like what happened and why abandoned. "
100%
who are satisfied with their animal shelter -
BECAUSE OF…
Detailed animal info
Transparent procedure
Supportive staff
With the findings in hand -
How Might We…?




How might we increase transparency of the adoption process?
How to increase the attractiveness of shelter with online presence?
How to increase credibility of the shelter online?

Appearance, characteristics and background of the animal waiting for home
Potentials adopters could take a quick look of available cat and dogs’ profile and click into the detailed profile. In case of doubt, they can simply fill in the adopt/foster form and HKPAWS will match for according to their needs.


Detailed and transparent application process
When adopters and fosters are in doubt of how HKPAWS adoption or fostering work , they could check the application process for adoption or fostering on respective page - and learn more about the process.
By highlighting trail adoption will effectively increase the likelihood of adoption form submission.


Story of HKPAWS and founder of HKPAWS
By sharing more HKPAWS and founder’s stories, potential adopters (and donors) will understand the philosophy and mission of HKPAWS - which may increase the trustworthiness and credibility of HKPAWS.


Donors and partners' accreditation
Not only would donors and partners be accredited, donors and adopters would also know whom HKPAWS are cooperated and supported by, increase the trust and familiarity of HKPAWS as a brand.



The Iterations
How to improve the design with qualitative data?
Taking the bugs & issues from usability testing into consideration, actionable items have been created and several iterations were made:
Homepage
✘ Problems
Too many CTA buttons .
Adopt/foster form should be easier to be reached.
✔ Improvement Made
Removed a CTA button and prioritising adoption.
Added a adopt/foster form under Dogs and Cats for visibility and accessibility.
Before

After

Donation Page
✘ Problems
Donation methods should be more apparent and quicker to be found.
Donation methods should be more distinct from one another.
✔ Improvement Made
Divided donate content into 2 pages: Donate Now & Why Donate.
Added Donate Now button on Why Donate hero image.
Before

After



The Product
How does the MVP look like?
Responsive Mobile Web
I prioritized refining high-fidelity screens with revisions and concentrated on optimizing mobile responsiveness after client's approval and before handing off to web development.
I re-used the existing components from UI kit, shrunk them into smaller viewpoint and created mobile friendly webpage:

☝️ Click to view on Figma
What have I learnt?
Takeaways
✅ Effective communication
As a solo designer in my first real-life project, I realised the importance of continuous and clear communication with stakeholders. Ensuring alignment on ideas, even small details, is essential in every step.
✅ Prioritisation matters
Given limited time and resources, feature prioritisation is crucial. Collaborating with clients and considering technical capabilities influenced the design of wireframes.
✅ Iterations + Iterations
Achieving a great design requires constant iterations and updates to refine the final product.
Next Steps
👣 Web Development Monitoring
After handing over the project to a freelance Webflow developer, I will closely monitor the development progress and provide regular updates to clients on the process.
👣 Impact Measurement
Following the website launch, I aim to examine the redesign's success in increasing adoptions and donations. Measuring the impact will help gauge the effectiveness of the changes I made.
👣 Content Enhancement
Once the Figma design is converted to Webflow, I will share the deliverables with clients. They will be responsible for polishing website contents, which play a crucial role in creating an impactful website.