HappyPet website
Project for the Google UX design certificate
This is my first design
Project overview
Websites are often overcrowded with information/pictures and have confusing designs. HappyPet is an animal shelter in the south of Spain and has the goal to make animal adoption easier and quicker for all types of users.
Duration: 2 weeks, 03/2021
My role: UX designer leading the HappyPet website design from conception to delivery.
Responsibilities: conducting interviews, creating paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
User research
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users like to first look after a pet from home (website) and then go to the animal shelter to adopt the pet they saw. However, many animals shelter websites are overwhelming and confusing to navigate, which frustrated many target users.
This caused a normally enjoyable experience to become challenging for them, defeating the purpose of finding a new family member.
Pain points
Navigation: animal shelter websites designs are often busy, which results in confusing navigation.
Interaction: not good visible buttons on websites make it difficult for users to know where to click, which sometimes leads to mistakes.
Experience: homepage are often overcrowded with ads, it isn’t appealing.
Persona
Problem statement: Alan is a father of 2 children and a worker who needs an intuitive website and an easy-flow because he wants to adopt the perfect dog for his family without being overcrowded with information.
User journey map
I created a user journey map of Allan’s experience using the site to help identify possible pain points and improvement opportunities.
Sitemap
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button location and a clean homepage was a key part of my strategy.
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adopting a dog.
At this point, I had received feedback on my designs about things like placement of buttons and page organization. I made sure to listen to them, and I implemented several suggestions in places that addressed user pain points.
Usability study
I conduct a moderated usability study with 5 participants between the ages of 18 and 65. The study was localized in Spain but remote and each session was 10 minutes long.
Finding from the study helped guide the designs from wireframes to high-fidelity prototypes:
At the browser screen, users don’t have the opportunity to filter the pet search.
Users need clear information to be sure they can adopt a pet.
There wasn’t a clear way for users to choose a date and time to pick their pet during the adoption process.
Mockups
Based on the insight from the usability study, I made changes to improve the browsing flow. One of the changes I made was adding a search bar and filters. This makes it easier for users to find the right pet without looking at each animal card.
An information screen was also missing, so I added it after the screen where the user has to choose his pet.
To be sure that the pet is in good hands, I added a questionary on the next screen that allowed the users to be aware of what he needs to adopt a pet.
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users look at pets from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile phones so users have the smoothest experience possible.
High-fidelity prototype
My high-fidelity prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes suggested by members of my team.
Accessibility considerations
I used headings with different sizes of text for a clear visual hierarchy.
I used color contrast (ratio) to make my design accessible. The color I used to have a ratio from at least 3.4:1 (large text, 14 points).
I designed the prototype with a speech playback that helps users with disabilities to complete the adoption flow.
Takeaways
Our target users shared that the design was intuitive to navigate through, more engaging with the images and the information, and demonstrated a clear visual hierarchy.
I learned that even small design changes can have a huge impact on the user experience. The accessibility for all kinds of users is also really important. The most important takeaway for me is always to focus on the user’s needs when designing and make the design the more accessible I can.
Next steps
Conduct follow-up usability testing on the new website.
Identify any additional areas of need and ideate on new features.
Make the website overall more accessible for every kind of user.