CitiPups

About CitiPups

CitiPups strives to facilitate adoptions and create "forever homes" for their pets. But user research shows that New York City based users often leave the site with unanswered questions regarding the pets they are browsing. Furthermore, areas of friction make the process slower, and discourage otherwise successful adoptions. As a dog owner myself, I saw the opportunity to meaningfully translate user research into a project that would benefit the lonely dogs out there

This Case Study

By collecting and analyzing the interviews of New York City based users, I can re-design CitiPups' search and display pages. By adding features like filters and sorting buttons, I can provide the users with important information quickly and efficiently and increase the rate of adoption.

Contents

Day One

Possible End to End Experience, Lightning Research

Day Two

User Interviews, Highlights from Interviews

Day Three

Design Sprint and Sketching

Day Four

Wireframing and Prototyping

Day One

Possible End to End Experience, Lightning Research

Possible End to End User Experience

I began by outlining the User Experience I would be redesigning. I tried to keep it simple and avoid unnecessary changes in order to complete the project within the one week deadline, and give the essential changes the most time and effort.

The prototype would walk through browsing available dogs, filtering for specifications, sorting the results and reading more about a selection

Lightning Research

I collected insights on other competitors adoption processes and gathered pros and cons of different searching and filtering functions. Ideas for filter buttons were pulled from sites around the internet, including Spotify's "mood" filter method, re-appropriating it to filter dog breeds. This stage helped to inform the design drafting step, and was also used to iterate the end to end experience map

Like It

Radius filtering
'Sort by' option

Leave It

Messy formatting
Color scheme isn't attractive
Updates button placed randomly
Search bar is not intuitive

Like It

Visually pleasing dog cards
Location information on dog card
Extensive filtering options
Filters Applied section
Prompt to begin search

Leave It

Color scheme

Day Two

User Interviews, Highlights from Interviews

User Interviews

Several user interviews were condensed into their main ideas and expressed frustrations. One user participated through a zoom interview in which they walked through their process of adopting. These insights would then be condensed into concrete problems and their design solutions

Anna is 27 years old and looking to adopt.

She wants to find an emotional and lifestyle fit for her dog who will join her

in a studio apartment with no roommates.

Anna finds it time consuming to ask CitiPups representatives questions about her selection and represents a type of user that CitiPups could better serve

Interview Highlights

Each recurring issue was recorded and grouped by importance. By the end of the process five main friction points during the adoption process made themselves clear. The radius filter was not suited for NYC users, the results page was not customizable enough to meet the user's needs and important information like the size, adoption fee and location were shown too late in the user journey, which often frustrated the users. Solutions were drafted for each problem at this step.

Frustrations

The radius filter on the existing site is immediately too big for a city. And users can't make it smaller

The results displayed are automatically filtered by breed

The size of the dog is not clearly shown and the photo can be deceiving to users with small apartments

Users are surprised by large adoption fees that should have been shown earlier

User invests interest in a puppy before being shown that it is too far away to visit

Solutions

Allow for users to filter their original search for borough, breed, size and adoption fee so as to save the user scrolling time

Allow users to sort the displayed puppies by distance, breed, or size

Provide a video as well as reference photos for size when showing puppies. These photos should be visible in the initial display

Include information regarding fees, health and sociability on puppy description page

Move location information to forefront

Day Three

Design Sprint and Sketching

The Oringinal Layout

Having a sketched out version of the current pathway helped to visualize solutions that integrated easily into the current site.

Integrating Solutions

New filter sections were drafted as well as a new description card design for the puppies that better addressed user's questions. At this stage redundancies and confusing decisions in the original UI were dropped. For example, having two seperate pages to execute one search felt unnecesary and was redesigned

Final Sketch

After iterating through different approaches, the most efficient sketch was chosen and flushed out to inform the wireframing and prototyping phase

Day Four

Wireframing and Prototyping

Wireframing

Using Figma, a black and white wireframe was produced from the final sketch

First Prototype

The first prototype of the new CitiPups search page was put together in Figma and tested on potential pet owners from around the New York City area. Upon collecting the input and sorting the frustrations, it was clear that a second round of prototype iteration was in order.

The design lacked the visual consistency and clarity that the project sought to present and needed a rework of the design system in order to present the best possible product.

Final Prototype Highlights

The second iteration cleaned up the button styles and overall feel of the site without sacrificing the elements of the first iteration. The site now felt more cohesive and less juvenile than before.

Home Page and Search