INTRODUCTION
Overview
Create a streamlined mobile app to facilitate better and quicker matched pet adoptions (and fosters).
Create a streamlined mobile app to facilitate better and quicker matched pet adoptions (and fosters).
Problem
The current process is inefficient and fraught with frustration on both the adopter's side as well as the shelter's side.
The current process is inefficient and fraught with frustration on both the adopter's side as well as the shelter's side.
User
Adults 25 - 45 years of age who either want to adopt or foster a pet.
Adults 25 - 45 years of age who either want to adopt or foster a pet.
Scope
From initial secondary research to high fidelity mock-ups for hand-off, I endeavored to manage all aspects of the UX and UI space.
From initial secondary research to high fidelity mock-ups for hand-off, I endeavored to manage all aspects of the UX and UI space.
Quick Stats:
DISCOVER
Research Interviews
Early on in the interviews, I heard a resounding frustration with unorganized and unresponsive communication from nearly every shelter.
For the MLP, we wanted to have a feedback system to help set expectations. Maybe having some sort of “adoption progress bar” or a notification indicating how many applications were pending per animal might manage anxieties?
Additionally, having uniform criteria input and messaging processes would help streamline.
On the shelter-side, I want to set our product apart and build an algorithm that filters out applicants that would be problematic. (This, obviously, would require personality input from shelter staff and foster families).
For the MLP, we wanted to have a feedback system to help set expectations. Maybe having some sort of “adoption progress bar” or a notification indicating how many applications were pending per animal might manage anxieties?
Additionally, having uniform criteria input and messaging processes would help streamline.
On the shelter-side, I want to set our product apart and build an algorithm that filters out applicants that would be problematic. (This, obviously, would require personality input from shelter staff and foster families).
"I inquired about plenty of animals that had already been adopted out or were pending applications. It would have been nice for the website to update their status more quickly so I didn't waste time filling out an application for a specific animal, only to find out that they weren't available."
– Lisa
Competitive Analysis
In an effort to see what I can learn from established adoption applications I ran an analysis on PetFinder, We Rescue and Get Pet. I filtered my observations through NNG usability heuristics to get very specific about what works and what doesn’t. The four criteria that helped dial things in:
- Match Between System and Real World
- User Control and Freedom
- Consistency and Standards
- Aesthetic and Minimalist Design
- Match Between System and Real World
- User Control and Freedom
- Consistency and Standards
- Aesthetic and Minimalist Design
DEFINE
Affinity Map
Via Zoom, I interviewed 11 pre-screened participants that had experience with either adoption, fostering, volunteering, management or a combination thereof. I asked them about their varying experiences, their thoughts, their feelings and in what areas difficulties arose.
After sifting through 4+ hours of footage an affinity map was cobbled together and almost immediately, certain patterns/common pain points emerged.
After sifting through 4+ hours of footage an affinity map was cobbled together and almost immediately, certain patterns/common pain points emerged.
Personas
From the Affinity Map I was able to funnel my findings into 3 distinct personas:
The Adopter is most concerned with finding a pet that will be a good fit for her family. An animal that can integrate so seamlessly that they’re considered a family member themselves.
The Volunteer wants to be of service and to help the helpless. Her main goal is to find the individual care and shelter that each animal requires.
The Owner wants to find homes for each animal as well, but is also concerned with the business’ bottom line and ability to find homes for as many pets as possible, as efficiently as possible. With the hopes that each animal is well matched to their new home and not surrendered later on.
The Adopter is most concerned with finding a pet that will be a good fit for her family. An animal that can integrate so seamlessly that they’re considered a family member themselves.
The Volunteer wants to be of service and to help the helpless. Her main goal is to find the individual care and shelter that each animal requires.
The Owner wants to find homes for each animal as well, but is also concerned with the business’ bottom line and ability to find homes for as many pets as possible, as efficiently as possible. With the hopes that each animal is well matched to their new home and not surrendered later on.
User Stories
I was able to produce 3 distinct User Stories to help refine our minimum lovable product as well as subsequent iterations. Focusing more on the Adopter’s experience I was able to narrow down our MLP to a few key features that will help expedite the decision process and give the user a bit more feedback on where they are in the process:
- Defined parameters for screening process
- Pet specific In-line communication channel
- Single input to upload and disperse information
- Defined parameters for screening process
- Pet specific In-line communication channel
- Single input to upload and disperse information
Site Map
After continued funneling, it’s become obvious that this project will have 2 different sides depending on user POV: adopter-side vs. shelter-side. Each has its own needs and goals that are vastly different. In the spirit of simplicity and removing as much cognitive load as possible, I’ve tried to design comprehensive and intuitive maps with 3 high-use sections with no more than 2-4 layers per (omitting the MENU).
For the sake of this exercise, I’ll be focusing on the mobile app for the adopters. When time permits, I fully expect to build out the shelter-side dashboard (graphic on right) to round out the experience.
For the sake of this exercise, I’ll be focusing on the mobile app for the adopters. When time permits, I fully expect to build out the shelter-side dashboard (graphic on right) to round out the experience.
User Flow
Redline from on-boarding to adoption is simple, straightforward and only requires a minimal amount of information to be initially front-loaded by the adopter / foster applicant – algorithmic criteria that’s critical to determine an animal’s potential to succeed in its new home.
[Note: this step can be skipped, but the will negate the most powerful feature of the platform]
The main user activity will be directed towards top-level reviews of weighted, best-matched pets (based on a criteria sorting algorithm). Then potential matches are further refined to three FAVORITE candidates for application. From there, a face-to-face meeting is scheduled with any/all shelter-approved pets and a final decision is made by the user.
[Note: this step can be skipped, but the will negate the most powerful feature of the platform]
The main user activity will be directed towards top-level reviews of weighted, best-matched pets (based on a criteria sorting algorithm). Then potential matches are further refined to three FAVORITE candidates for application. From there, a face-to-face meeting is scheduled with any/all shelter-approved pets and a final decision is made by the user.
DEVELOP
Sketches
Pencil to paper, time to start thinking about the redline in a more tangible way. Some of the questions we want to answer are:
- How do we get from Point A to Point B?
- How can we “fail fast” and get dialed in?
- What did we miss?
- How do we get from Point A to Point B?
- How can we “fail fast” and get dialed in?
- What did we miss?
Wireframes, Wireflows & Guerrilla Testing
I simplified some of the interfaces to be more streamlined and minimal. Additionally, I were really able to flesh out the messaging process which was a bit nebulous in the site mapping and sketch phases.
After initial guerrilla usability tests I stumbled upon a hiccup. It was pointed out was the “Home” button interface was unclear. It had dual purposes: a way-finder for settings and used as a directional when engaged in other tasks. The idea being make it easy for the user to back out of any decision.
Additionally, some people did not want to sign up and go through the on-boarding process initially, so it was good that the “SKIP” button exists.
After initial guerrilla usability tests I stumbled upon a hiccup. It was pointed out was the “Home” button interface was unclear. It had dual purposes: a way-finder for settings and used as a directional when engaged in other tasks. The idea being make it easy for the user to back out of any decision.
Additionally, some people did not want to sign up and go through the on-boarding process initially, so it was good that the “SKIP” button exists.
Style Guide
Imagery Inspiration
Simple, fun line drawings and icons to keep it modern and digestible.
UI Inspiration
Dating apps like Tinder, Bumble and Hinge provide a recognizable swipe format that is easily understood by a broad range of users. This level of affordance was built in at the inception of this project.
Simple, fun line drawings and icons to keep it modern and digestible.
UI Inspiration
Dating apps like Tinder, Bumble and Hinge provide a recognizable swipe format that is easily understood by a broad range of users. This level of affordance was built in at the inception of this project.
Color Palette
Gender neutral relying mainly on light shades of grey to stay minimalistic. Highlight colors correspond with gender ambiguity (purple), passion (burgundy) and familiarity (beige).
Gender neutral relying mainly on light shades of grey to stay minimalistic. Highlight colors correspond with gender ambiguity (purple), passion (burgundy) and familiarity (beige).
High Definition Mock-ups & Usability Testing
After building out High-Def prototypes I put the app back into 2 additional testing phases. In the first round, I identified some issues with the navigation hierarchy as well as some ambiguity regarding message notification.
The second round of tests confirmed that I addressed and solved the previous issues.
Additionally, I tested the app on an individual that was outside of our target audience to see if we had an intuitive design that an older demographic could navigate. I’m happy to report a resounding success!
The second round of tests confirmed that I addressed and solved the previous issues.
Additionally, I tested the app on an individual that was outside of our target audience to see if we had an intuitive design that an older demographic could navigate. I’m happy to report a resounding success!
"Some things I noticed when I went through it: the Buddy Score is not self-explanatory without knowing about the algorithm that matches user to animal. [added to backlog] In the Faves Tab, user needs to know if there’s a message pending that’s tied to a specific animal. [built into prototype] Add happy woof or sad whimper / Sarah McLaughlin sounds to swiping action." [hilariously added to backlog]
-Jason
Prototype
DELIVER
Goal Achieved?
I think this was a pretty good initiation to UX / UI. I was able to get the mobile app pretty streamlined, reducing friction in on-boarding and subsequent completion processes. Some solutions don’t exist in the front-end design of the experience though. Specifically, an algorithm needs to be written to filter best-fit matching scenarios. Additionally, I think mandatory DNA testing should be built into the adoption fee to better inform users of what to expect with their new family member. These 2 efforts will greatly increase the ease of the experience. In the near future, I’m going to build out the shelter-side dashboard to fully round out the exercise and explore a different aspect of my education.
Lessons Learned?
This first foray into UX / UI has been illuminating to say the least. I learned my assumptions are just that, approximate guesses. They will ultimately be tested either true or false; and yes, sometimes I was proven incorrect. However, that yielded a tool that better suits the users' actual needs and not what I think those needs are. I also discovered that getting "married" to an idea is a waste of time. I spun my wheels early on, extrapolating possible solutions without the full perspective provided by research and interviews. I'm glad I did this. It truly reinforced, firsthand, the idea of "Fail Fast" and the need for maintaining flexibility in all aspects of the process. These were areas in need of drastic improvement on my part and I believe those lessons will pay dividends in my subsequent work.
This first foray into UX / UI has been illuminating to say the least. I learned my assumptions are just that, approximate guesses. They will ultimately be tested either true or false; and yes, sometimes I was proven incorrect. However, that yielded a tool that better suits the users' actual needs and not what I think those needs are. I also discovered that getting "married" to an idea is a waste of time. I spun my wheels early on, extrapolating possible solutions without the full perspective provided by research and interviews. I'm glad I did this. It truly reinforced, firsthand, the idea of "Fail Fast" and the need for maintaining flexibility in all aspects of the process. These were areas in need of drastic improvement on my part and I believe those lessons will pay dividends in my subsequent work.
Update
Day 1 with Ohren puppy.
