HiPet App
Design a pet adoption for an animal shelter
The product: Hipet is an organization that providing shelter and helping animals find new homes. The typical user is between adults between 25-65 years old. Hipet's goal is to make adopting or sponsorship processes standardize, quick and reliable.
Project duration: March 2023 to April 2023
I'm documenting the journey of my second UX project as part of the Google UX Certificate program on Coursera to provide a detailed exploration of my thought processes. Surprisingly, these articles have proven to be highly beneficial for fellow learners who are navigating a similar path and may find the workload daunting.
Problem
​
Lack of adequate and recent animal shelter information, as well as an outdated booking system and appointment to meet the animal.
Role
Ux designer leading Hipet website design
Responsibilities
Create a website with comprehensive animal profiles to make finding a pet easier. Design a website that is user-friendly by providing clear navigation.
Goal
​Conduct two moderated and one unmoderated interviews, design paper and digital wireframes, lo-fi and hi-fi prototyping, account for accessibility and iterate on designs based three on usability studies.
Process
Understanding
the user
Starting
the design
Refining
the design
Going forward
User research
Persona
Problem statements
User journey maps
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Mockups
High-fidelity prototype
Accessibility
Takeaways
Next steps
User Research
Summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered it's crucial for users to understand the full details and history of a pet. Additionally, many adopting websites frustrate many target users since they are difficult to navigate and include outdated information. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of adoption. Before visiting an animal shelter, people would like to know more and make plans so they can ensure they don't lose time by knowing which animals they would like to meet.
pain points
Navigation
Adopting website designs are often busy, which results in confusing navigation
Experience
Animal adoption websites are not providing enough information or online option for scheduling appointment
Time
Shelter location in rural area is creating accessibility problems.
Persona
​
Sara is a Busy schedule lawyer (User characteristics) who needs easy, intuitive and step by step way to adopt an abandoned pet (need) because she’s never had pet and doesn't know about adoption process(inside).
Problem statement
![3 Google UX Design Certificate - User Journey Map [Template].jpg](https://static.wixstatic.com/media/b69755_7ee1be6038004166a60d50ba5c7ee64f~mv2.jpg/v1/crop/x_20,y_85,w_921,h_455/fill/w_656,h_324,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/3%20Google%20UX%20Design%20Certificate%20-%20User%20Journey%20Map%20%5BTemplate%5D.jpg)
Starting the design
Sitemap
.png)
Difficulty with website navigation and search option 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 my app, keeping the user pain points about navigation, browsing, and checkout flow in mind. The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Refined paper wireframe
Paper wireframe screen size variations
Tablet
Mobile
Because Hipet’s’ users access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
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 locations and visual element placement on the home page was a key part of my strategy.
Digital wireframes
Homepage is optimized for easy searching through the searching box, images and nav menu options.
Easy access to useful infos
Digital wireframe screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out. At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Usability study: parameters
After designing digital wireframes, I conducted two rounds of usability studies. For the first round of testing, I built a low-fidelity prototype and had users test it to ensure that they could easily find and apply for opportunities while understanding the functions of the app. The feedback gathered from the first study was then used to guide the designs from wireframes to mockups before conducting the second round of testing.
​
Study type:
Unmoderated usability study
Location:
Germany, remote
Participants:
5 participants
Length:
20-30 minutes
Usability study: : findings
These were the main findings uncovered by the usability study:
Search
Participants wanted more customized options for searching for a new pet
Appointment
Participants would like to select date and time of appointment schedule.
Refining the design
Mockups
Based on the insights from the usability study, I separately added date and time selection in scheduling appointment.
Before usability study
After usability study
Mockups
Based on the insights from the usability study, I separately added date and time selection in scheduling appointment.
Mockups
Mockups: Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users search from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Accessibility considerations
I used headings with different sized text for clear visual hierarchy
1
I used landmarks to help users navigate the site, including users who rely on assistive technologies
2
I ensured that there is
sufficient contrast between the background
color and text color to make it
easier for users with visual impairments to read and navigate
through the app.
3
Going forward
Takeaways
Impact
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 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.
Next steps
Keep the
record of my design decisions, iterations and testing
results to create a portfolios that
showcases my design skills for applying on Job
Conduct follow-up usability testing on the new website
Identify any additional areas of need and ideate on new features