Tackled on the experience of pet adoption in SPCA
TYPES OF PROJECTS
Designing UX/UI for a responsive website (mock up)
ROLE
UX Research
UI design
The Project
​
The Society for the Prevention of Cruelty to Animals (SPCA) was established in 1880, to prevent cruelty to animals and to promote kindness to animals. SPCA has rescued countless animals lives, provided shelter to animals, and helped them find a home. This non-profit organisation also looked after the animal’s welfare, ensured good animal’s health care, and provided general pet care knowledge to the general public.
​
This article captures our UX design process in revamping SPCA website. Our goal was to transform SPCA’s brand position and amplified its mission to the general public. By redesigning the website, we gave it a refreshing interface and new responsive site that speaks to their audience.
Disclaimer: This is a self- initiated project. The content and creator of this article is not affiliated with the organisation mentioned.
​
Team & Roles
​
The project is divided into two phrases, the discovery phase and design phase. The discovery phrase encompassed of in-depth user research and synthesised the finding. The design phrase consisted of the human-centric solution derived from the research. In a 4 person team, my role breakdown are as follow:
DISCOVERY PHASE
Understand The Client
User Interview
Synthesis Information
Competitor Analysis
Brand Persona
User Flow
Problem & Solution
Information Architecture
Understand The Client
​
Knowing more about SPCA helps us to identify our client’s objective, needs, goals, values, services and market position. It is also to understand what is wrong with function and visual of the current website. All these factors gave us a good idea of research direction and a head start at points to be improved.
User Interview ​
​
We interviewed 16 potential users of SPCA website. The questions evolved about their behaviour and perspective about owning pets, as well as understanding, experience and pain point with the SPCA and website.
Synthesis Information
​
Gathering pieces of insights from 16 users, we concluded four trends using affinity mapping. Firstly, visitors have assumption about adoption. Secondly, negative experience with website. Thirdly, user’s understanding about SPCA’s reputation. Lastly, users have a big heart for shelter animals.
Competitor Analysis
​
To better understand SPCA in the local market, we conducted competitor analysis. Based on the website features analysis and plus delta to conclude the strength and weakness of each competitors, we are able to highlight some points to learn.
Brand Persona
From our research, we figured out that one of the targeted user are people who are interested in pet adoption. Hence, we came out with the persona that best describe this demographic, Curious Cameron, whom wants to know how SPCA pet adoption works.
User Flow
Next we defined the flow and structure of how Cameron visited SPCA website. If he is interested in pet adoption, within few clicks, Cameron will be able to retrieve info about adoption procedure and reach FAQs answering features to resolve all queries.
Problem & Solution
​
Defining the problem shown on the right, enable us to determine a solution. The solution is to allow user to easily understand the adoption process and clearly aware of responsibility in pet ownership. We will know this to be true when the user feels assured to commit and make an informed decision about adopting a pet home.
Information Architecture
Looking at others competitor’s website as benchmark. To reduce confusion, we tried to keep simplified the structure for easy to navigation.
DESIGN PHASE
Conceptualisation
Plan Wireflow
Mid-Fidelity Wireframe
Usability Test 1
Look and Feel
High-Fidelity Prototype
Usability Test 2
Final Design
Conceptualisation
​
Our team ideated for different possible solutions during a brainstorming session. We derived 2 concepts as below:
1. Voice of animal adoption
Speaking for the voice of the sheltered animals, thinking from their needy perspective, such as looking for a home or to be foster. Increase the animal adoption awareness to the public. Secondly, voices of the adoption owners shall share the successful stories of having a pet from SPCA is a wonderful decision to make.
​
2. Being positive and trustworthy
Branding SPCA position as a positive and trustworthy organization, increases the positive brand image and reputation to the public.
Plan Wireflow
The idea is to create multiple way of entering points for highlighted features. Users can reach desirable page at first click. Example, clicking on adoption section, users are directed to all information. A FAQ section, 24 hours hotline or Chatbot Puppy Walter, are available to answer more queries.
Mid-Fidelity Wireframe
Bouncing ideas off each other helped us align our vision to create a mid-fi wireframe. Using Adobe XD to create the wireframe, it enabled our ideas to be layout into structure, navigation and features for the usability testing.
Usability Test 1
​
A first round of user testing was conducted to get feedback on the proposed usability. Using user interview and system usability scale, each user was tested on 3 tasks, which evaluate on the usability, functionality and navigation.
Look and Feel
​
Bringing the concepts to life, we depicted the sheltered animals in their natural captivating state and inner thoughts of voices. showing the friendliness interaction between man and animals. The colour palette gives energetic and earthy vibes to convey brand image of a trustworthy operation.
High-Fidelity Prototype
Based on the concepts, look and feel, and consolidated feedback, we created a prototype of the responsive site. Considering that most primary users access internet using mobile device, hence, we designed mobile site first, followed by websites.
Usability Test 2
Most issues from first usability tests are resolved. Nevertheless, we did another round of user testing with 5 people to the high-fidelity prototype. This time round we tested on usability, UX writing and impact of interface design. The result of SUS score got better than first test.
Final Design
​
Based on the data and feedback collected during user testing. We made the improvement to the final design. Below is the list of highlighted features developed for the targeted users.
• Animal adoption, foster and rehome are make easy
• Meet the right pet in animal gallery pages
• Step by step adoption procedure
• Successful stories of adoption
• Pet care services
• Donations
• News & Eevents
​
• FAQ pages
​
• Chatbot Puppy Walter
• 24 hour hotline
Scroll to view more
Future Iterations​
​
As this project are done in lesser than two weeks, these are the next steps of features to be created in future iterations.
Casting call on real adopters
Arrange with real adopters and their pets to get photos and videos of them to use on the site. Create a library for merchandise design and marketing purpose.
Online shop
Selling more merchandise products to raise fund.
Fund raising and donation
Focus on donation to increase fundraising for the organization. To provide more for the needy animals.
​
My Thoughts
​​
As this project are done in lesser than two weeks, it was a challenging project for our team. However, I believe that we have much fun exploring UX methods, learning insights and developing prototype for this responsive site. I think we have reached out initial goals for this project. We are delighted to completed and presented this project with satisfaction.
