Design sprint Case Study

Overview

This is a Google Ventures design sprint project.

The design sprint is a 5 days process to build a project from sketch to high fidelity screens and tests.  For this project, I conducted it solo. Research datas was provided by Bitesizeux and Springboard.

Role

UX/ UI designer

UX/UI researcher

Duration

40 hours

Tool Used

Figma

Google form

Miro

About CityPup

CityPups is a new startup company that wants to build a website to help people live in the city to find the perfect dog to adopt. 
Once a user decides to adopt, they will get sent to third-party contact to start the adoption process.  

During the research and interviews, CityPups discovered people living in the cities struggle to find the dogs that match their unique needs to adopt.

Their struggles include limitations on living spaces, schedules and transportation, outdoor spaces, etc.

Problem

Goal

The goal for this project is to build a website to help people living in the city find their perfect dog that matches their unique needs to adopt.

We are aiming to increase the adoption rate, happier owners and better “forever” homes for dogs.

Persona

👱🏻‍♀️ 27 years old

📍 New York City

🏡 Lives alone (Studio apartment)

  • “Saved” a lot of dogs on instagram;

  • Spoken to adoption agencies to ask questions;

  • Asks people and friends in her building who have dogs for advice.

Ellie

Behavior

  • Most adaption website make connection between dog and people, so she tends to feels connection with dogs that doesn’t “fit” her specific needs (such as size, attention or activity levels);

  • Time consuming;

  • Description on the website is too general.

Frustrations

“I don’t feel 100% confident that 
a dog will be a good fit for me AND the dog.”
— Ellie

Map

After listening to all the interviews, I mapped out some potential flows. I created one that has essential patches users would take, I keep this flow as simple as possible, so users would not feel confused during the process.

How might We

  • How might we help people find the dog with their specific need within a shorter period of time?

  • How might we help people feel more confident that the dog that they were going to adopt is a good fit?

Lightning demos

I got inspired by the websites “Petfinders” and “Adopt a pet” for my lightning demos.

Sketches

I think the most important page  is where users set “requirements and filters” to find the dog that matches their living situation. Therefore, I did Crazy 8s on the filters and requirement setting page.

Three - Panel board

Search with Zip code

Search with distance

Sort

Multiple pictures on dog profile page

Filter

Filter on distance

1.Users enter the Zip code to search dogs in their area first;

2. Users use filters to find dogs matches their needs

3. Users click on the Apply button to start their adoption process.

Decide

Following my three-panel board from Day 2, I started to expand more about details on how CityPups would help users to find their “right” dog.

I decided:

  • Ask users to select their current living spaces they can provide to the dog at first step, so we can help them narrow down the size of the dog.

  • created a list of filters that are necessary for users to put in their needs, such as age, gender, size, energy level, and vaccine status.

Prototype

Based on my sketches from Day 3, I started to build wireframes and hi-fi screens in Figma.

For the style guide, Bitesizeux provided the Logo and Primary color. I built the typography, colors and UI kit that I think would be a good fit for the website.

While I built the wireframes, I decided to exclude some of my initial sketches, such as the page of the adoption process.

I decided to add filter selections at the top of the page, so users could delete filters they don't want after applying it.

Test

I conduct 5 usability tests, each for 20 minutes.

Key Finding

  • Users were not sure why they need to choose living spaces on first page;

  • The drop down filters took users a lot time to click and then apply;

  • Users were not sure if they could make multiple selections for each filter category.

  • I moved the “enter zip code” and “choose living space” together on the first page, and also added some explanations on the first page. Users could see why they need to choose the living space and they will be able to edit it later. 

  • The next thing I iterated is filters.

    I decided, instead of using drop down for all categories, I chose to use radio buttons for ones that could make multiple choices. I also added a slide bar for “size”, so users could pick the size of the dog by selecting the weight range.I removed the “Apply” button, instead of applying all selections at the end, users would be able to see their selection of filters in the background while they applied the filter.

iteration

Final thought

This project is a bit challenging. I have to force myself to finish every step and gather enough information in a very limited time range. However, I enjoyed and learned a lot during the process.

Although there are still flaws in my final screens, I believe it could help people who live in the city to find a dog that matches their needs to adopt.