Google Design Exercise

Question

"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."

My Story

When I was in college, I volunteered in Paws, a local pet shelter in Seattle. I saw many homeless or abandoned pets were picked up by good-heart people or family. Meanwhile, I also noticed there are many obstacles for new people to pick up and take care the right pets. In this design exercise, I will talk about my design process to solve this problem and introduced my designed app, Home Pet.

Design Process

In this project, I followed the user centered design process (UCD) to conduct my user research, design ideations, and prototype. Since I only have 7 days to finish my design challenge, I get inspired by Google Design Sprint to plan my work and arrange my time from Map, Sketch, Decide, Prototype to Test sessions.

User Interviews with pet adopters and shelter manager

In order to understand user's pain points, I interviewed three people around me, one of them already finished the pet adoption in Seattle Pet Shelter and the two others are planning for pet adoption right now.

From these interviews, I understood the user journey and users' pain points in the pet adoption. [scripts shows on the right side]

The following graphic is the user journey process of pet adoption in Washington states with pain points in each task. Based on these pain points, I also did a stakeholder interview with Thomas, a pet shelter manager in Seattle.

Funny Quotes from Interviews :-)

"Looking for pets is like dating... you should find the one who you guys like each other, not the one who doesn't like you :-)" - a pet adopter

"I have came to Paws (a local pet shelter) twice but I have not found the pet I like yet. I am not clear about the policy so it takes a while to understand the process" - a 1st time adopter

Scaling to target users

Many designers like to create personas in design exercise but I decide not to do this time. The main purpose of creating persona is to define the target users and their pain points in real scenarios. Because my user interviewees have similar directed goals, I decided to focus on this specific user group - young people who are unfamiliar with pet adoption rules, no pet experience, but still want their first pets and take good care of them. :-)

For pet adoption, adopters need to sign and keep all the documents. It will be great for adopters to keep everything in one place and discuss with shelters easier so I decide to choose mobile as my design platform.

Competitive Analysis

Before starting the real design ideations, I also tried so some similar pet adoption concept apps on my smartphone and read the positive & negative reviews on the app store. It helps me to avoid some similar mistakes when I design my own app.

Screen Shot 2018-03-12 at 10.40.16 PM.png

Research Insights

From the interview scripts, I highlighted the 4 adoption obstacles that the Google Home Pet App can help to solve:

Lack of information resources: Most of the adopters only contacted with a few pet shelters they heard from friends in their living areas without considering other places, even though there is no huge difference between shelter and shelter.
Small adoption range: Companion is important. Adopters always look for pets on their preference without considering realistic situations and personal character.
Lack of communication: Most of the shelters reply people's requests using email instead of replying people's posts from websites or social media. It always takes a couple of days for adopters to receive the schedule to see pets or get answers from shelters.
Lack of adoption knowledge: Most of first-time adopters don't know they need to sign their names on the pet adoption policy, pet care policy, and insurance policy. Although different shelters have different rules, most new adopters are unclear about the adoption process.

Sketch Ideations

Based on the research insights, I drew some sketches to solve these adoption obstacles in key UIs.

From these sketches and user journey, I started to create the information architecture. I wrote the key UI and features on the stickers and put these stickers on a whiteboard by order (card sort).

Information Architecture & Wireframe Workflow

Based on the card sort results, I created a high-level information architecture for my pet adoption app.

According to the information architecture and user journey, I re-drew the sketches with more details in the main workflow. Because the time is urgent, I only drew the key workflow in my sketches.

After finishing the sketch workflow, I also defined the icons and layout on my sketch as well for later prototypes. Because it is Google design exercise, I followed the Google Material Design guideline for visual design based on the requirement.

Low-Fi Prototype Workflow

User Testing

I iterated the wireframe by conducting informal usability testing with two people on the low-fidelity prototypes.

Two participants are the potential pet adoption app users who I interviewed with them previously. They provided feedbacks on error-prevention methods, accessibility, and discoverability of the UI.

Based on the user feedback, I iterated the low-fi prototype with the second iteration.

Iteration 1 Home Page Pet info layout

Participants do not like the pet info layout on the home page, they want to see more pets information on the UI. The card design idea is not suitable in this case because the text shadow part overlaps the pets' pictures.

Iteration 2 List page and Map Page layout

Participants like the list page a lot. Map page is not as important as list page. Participants are more likely to see the pet photos even on the map page. Another issue is there is no filter icon for users to choose from Map page.

When I was in Airbnb, I designed some map layouts which is more accessible for users to check info. Inspired by the current Airbnb app, I decided to put map and list together on one Map page.

Iteration 3 Adoption policy and Chat inbox

Participants felt that adoption policy and chat inbox are very important in adoption process even they may forget about those when using the app. The adoption rules are very helpful for new adopters to learn the basic rules and pet adoption duty.

Therefore, I add the adoption policy in pet info page and add chat inbox icons on the navigation bar to highlight the features' importance.

Visual Design Language

For the Design Language System, I followed the Google Material Design guideline to define the typographic, icons, colors and layout. I also took some small changes on the colors and layout referenced by Dribbble and Lottie.

Typography & Icons

Screen Shot 2018-03-13 at 11.33.24 AM.png

Visual Colors

From what I found on the Dribbble, red and blue are the two most popular colors for designers to use in "pet" and "adoption" topics so I decided to use these two colors as my color themes in my app design.

Hi-fi Prototypes

I used Sketch for hi-fi prototype and InVision for interaction design

Responsive App based on screen size (Pixel 2 and Pixel 2 XL)

Step 1: On Boarding

Users can log in to their Gmail account. The personal information will be automatically filled by the system and users only need to provide the password for this app account.

After reading the adoption policy, users will jump to the homepage to search the pets they want.

Step 2 Search, Preference Settings & Decide

Users could search the keywords or use filter tabs to find the pets they want to adopt (find good companion). They can use List UI or Map UI to find the pet and shelter location.

Click on the pet picture to see the pet information details. If the user feels the pet is a good fit for them, he/she can schedule an appointment with shelters. If the pet is not a good fit, the user can check similar pets information at the bottom or go back to pet list.

Step 3 Schedule, Letter of Agreement & Inbox Chat

If the user like the pet, he/she can make an appointment with the pet shelter on the App directly with specific date and time. Before coming to the pet shelter, the user needs to sign the shelter policy for safety guarantees.

If the user has any questions about pet adoption, he/she can ask the shelter assistant from inbox directly. The message will automatically send to shelter's email address.

Last but not least - Tech Spec

In real work case, I like to use Zeplin, Figma, and Redpen.io for work collaboration with researchers, PMs and engineers. In this project, I choose Zeplin for tech specs.

Reflections

There are four aspects I would love to dig deeper for the further improvement of the app.

User segment analysis. In this project, I only did qualitative user research without any real user data. If it is possible, I would like to learn more user preference on pet adoption to provide better App.
More detailed wireframe, the current information architecture is high-level workflow. There are still some important details need to explore if we want to make it as a real product.
If time is longer, I would like to spend more time on visual design, especially color and layouts.
Think Google products as a whole service. The current app is a separate app isolating with other Google products. If it is possible, I would like to connect the pet adoption idea with other Google products, such as Google Search, Maps or even Google Home.

Finally, I felt the design exercise is a great way to learn myself's strength and weakness on product design. "Take it easy and enjoy the challenge" that is what I want to say to myself.

Thank you so much for reading the project process book! If you are interested in other projects I did previously, come to see my portfolio website! :-)