UX/UI Case Study
Responsive pet adoption website
Hero image
Role
UXD
UXR
UI
Date
March-April 2023
The Problem
Pet adoption may increase worldwide due to the Covid-19 pandemic. Even so, global inflation began with the fading of the pandemic, and because most people no longer spend a lot of time at home, a steep rise in abandoning pets occurred due to time and economic concerns. Source
Available online adoption websites have cluttered designs, inefficient systems for browsing through the necessary information, and a confusing adoption process, and do not address the user pain points that were revealed through my research.
The Solution
Creating a responsive website to solve the main user problems is part of my effort to make adoption as easy, friendly, and informative as possible, while also keeping in mind the importance of matching pets with adopters, as well as preventing further cases of abandoned pets.
Responsibilities
Conducting comprehensive UX research and UI design, including interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project Goals
Find out what obstacles users face during the adoption process.
Make pet adoption as easy and friendly as possible.
Prevent pet abandonment by using a tailor-made matching form and an efficient process for users.
Understanding The User
User Research
I performed secondary research to find important findings to guide my initial research. I conducted interviews and created empathy maps, personas, user stories, user journey maps, and problem statements to understand the users I am designing for and their needs. I discovered that many target users shared frustration about the cluttered designs, inefficient systems for browsing necessary information, and confusing adoption process of available online adoption websites. In addition, many adoption websites are overwhelming and confusing to navigate, which also frustrated many target users. This caused what should be a normally enjoyable experience to become challenging for them, defeating the purpose of finding relevant information to help them decide which pet best suits them and eventually avoid cases of pet abandonment.
Pain Points
Navigation
Adoption website designs are often busy, which results in confusing navigation.
Experience
Online adoption websites do not provide an engaging browsing experience.
Considerations
Potential users expressed anxiety about choosing a pet that doesn't match their lifestyle.
"I am afraid of allergies caused by dogs and cats."
Persona
For the scope of this assignment, we will focus on working adults with busy schedules who want to adopt pets.
UX Research - Persona
Problem Statement
Emma is a busy HR recruiter who needs a friendly, supportive and informative pet adoption website
User Journey Map
UX Research - User journey map
I created a user journey map of Emma's experience using the site to help identify possible pain points and improvement opportunities. Mapping Emma's user journey revealed how helpful it would be for users to have access to a dedicated pet adoption website.
Starting the Design
Sitemap
UX Research - 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.
Paper Wireframes
Next, I sketched out paper wireframes for each screen in the website, keeping the user pain points about navigation, browsing, and finding pets in mind. Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy pet-finding process to help users save time and find the most suitable pet for them.
UX Research -  Paper wireframesUX Research -  Paper wireframes
UX Research -  Paper wireframesUX Research -  Paper wireframes
UX Research -  Paper wireframesUX Research -  Paper wireframes
Digital 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. I made sure to base screen designs on feedback and findings from the user research. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy. This also kept the design clean and clear for the user to navigate.
UX Research -  Digital wireframes, designed with Figma
UX Research -  Digital wireframes, designed with FigmaUX Research -  Digital wireframes, designed with Figma
UX Research -  Digital wireframes, designed with FigmaUX Research -  Digital wireframes, designed with Figma
UX Research -  Digital wireframes, designed with FigmaUX Research -  Digital wireframes, designed with Figma
UX Research -  Digital wireframes, designed with FigmaUX Research -  Digital wireframes, designed with Figma
UX Research -  Digital wireframes, designed with FigmaUX Research -  Digital wireframes, designed with Figma
UX Research -  Digital wireframes, designed with FigmaUX Research -  Digital wireframes, designed with Figma
UX Research -  Digital wireframes, designed with FigmaUX Research -  Digital wireframes, designed with Figma
UX Research -  Digital wireframes, designed with FigmaUX Research -  Digital wireframes, designed with Figma
UX Research -  Digital wireframes, designed with FigmaUX Research -  Digital wireframes, designed with Figma
Responsiveness
Layout grid for desktop and mobile website design
Low-fidelity desktop versionLow
Lo-Fi Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. In order to help users find the best pet for them, I connected a primary user flow in shape of form.
Low-fidelity prototype, designed with Figma
View prototype
Usability Study: Findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed which aspects of the mockups needed refining.
Navigation
Adoption website designs are often busy, which results in confusing navigation.
Experience
Online adoption websites do not provide an engaging browsing experience.
Considerations
Potential users expressed anxiety about choosing a pet that doesn't match their lifestyle.
Refining the Design
Based on the insights from the usability study, I made changes to improve the pet-finding form flow. One of the changes I made was adding a sequential structure to the form to simplify the steps that the user needs to take to find the best match. I made iterations on the form design to achieve a lower drop rate. The sequential website model follows a simple and basic interlinking approach, therefore it helps solve our main users' pain points.
UI design mockup for desktop website
Mockups
UI design mockup for desktop website
UI design mockup for desktop websiteUI design mockup for desktop website
UI design mockup for desktop websiteUI design mockup for desktop website
UI design mockup for desktop websiteUI design mockup for desktop website
UI design mockup for desktop website
Mobile Version
UI design mockup for mobile website
Hi-Fi Prototype
High-fidelity prototype for desktop version of website
The Hi-Fi 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.
View prototype
Accessibility Considerations
Used headings with different-sized text for clear visual hierarchy.
Used detailed imagery to help all users better understand the designs.
The site was designed with alt text available on each page for smooth screen reader access.
Used icons to facilitate easier navigation.
Going Forward
Takeaways
Impact:
Users feel that the website was designed to meet their needs.
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I've learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions. I also learned that the initial ideas for the product are just the beginning of the process. Usability studies and peer feedback influenced each iteration of the website's designs.
Next Steps
Conducting another round of usability studies will help validate whether the pain points users experienced have been effectively addressed.
Identify any additional areas of need and generate ideas for new features.
Other projects
UP