Tiny Tames Pet Shelter App
Case study
The product:
Tiny Tames is an app to register pets, donate and adopt for an animal shelter. Exploring ways to make it easier to find your life Pawtner, through mobile pet adoption.
Project duration:
November 2021 to January 2022
The problem:
During the Interviews, most users didn't know how to register a pet online for an animal shelter due to lack of knowledge.
The goal:
The goal is to design an experience that would easily connect people to animals and provide a simple adoption process.
My role:
UX researcher , Visual and Interaction designer
Responsibilities:
User research, Wire framing, Usability Testing, Designing Mockups, Prototyping and Presenting to Clients.
User research : Summary
During the interviews with a group of diversified participants, I found that some of the participants did not know the process to register a pet online for an animal shelter. Some users were even hesitate to answer as they didn't know what to do. Most of the users knew the process to donate and sign up for an adoption program but majority of them had a lack of knowledge on registering pets.
User research : Pain points
Experience :
Animal shelters don’t provide a registration experience for pets.
Accessibility :
Animal Shelter websites are not accessible to register pets online.
Lack of Knowledge :
Didn’t know how to
register pets for an animal shelter.
Persona: Jennifer
Problem statement:
Jennifer is a content writer who needs to adopt a dog because she wanted to save a loving animal by making them part of her family.
User Journey Map
Based on the data from my competitor analysis, reviews, and statistics.
I organized my observations and created a journey map focusing on the scenario of one of my user personas. This helped me to view the entire user journey, knowing pain points and opportunities for improvement.
Sitemap
After researching the user’s needs and business goals, I created an information architecture to help organize and create some structure for the design. In particular, I focused on ideas of pet discoverability, pet management, and support.
Paper Wireframes
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.
Paper wireframe
screen size variation(s)
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.
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Once I established a general idea of how the content would flow, I turned them into digital wireframes.
Digital wireframe
screen size variation(s)
Low-fidility Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype in Adobe XD. 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. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Usability study: parameters
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 what aspects of the mockups needed refining.
Round 1 findings
Based on the theme that difficulty in readability an insight is improving readability. (P0)
Based on the theme that participants need improvements in the search results, an insight is Improved search results for Adoption (P0).
Round 2 findings
Based on the theme that: find easy ways to upload pictures and insight is: Picture Uploading designs to be improved.(P1)
Based on the theme that add features in donors list, an insight is donors list view to be improved.(P1)
Round 3 findings
Based on the theme that Home is to indicate correctly, an insight is Homepage Correction is to be changed (P2)
Mockups
Early designs allowed for some customization, but after the usability studies, I added additional options and using dark mode screens. I also revised the design so it will be user-friendly responsive website, when they first land on the screen.
High-fidelity Prototype
My 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 interviewer.
Accessibility considerations
I have considered the accessibility for Text Sizes, Font Type and Focus Indicators on all the screens and also documented in the design system for other team members.
Color Contrast has been considered and made it accessible for all users. I have used the WCAG tool to check the color contrast for buttons, backgrounds and icons.
I have made sure that users can navigate through the app and can perform actions even using a screen reader.
Thank you for visiting !