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, I endeavored to manage all aspects of the UX and UI space.
From initial secondary research to high fidelity mock-ups, I endeavored to manage all aspects of the UX and UI space.
Quick Stats:
DISCOVER
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
"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
Research Interviews
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.
Early on in the interviews, I heard a resounding frustration with unorganized and unresponsive communication from nearly every shelter.
DEFINE
Affinity Map
After sifting through 4+ hours of footage an affinity map was cobbled together and almost immediately, certain patterns/common pain points emerged. I started asking more questions:
After sifting through 4+ hours of footage an affinity map was cobbled together and almost immediately, certain patterns/common pain points emerged. I started asking more questions:
Would a feedback system 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?
Would uniform criteria input and messaging processes help streamline?
On the shelter-side, could I build an algorithm that filters out problematic applicants? (This, obviously, would require personality input from shelter staff and foster families).
Would uniform criteria input and messaging processes help streamline?
On the shelter-side, could I build an algorithm that filters out problematic applicants? (This, obviously, would require personality input from shelter staff and foster families).
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 to round out the offerings.
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 to round out the offerings.
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 I get from Point A to Point B?
- How can I “fail fast” and get dialed in?
- What did I miss?
- How do I get from Point A to Point B?
- How can I “fail fast” and get dialed in?
- What did I miss?
Wireframes, Wireflows & Guerrilla Testing
I simplified some of the interfaces to be more streamlined and minimal. Additionally, I was 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, 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 the “SKIP” button was introduced.
After initial guerrilla usability tests I stumbled upon a hiccup. It was pointed out, 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 the “SKIP” button was introduced.
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).
Design System
I built out a mini design system for this assignment, even though I only had to create a few buttons with the usual states. Suffice it to say, I know what nested symbols are and why they're absolutely crucial to eliminate wasted efforts.
I built out a mini design system for this assignment, even though I only had to create a few buttons with the usual states. Suffice it to say, I know what nested symbols are and why they're absolutely crucial to eliminate wasted efforts.
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 confusion 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. [moved from MLP 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." [added to backlog after a solid laugh]
-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, with reduced friction during the on-boarding stage and subsequent completion processes. Some solutions I came up with don’t apply to front-end design. 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 and address some of the information gaps. In the near future, I’m going to build out the shelter-side dashboard to fully round out this exercise.
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, the ideas of "Research First," "Fail Fast" and the need to maintain 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, the ideas of "Research First," "Fail Fast" and the need to maintain 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.
