OVERVIEW
- HELLO + WELCOME
- RESEARCH + STRATEGY
- 3 KEY FLOWS
- APP DESIGN CONT.
- CONSIDERATIONS
- BONUS: THE BROWSER
- BONUS: MY DESIGN PROCESS
HELLO + WELCOME
First, thank you for the opportunity for this design exercise. Of the 3 prompts given by Google to design for, I chose "Pet Adoption" as it aligns with my personal interest (also, my family happened to go through their own dog adoption at the time of this exercise, so I leveraged them for realtime user research). Below, you will find a breakdown of critical steps I went through to design an application that helps Adopters find their new pets. Please note this design is scalable to all types of pets.
The Prompt: "Millions of animals are currently in shelters and foster homes awaiting adoption. Design an experience that will help connect people looking for a new pet with the right companion for them. Help an adopter find a pet which matches their lifestyle, considering factors including breed, gender, age, temperament, and health status. Provide a high-level flow and supporting wire frames.”
The Prompt: "Millions of animals are currently in shelters and foster homes awaiting adoption. Design an experience that will help connect people looking for a new pet with the right companion for them. Help an adopter find a pet which matches their lifestyle, considering factors including breed, gender, age, temperament, and health status. Provide a high-level flow and supporting wire frames.”
RESEARCH + STRATEGY
I begin all projects with a discovery/stakeholder meeting with the primary stakeholders involved. During this meeting, initial questions are asked to get a sense of the scope of the project, goal of the design, technical limitations, and things to consider. For the purpose of this design prompt, I have answered questions through basic research and considered realistic constraints, as they’d be applied to society. User research methods applied include user interviews, observational studies, user journey mapping, and birds eye flow diagrams.
Research for this project was gathered from Dog behaviorists, the VCA Animal Hospitals, Humane Society, American Veterinary Medical Association, and others such as PetMD and interviews with Rescue owners. I used these people and organizations as the primary stakeholders, and leveraged their insight to inform the key considerations (such as how to qualify a potential adoptee), what lifestyle factors are important to consider, and what criteria are important to have when people are choosing a pet.
Research for this project was gathered from Dog behaviorists, the VCA Animal Hospitals, Humane Society, American Veterinary Medical Association, and others such as PetMD and interviews with Rescue owners. I used these people and organizations as the primary stakeholders, and leveraged their insight to inform the key considerations (such as how to qualify a potential adoptee), what lifestyle factors are important to consider, and what criteria are important to have when people are choosing a pet.
Key Findings
___________________________________ Q. Who are the primary users? Who are the “Adopters?” A.Young professionals, Families, Couples, Single middle-age professionals, potential for Retirees/Seniors Q. What kinds of animals are commonly found at shelters? A. Cats, Dogs, Rabbits, Turtles (“normal” pet suspects) - primary animals found on rescue sites Q. What are the technical considerations? A. Design a platform that is accessible to the mass public; an Application will be the primary design as it is a contained and controlled environment. Additionally, hosting on web for immediate accessibility as this is where many Adopters get their start. Promote the app on the site at the very top. Q. How should the app customize a pet to an adopter? A. Adoptees will be matched rescues on the basis that’s best suited for their lifestyle; they will also be qualified through the app, as we can't assume all people are ready to adopt (for example, someone who can't commit to daily needs). To overcome discrimination in the process, ensure the results are “recommendations,” and help guide users decision making process to overcome biases (for example, a user might think they want a puppy, but they’d actually be much happier off by adopting a well-behaved and trained adult dog because of their busy lifestyle). Ensure the user understands these are only recommendations based of their lifestyle inputs, which can be edited fluidly. Q. What factors should be considered when making a match? A. Lifestyle factors including Breed, Gender, Age, Temperament, and Health status. In my research, I found that important information to obtain from the user is to get a sense of the user’s schedule (availability), the user’s health (allergies and activity ability/willingness). Q. What things should we be optimizing for when building a pet adoption platform? A. It’s critical that the pathway to setting up in-person interaction meetings between the user and the animal is the primary goal of this application. Adopters and adoptees need to be in-person to build rapport and chemistry. Optimizing the pathway to “LET’S MEET” should be the primary focus of this application. |
Lessons From Stakeholders
"It's important to remember that there's huge benefits for adopters to consider adult dogs and cats; they're usually the ones who will have the easiest transitions because they're house trained, know how to be on a leash, and are easier to care for off the bat."
- Human Society, S. Arizona
"It's essential to find the right dog in person. When visiting a dog, consider *your own* experience. If you're an experienced dog owner, you may want to choose a more self assured dog; if it's your first dog, you might want to go with a more coy dog as their personality may be more observant."
- Cesar Millan, Professional Dog Behaviorist, 25 years experience
"I felt the size of which dog I chose was important because I live in an apartment...I narrowed the search for him down from thousands of available rescues.”
- Adopter of Raffi, adult rescue dog
3 KEY FLOWS
Find, Saved, + Connect
To create the app's architecture, the user research is leveraged to create a flowchart that maps out the hierarchy of the application, per the 3 primary features: "FIND," "SAVED," + "CONNECT." This user flow diagram shows how the user can attain the 3 primary goals.
This dialogue then informs how to map out the app's architecture. I interviewed potential Adopters and asked them to walk through the vision of a product. Above is the result of refining and visualizing / mapping the needs of the users.
Note: images below yield access to the png file.
This dialogue then informs how to map out the app's architecture. I interviewed potential Adopters and asked them to walk through the vision of a product. Above is the result of refining and visualizing / mapping the needs of the users.
Note: images below yield access to the png file.
Why Three Key Flows?
During the research and stakeholder analysis phase, it was evident that in-person interaction was key for a successful adoption. I believe feature bloat is all too easy, and all too real, when we need to focus primarily on what will help achieve the user goal: to find their perfect pet. Narrowing in on primary key features was important here, hence the only 3-piece nav system: FIND, SAVED, & MESSAGES/APPTS.
It is important to address user needs, and include secondary features in the application, such "Call this pet shelter." However, this is separate from designing the core application and its primary flow feature set.
It is important to address user needs, and include secondary features in the application, such "Call this pet shelter." However, this is separate from designing the core application and its primary flow feature set.
APP DESIGN CONTINUED
Mapping Bird's Eye View (LoFi)
The birds eye view of the screens help map out the bigger picture production for how the app flows. It helps yield a richer vision for the product direction. From research, the primary flows of "Find," "Saved," and "Messages/Appointments" needed to be entirely accessible. From the key findings, I kept in mind the goal state is to optimize the pathway to an in-person meeting, making it as seamless as possible, as the in-person meeting is critical to a successful adoption.
Birds eye view (MedFi)
Working with a team
When demoing designs to stakeholders through the process, such as other designers, PMs, developers, etc. I've learned over the years, the super (duper) importance of properly communicating a design, regardless of what stage the design process is in. Proper communication needs depend on if you're emailing someone a design, uploading to a task-group, or leaving it in the hands of someone who hasn't yet seen it before. So much context can be lost if designs aren't properly communicated... especially in the midst of the design process. For example, above, I've color grouped the screens that represent each of the primary feature flows. Red is "FIND," yellow/green is "SAVED," and blue represents "MESSAGES/APPOINTMENTS."
This breakdown of coloration and annotation, helps stakeholders, especially PMs, designers, and devs conceptually group like-items. My goal as a designer is to ship designs that are well-communicated so that the team doesn't have to stare at the screen for very long to get a sense of what's going on. I've found that the ROI if greater than the extra time spent. This allows PMs and fellow designers especially to give more rapid feedback, rather than having to extra time to ask questions about what's happening.
This breakdown of coloration and annotation, helps stakeholders, especially PMs, designers, and devs conceptually group like-items. My goal as a designer is to ship designs that are well-communicated so that the team doesn't have to stare at the screen for very long to get a sense of what's going on. I've found that the ROI if greater than the extra time spent. This allows PMs and fellow designers especially to give more rapid feedback, rather than having to extra time to ask questions about what's happening.
Key Screens (slideshow)
FINAL PRODUCT
Here's my favorite part // every reason why I became a designer. This is where pixels are pushed and composed to finally piece together a meaningful design. The meetings, research, drawings, mapping, etc. finally come together to compose the final product design. I created here, five primary screens of the application to showcase a full flow from landing to the pet's profile page. You'll find that some of the UI has evolved from the start of the project, but the overall research was useful in guiding design decisions along the way. Everything on the screen, every placement, affordance, card design, menu item, navigation, content, and radius is chosen with purpose. I refined the design through basic user testing; some of the previous versions are included below so you can see how the design evolved with insight.
Previous Versions - Lessons Learned
After working through a few versions of the app architecture and getting continuous feedback from stakeholders, it's time for the High-Fidelity design. This phase is seldom a one-step process and typically goes through a couple iterations before landing on a high-fi design that is "just right."
Aesthetic-focused designs are perceived to be "easier to use" by users and are critical for user retention. I chose this aesthetic because I created the goal for the application to communicate trust, playfulness, yet ensure simplicity end-to-end. The goal of the final hi-fi design was to marry a sound, easy-to-navigate architecture with playfulness/trust/friendliness in the final UI.
Aesthetic-focused designs are perceived to be "easier to use" by users and are critical for user retention. I chose this aesthetic because I created the goal for the application to communicate trust, playfulness, yet ensure simplicity end-to-end. The goal of the final hi-fi design was to marry a sound, easy-to-navigate architecture with playfulness/trust/friendliness in the final UI.
CONSIDERATIONS
- Would you do anything different if given more time on this exercise?
- Because I tested the flows for this design so the next thing I would audit is the content. For example, I would change the “Saved” label to something more suited. Because we are working with rescue pets, the term “Saved pets” came back in my usability studies as confused with “pets that I’ve rescued.” I would update the label to “potential pets” or “bookmarked,” with the added caution of not objectifying or favoriting these animals in need of a home.
- I would also make sharing a higher level focus in the application, as there’s a likely case that we could increase the adoption rate if people seamlessly share matches with friends and those in their network - How will the user define a time that works for the shelter or foster home?
- To ensure that only times that work for the shelter owners, the shelter-party-user allows the shelters to one of two things: import their google calendar (or manually) sync their availability + the shelter may accept/reject/ propose a new time before the actual appointment is set. If they wish for it to be automated, then their calendar must be up to date with available time slots
- Why did you design the pet profile screen the way you did?
- I found there is a larger unknown realm for specific breed of pets at shelters / foster homes and therefore that becomes a secondary focus (in the about section as the user scrolls down the screen) moreover breed discrimination is very real and a large part of the reason these pets aren’t adopted in the first place. Therefore, pets are custom matched with Adopter-users on the basis of their lifestyle factors, allergies, activity level, etc. As opposed to the historical approach where a push for breed-type and aesthetic (“cuteness level”). This new design allows users to find a match best based on *who they are* as opposed to what they look like; breed discrimination is not far from employing a person based on their skin color as opposed to allowing their character and experience come first.
- What other features would be useful for this app?
- A useful feature might be a 2x weekly digest of recommended pets available for adoption, custom aggregated for the user. The user would receive an email with 3-5 pets available (not necessarily new to shelters), but this allowing higher exposure for the pets who are a great fit and need homes.
- Moreover within the app, post-adoption this app could send a via the message portal, a congratulatory message with a quick-start guide on tips for the first 90days with your new furchild
- Where does the business aspect come into play for this application? How can the maker monetize?
- First, very important: We do not make money from the shelters. They need all the the funding they can get as they’re supporting and sheltering pets in need. We are here to help them, not do the opposite. To monetize, once it’s confirmed that an adopter-user has found and adopted their match, we then have the opportunity to help them kickstart their journey. Through the messages portal, we can make offerings to new pet owners such as a starter pack (leash, bowls, treats, toys), and continue through content marketing on the site for tips of being a fantastic pet owner.
- Here also, is an opportunity to launch a secondary app for these new pet owners to help them connect, procure needs, and gather insight on being the best pet parents possible.
BONUS: THE BROWSER
For this project, it would be very important to develop a browser accessible experience as many (perhaps a majority) of owners will be beginning their search through the web, if on a device. The app would be promoted as a top-level item on the site and through shelter's sites, and is beneficial for a more focused experience but for the users who won't bother to download the app, it's important to have a consistent browser-accessible experience. As a bonus, I sketched out what the architecture and user flow may look like for an online browser experience. Please note this section is only to be serves as a bonus to the design exercise.
MY DESIGN PROCESS
Step 1: Research + Strategy
- Discovery Meetings stakeholders including PM’s and primary users to define User goals (i.e. Goal States)
- User Interviews / Observations / custom-selected Research Method
- Map Current “solution,” if any + list needs based off of Goal States
- Feature List (prioritizing primary versus secondary), User Flow Diagrams specific to stated User Goals
Step 2: Architecture + Flow
- User Flow Diagram
- Blueprint wireframes
- Individual Wireframes per Page or Screen
- Continuous Feedback & Research w/ PM, & Stakeholders
- Inclusive design
Step 3: Early Prototyping + Testing
- User Flow Diagram
- Specific Features Mapped
- Contextualized Interface Flow, Map Flow Details
- Continuous Feedback & Research with PM & Stakeholders
Step 4: HiFi Prototyping + Brand Integration
- High-resolution Dev Ready Design, Assets for Visual Design
- Annotation, Map Details
- Continuous Feedback & Research with Devs & Stakeholders
Step 5: Design Implementation + Development
- Annotating designs for Devs
- Making files ship-ready
- Working with Devs to ensure no loss-subtleties
- + Throughout, fostering strong working relationship with Developers
Thank you for visiting!
It's been a pleasure working on this design.
Questions or comments? hollyjade.mn@gmail.com
It's been a pleasure working on this design.
Questions or comments? hollyjade.mn@gmail.com