Guangzhou Shelter
Website for helping people find and adopt animals from the shelter
Project Background
Guangzhou Shelter is a non-profit organization whose main goal is to help people find pets and make them part of their family. The website provides an easy search option and application process. All you need to do is to fall in love.
My role
Lead UX researcher and UX designer
Our Users
Our users are predominantly people ages 25 to 55 willing to adopt pets long term. An average user is dedicated, aware and committed to opening their home to a new member. Whether a busy couple, family or an individual, these personas would like to be able to find and apply for pet adoption from the comfort of their home or work place.
Journey Map
Research Findings
Based on the research findings we constructed multiple personas that helped understand the needs of our users. One of our user personas is Fang, a 33 years old single engineer, who started working from home when a worldwide pandemic started. He purchased his first condo right before the pandemic hit. Working from home and being isolated from friends and family inspired him to pursue a long desired dream of adopting a dog. Fang would appreciate it if there was an easy way to find doggies and apply for adoption online, especially when social distancing is encouraged.
The Problem
The problem Guangzhou Shelter webpage is trying to solve is an easy pet search and smooth application process from the comfort of users' home or work place.
Identifying steps users need to take in order to reach their goal is a vital part of creating a successful product. To the left you will find a journey map that helped the team better understand and define their users' experience and needs.
Ideation
During the ideation process we came up with a few quick ideas using the “Crazy Eight” method. This gave us a solid notion for the direction we are going to take moving forward.
Based on the ideas generated during the ideation process, above you can see the paper wireframes that came as the result.
Digital Wireframes
For building digital wireframes, mockups, low and high fidelity prototypes in this project we used Adobe XD. Below you can see the first digital draft of paper wireframes. As you can see these wireframes include a path the user can take in order to find a pet and submit an application.
Research Plan and Usability Study
We conducted a remote, moderate usability study between June 17th and June 21st 2021. The research included five participants who tested low-fidelity prototype and answered various questions regarding usability and process flow. Each interview was 10-12 minutes long.
Our Participants
We included young professionals and middle-age family members ages 25 to 55. These participants came from various ethnic, financial and cultural backgrounds. In this research they tested a low fidelity prototype where they were able to find a pet, its information and to apply for adoption prior to the visit to the shelter. We have recorded each session with participants’ permission and offered a free illustration design as an incentive.
Miro is an excellent tool for organizing notes and creating affinity diagrams.
Below you can see how we sorted data from our findings after conducting the interviews. Follow the link below to see it up close: https://miro.com/app/board/o9J_lAah4iM=/
Based on our findings a few changes were made to our wireframes. We added the ability for users to e-sign the contract, we expanded and relocated the search option and added the ability for users to pick a date of the visit.
Mockups
After successfully conducting usability study research and updating our wireframes we started building mockups. We added buttons, colors, appropriate typography and content that would complement the overall feeling and functionality of the website. After completing the mockups, we connected the screens, carefully choosing how screens interact with each other and what type of animation is being implemented. Below you can find the link to high-fidelity prototype for the website to test it out yourself: https://xd.adobe.com/view/ff7ac812-e1b1-44ab-ae28-25a9f1226a9d-aa29/
Accessibility
Accessibility is of extreme importance to our cause. One of the ways we follow this philosophy is that all our color contrasts are in accordance with Web Content Accessibility Guidelines. We made sure buttons are noticeable and clearly labeled. Navigation is consistent, heading and spacing is simple, proper contrast ratio is utilized.
We do not stop here. We appreciate all the feedback and continuously work on improving our design in order to be as equitable as possible.
" This is outstanding! I was so excited to get the puppy during the pandemic and this website made it so easy. I was able to complete everything online which helped me have minimum contact at the shelter when I went to pick my baby up."
Rattanak K.
Takeaways
Working on this project made me aware how wildly versatile user base is. Given the opportunity, people you might not expect to use your product will use it and even become their strong advocates. Which brought me to a better understanding of why equity and accessibility have to be on top of our priorities.
This project also exposed me deeper to the amazing AdobeXD which I will be using in the years to come.
" This website is great. I knew for a while I wanted to adopt a dog but I wasn't sure which how and when. The website of our local shelter provided a wide selection of animals and an easy application/adoption process. I am so in love with my new fur friend."
Marco S.
If you liked the work you just reviewed, please say hi whether to share your feedback or you would like to collaborate.
I am happy to hear from you any time at jrlogoanddesign@gmail.com.
Thank you for your time. Have a wonderful day filled with kindness! :-)