Discovering the Pain Points by mapping the user journey
karinadesign
UX / UI designer
Adopt an Angel
where fur babies find their human . . .
Background
Approximately 6.3 million companion animals enter U.S. animal shelters nationwide every year. Of those, approximately 4.1 million are adopted. That leaves 2.2 million yearly that are left languishing in cages or euthanized.
Despite the numbers of animals needing homes, many people that are willing to adopt, report feelings of frustration and fail to adopt when interacting with shelters and rescues. Shelters are so busy caring for the animals and/or operating on low (or mismanaged) funds that public facing procedures are sorely neglected. Money, time and strategy is needed to advertise, interface with and screen the public.
*These estimates are based in part on Shelter Animals Count.
Let's create an app to make adopting a pet from a shelter easier. The goal is to improve the lives of both humans and animals.
Problem
We are creating a new app to help people adopt a pet from a shelter. We need to find out if the main user experience, finding and applying for a pet is easy for users to complete.
Solution
My pet adoption app will let users browse pets and apply to adopt them online. It will be welcoming, efficient, easy to use, accessible and a pleasurable aesthetic experience. This will reduce frustration and improve placement numbers. More people will welcome rescues (and the love that they bring) into their homes.
Methods
Personas, User Journey Map, User Flow, Competitive Audit, Sketches, Wireframes, Usability Testing, UI Design, Low and High Fidelity Mockups and Prototypes
I utilized the methods learned from Google UX Design Certification@Coursera.
We will measure effectiveness by:
search functions performed
pet applications submitted
Tools
Figma
Adobe Creative Suite
My Role
Solo project
UX / UI Design
Timeline
Overall: 8+ weeks
Discovery & Research: 3+ weeks
Design & testing: 6+ weeks
My Design Process
Understanding the User
To understand the user as well as the services that competitors provide
I utilized the following methods to begin:
Personas
User Journey Map
Pain Points
Competitive Audit including Visits to location both onsite and off
Personas
I wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, I created 2 personas for each of our user segments. I based these characters loosely on people that I met in the real world when visiting shelters or adopting out kittens from rescue organizations. I have spent a significant amount of time both working and volunteering at shelters/rescues such as ASPCA Kitten Nursery (NYC), ACC (Brooklyn), Brooklyn Animal Action and others.
I used these personas whenever I wanted to step out of myself and reconsider my initial ideas.
I visualized these personas while I built the app every step of the way and considered their reactions and potential paint points during user journey flows.
User Journey Map
I created a customer journey map to build a better understanding what steps are involved in adopting a pet. The reason I used this method is to discover the pain points that the user experiences each step along the way. The map below highlights user problems and opportunities. The trickiest points for the user are during the search and application stages.
I determined that I need to make sure that there are robust design solutions in place for those stages of the customer journey.
Top 4 Pain Points
Creating a "User Story" and an "If/Then Statement," helped me to empathize with user pain points. I could then more easily work towards solving those paint points with design solutions.
User Story: Agustin
As an immigrant student with a family
I want to learn about which pets are available / I need a Spanish version of an app or website
so that I can adopt a pet without language being a barrier to me
If / Then Statement: Agustin
If Agustin downloads the shelter app
then he can read clear directions in Spanish and adopt a pet
Indirect and Direct Competitors
User Research: Competitive Audit Report
I performed a Competitive Audit Report, where I compared the pet adoption experience and flow of each competitor's desktop or mobile experience.
Included were: ACC, Animal Care and Control for NYC (key direct competitor); ASPCA (indirect competitor); Bidewee (direct competitor); and Northshore Animal League (direct competitor.
Findings:
Some gaps identified include:
No breed-specific education
Limited accessibility features
Lengthy and confusing adoption process directions
Some opportunities identified:
Offer info on breed characteristics
Streamline adoption procedure
Offer translation to include non English Speakers
Offer accessibility features
Offer online chat to support users
Inspiration:
The Northshore Animal League provided thorough and clear user experiences within their desktop / mobile digital products.
Downside: directions communicated in long, hard to digest paragraphs -especially challenging for ESL users.
User Flow
How can we make the journey inclusive and easy? My goal is to simplify and streamline the process of identifying a pet and submitting application. My goal is to address the user pain points and offer solutions.
Pain points addressed in this flow:
Adoption Process clearly outlined on individual pet page
Available pets easy to search with simple and advanced pet browse function
Language selection on second screen- prior to having to navigate app
Scheduling will be incorporated within submission forms.
Just including multiple language speakers will open access to thousands of people that would be otherwise be unable to go through the search and application process which is necessary to adopt. That converts to thousands of additional pets in loving homes rather than in the shelter or euthanized.
While I want to offer additional functionalities, I don't want them to come at the expense of a very easy user experience that is simple to navigate. Additional functions can be placed in locations that are findable but not distracting or confusing.
The goal is to reduce drop off rate and increase conversions.
Streamlining the Flow
Starting the Design
Sketches
I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user needs as well as addressing their painpoints. I kept in mind the goals of streamlined simple UI, and design principles of hierarchy and proximity.
The 5 initial versions of the Home Screen. On Home page, user can start the search immediately by clicking
on the picture of the species of animal they choose. I experimented with multiple layout options.
I strove to focus on images, icons and minimal, strategically chosen copy
The main purpose of my sketches was brainstorming solutions.
Sketching and storyboarding were the springboard from which to build the wireframes.
Wireframes
Using Figma, I translated my first sketches into low-fidelity wireframes. Then, I improved them by adding a few relevant icons and copy that I wrote. At this stage, the wireframes were defined enough for some user testing. Based on tests of 5 participants, I made multiple alternations and moved on to creating high-fidelity prototypes.
Individual page with Pet detail
• Can change language from any screen added after usability testing
• Info: history, breed, care, fees, age, gender, weight, ID number
• Chat feature [added after usability testing]
• Clear buttons for scheduling meeting or applying
• Arrows to easily browse more cats
• Multiple pictures in gallery
• Bottom Nav, hamburger menu for easy navigation
Refining the Design
Usability Testing
Using the low fidelity prototype, I conducted Usability Testing (5 participants) in the first round. I iterated on issues that were identified and then moved into designing high fidelity mockups. I created a fully-functional, high-fidelity prototype of the new flows using Figma.
Then I performed two more rounds of Usability Tests with 3 /3 participants. Below are screenshots before and after Usability Testing with improvements explained.
Design solutions evolution for adoption process pain points
Design solutions evolution for searching available pets pain point
Improvements before and after Usability Testing: searching available pets
Addressing User Pain Points through Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand. Adopt an Angel - matching rescue animals with their human.
Keeping these goals in mind, I started choosing/creating colors, icons, design patterns, interactivity and imagery.
Cheerful yet professional. Endearing, heartwarming, simple, welcoming and clean
Contrast aligned with W3C standards
Designed for mobile
Interactivity
I chose pictures of people interacting with pets to inspire the user to forge through the process and focus on the end goal which is a loving connection with a rescue. The person may have had trouble adopting before but by using this app, they will be able to identify and adopt a pet.
Style Guide: TO COME
Working Prototype
Search available pets easily
[pain point: search available pets]
1 design solution for Search pain point
Scroll horizontally to view available kittens. Can reset the filter options via pop up screen or chips.
Search available pets easily
[pain point: search available pets and breed filter]
1 design solution for Search pain point
After feedback from usability study, I added an additional filter screen which slides up on top of the search results page.
User can change filter choices using filter screen instead of using dropdown arrows from chips (as previously).
On the chips, I changed the drop down arrow to an "X." User can remove filter selection by pressing the X on the chip.
Choose time of meeting
[pain point: scheduling]
1 design solution for Scheduling pain point
User can choose their preferred time. This can work if it is a shelter that has staff onsite 24/7.
Otherwise, user will only be able to choose available times on the scroll. If they choose an unavailable time, an alert will guide them to choose different time.
Schedule of available times will be listed below or above the component.
Next Steps
01
Continue refining UI.
Add micro animations to engage the user and make more clear functionality.
Enable AI powered searches for breed information. Match function so that users can search which breed would be a good fit for their household.
02
Start to build out working app in WebFlow
Allow shelter/rescue to customize their questions in screening process.
On back end shelter can customize to their own specifications
03
Conduct more user testing to identify additional pain points for users
Learnings
While including many options and features is tempting, that can lead to cognitive overload for the user. Too many options becomes confusing and increases drop off rates. Therefore I focused on clarity and ease of use over incorporating all of the functions that I wanted (for now).
Time and budget constraints were a consideration for me when determining which ideas to incorporate. I chose to create the basic app first and then will add more functionality at a later date. I need to manage my available resources properly in order to actualize the vision at all.
Thank you for reading my case study!
Want to collaborate? Feel free to contact me!
karina.design.ny@gmail.com
...or just say hello on my social media.