Hi There
OHANA is an animal shelter website that I created through Google UX Professional Certificate. The goal of this project is to make the animal adoption process more concise and find a better match for each user. Even though this is not an existing app in the market, however, I conducted research, and the design was also created based on actual users' and fellow course students' voices. I’m proud of this project, but I just wanted to be upfront with that.
Okay, Let's continue ↓
Role :
UX researcher / UI・UX designer
Project duration :
SEP - OCT 2021
Animals deserve better so why not make the adoption easier for people?
According to The American Society for the Prevention of Cruelty to Animals (ASPCA) each year, sadly about 920,000 shelter animals are euthanized. However, the good news is that the number of people adopting animals from shelters as new families is increasing each year. Then, I decided to design a solution for those who want to adopt and save animals.
Problem
- Lack of information caused anxiety
- Adoption process seems complex for website visitors
- Some users were nervous about the life after they adopt the animal from shelters
Goal
- Develop a product that makes users' adoption process easier
- Product should be user-friendly but also give the information they needed.
Research
Goals
-
Discover how people would have a pet (e.g. from a pet shop, animal shelter, by friends, etc.)
-
Identify what makes the adoption process difficult or complex
Research Components
-
User surveys
-
User personas
-
User journey map
When I conducted user research I noticed that many animal lovers prefer to take their pets from shelters instead of buying them from pet stores. However, when it comes to the user experience on the shelter's website, most of them faced some difficulties because of the unclear or complex flow. This would not only ruin their experience but also may even them to abandon the opportunity to save animals.
Insights #1
Lack of information for animal adoption
Even if the user were interested to adopt animals from the shelter, there are not many of them that explain how exactly they can apply to the process.
Insights #2
Unclear adoption process
Some website has a page that explains the flow from applying to taking animals to the home however, the thing they can offer online is very limited and the most case, people needs to visit or call the shelter first.
Insights #3
Adoption process is comlex
Animal life is very important and should be cared for. However, if the process tool is too complicated, less people could achieve their goals. As a result, less animal could get their life they deserve.
Insights #5
Developing online system is urgent task
They upload photos or videos of animals which need a new home however, many websites do not allow potential new owners to start the process online.
Insights #4
What should we do if we have trouble after adoptted the animal from shelter
People tend to feel overwhelmed or anxious when they think about the life after the adoption. If new pet owner could keep in contact with shelters, that could be very helpful for them.
"Not many shelters provide 'after care' so if the pet has some trouble, we have to figure it out"
Contestant, 30s
Insights from survey and interview
User journey
I created a user journey map to help me to understand the user’s pain points and what makes the user nervous during the adoption process. Moreover, it is a useful resource to find opportunities for future improvements.
User Persona
Thanks to the user research, I could create a user persona that represents our target user for this project.
Ideation - Paper wireframes -
I created multiple paper wireframes for home page so that I can find the best way to guide users to their goals easily in the process. Red stars represent good impression by other designers so I reflected on the flinal design.
Paper wireframe for mobile screen
Statistics reveal that 68% of users access the internet through mobile devices globally. As a designer, I cannot ignore this number. Moreover, allowing the user to explore the website through different devices but with consistent design helps users meet their goals efficiently.
Design
Digital Wireframe
When transferring the design to digital wireframes, I made sure that the design solved the user's problem and provided proper navigation to the process and goal.
Meet the user's goal
My strategy is to prioritize the order of each element. In this case, finding a pet to adopt is the primary goal for users, so I put the find your match button on the upper screen.
Moreover, navigation bar content is simple enough to find what users want to know.
Low fidelity prototype
Here is the low-fidelity prototype for this project. To create the low-fidelity prototype, I designed the user flow from searching for a pet to making an appointment to pick up a matched pet at a shelter.
*For your better experience, I would recommend clicking the full view icon on the right up corner.
Usability study and refine the design
After creating the low-fi prototype, I decided to implement the usability study. It reveals my design problem and how I can handle to be a better product. Here is some findings from the studies and how I cunducted.
Usability study overview
Study type
Unmoderated study
Location
Online (remote)
Participants
4 people
Findings from the usability studies
Findings #1
User flow needs to be improved
In the process, there is not back button so user cannot back to previous page when they need to do.
Findings #2
Button placement should be changed
It didn't allow users to click the button without scrolling so they had to scroll down to click and go forward to the next process.
Findings #3
Back to home button could be good to have
After all the process are done by users, there were no way to back to home except clicking the logo. Therefore, I can solve this problem by placing back to home button .
Refine the design
BEFORE
Some participants showed confusion about the process because there was no way to back to the previous page. Therefore, I added a back button so that they can back to the previous section.
BEFORE
Some participants revealed that they had to scroll down the page to press the button that would take them to the next page. We rethought the size of each element and redesigned it so that all elements fit on the page.
AFTER
AFTER
High fidelity prototype
All color applied in this design were well considered and they are perfectly low vision and A11y friendly.
High fidelity prototype
The high-fidelity prototype includes a couple of design changes that were improved through the usability studies.
For your better experience, I recommend accessing to full view.
High fidelity prototype for mobile devices
Mockups
Mockups for Desktop
 |  |  |  |  |
|---|---|---|---|---|
 |
Mockups for mobile devices
Accessibility considerations
Better readability
By adjusting the size of the text, the readability increased and it made much better experience for users.
Visible colors
Colors that I used for this project maintain the high contrast. It means the design is visible for most of the users.
Remove the anxiety during the process
By adding a measurable bar during the process, users can know how far they come. It helps to remove unnecessary stress for users.
Takeaways
Impact
What I learned
The target users stated that the whole process and navigation were easy to follow and the high visual hierarchy helped them to avoid getting lost in the flow.
I learned just minor or even small changes in design could leave a big impact on the users and their experience.