CityPups

CityPups is a new startup that is set to change how city residents adopt dogs. They've found that urbanites struggle to find dogs that suit their living situation and lifestyle. To tackle this, CityPups is developing a web platform to make it easier for users to find dogs that match their city life. The aim is to improve the adoption process, resulting in more adoptions, happy owners, and better homes for dogs.

CityPups

CityPups is a new startup that is set to change how city residents adopt dogs. They've found that urbanites struggle to find dogs that suit their living situation and lifestyle. To tackle this, CityPups is developing a web platform to make it easier for users to find dogs that match their city life. The aim is to improve the adoption process, resulting in more adoptions, happy owners, and better homes for dogs.

CityPups

CityPups is a new startup that is set to change how city residents adopt dogs. They've found that urbanites struggle to find dogs that suit their living situation and lifestyle. To tackle this, CityPups is developing a web platform to make it easier for users to find dogs that match their city life. The aim is to improve the adoption process, resulting in more adoptions, happy owners, and better homes for dogs.

Role:

UX/UI Designer

Duration:

5 Days

Tools

Figma, Photoshop, Pen & Paper, Zoom

Context

This case study showcases a modified Google Ventures (GV) Design Sprint, adapted for solo execution. This project aimed to develop a Minimum Viable Product (MVP) for a dog adoption website tailored for urban residents.

Problem

CityPups is a new startup that wants to help people living in cities find the perfect dog to adopt. However, CityPups has discovered that people living in cities struggle to find the right dog to adopt due to their unique needs.

Constraints

  • The solution must be a website, initially designed for larger screens (desktop and laptop).

  • The primary focus should be on assisting users in finding the right dog to adopt.

  • CityPups will aggregate adoptable dogs from local organizations and shelters. Users will be redirected to a third-party contact to initiate the adoption process once they decide on a dog.

Day 1 - Understand

I reviewed the existing research provided by CityPups, including interviews, user personas, and usability tests. I was then able to synthesize this research and began to map out potential steps a user might follow on the platform to successfully find their ideal pup.

User Persona

Existing Usability Test

Pain-Points and Frustrations

  • Current site doesn’t allow anything below a 25 mile radius

  • Wants more information about the dogs’ temperaments and personality on the dog’s profile

  • There is a large adoption fee

  • Doesn’t have enough information from the profile to make the next step

  • Expressed wanting to see videos of dog

Successes

  • Site had pictures and facts about the dog


Priorities and Considerations

  • Priorities and Considerations

  • Level of activity that the dog needs

  • Size, age, and energy levels of the dog

  • Knowledge of any health issues

  • Temperament and if the dog is good with other pets

Research
Highlights

Research Highlights

Research Highlights

  • Photos are important in order to make an emotional connection with the pup and to figure out their personality.

  • Practicals such as the dog’s size, the amount of space they need, and their energy levels are key considerations.

  • Owners in cities have unique needs such as long commutes and time away from the home, which might affect how they choose their pup.

  • For city residents living closely with others, it's crucial to know how comfortably a pup interacts with people and animals.

  • Calling and visiting shelters can be a lengthy process.

Mapping

Draft of possible end-to-end experience a user might have.

Day 2 - Sketch

On the second day, I conducted lightning demos, analyzing websites like AirBnb, Zillow, Adopt a Pet, and Lemonade. My aim was to draw parallels between CityPups and these platforms, particularly in how they match users with homes, vacations, or pets based on specific preferences and filters. This research fueled my ideation process, directly influencing my sketching and ideation for CityPups.

Website #1: Airbnb

  • The layout of the images provides for easy scanning, with the option to click and enlarge when necessary.

  • The layout is clean and simple.

Website #2: Zillow

  • The layout of the images provides for easy scanning, with the option to click and enlarge when necessary.

  • The layout is clean and simple.

Website #3: Adopt a Pet

  • Looking at other adoption websites was beneficial for competitive analysis, finding areas of strength and areas that were lacking.

Website #4: Lemonade

  • Lemonade has a quiz that helps to customize your experience.

  • Their aesthetic is minimal, which allows for a simple and enjoyable experience.

Crazy Eight Sketches

I then produced eight quick sketches to explore a variety of creative layouts and features.

Solution Sketch

In evaluating the sketches produced during the Crazy 8s exercise, I selected the design from screen #7 as the foundation for my solution sketch, as it best aligned with the project's objectives and user needs. This search results page serves as the critical screen, allowing users to explore available dogs, assess ratings of each dog's needs and temperament, delve into their stories, and mark favorites for potential adoption.

Additionally, I chose a concept for a "find a puppy" quiz (screen #3), which further refine searches by guiding users towards the most suitable options based on their preferences and lifestyle.

Design Solutions

For the search results page, I elected to add a section to visually represent each dog's needs and compatibilities. This approach not only simplifies the decision-making process but also provides users with a clear, at-a-glance understanding of a dog's suitability for their urban lifestyle.

I opted for a split-screen layout, inspired by Zillow and Vrbo, to streamline the user experience. This design lets you view pictures and read details simultaneously, eliminating the need to toggle between screens.

I placed filters at the top for quick adjustments, unlike the side placement in many adoption sites. I also added bar graphs for at-a-glance assessment of a pet's suitability. Scrolling further reveals more details and an 'Apply' button.

I believed that by allowing users to quickly glance at a graph depicting the dogs' needs, they could more easily ascertain whether the dog aligns with their home and lifestyle, eliminating guesswork and streamlining the process.

Day 3: Decide and Storyboarding

While crafting the storyboards, I referred to the journey map I made on Day 1. This helped me outline the user's path from the homepage to the adoption process.

Storyboarding

Sketching and wireframing allowed for rapid iteration and concept validation. These provided a low-fidelity, quick method for visualizing different design ideas and conceptualizing the user flow.

Home Page

"Find a Pup" Quiz

Beginning with the Homepage, users are encouraged to begin their search by clicking on the “Find a Pet” button. This CTA is an important part of the search process, as they are able to browse for compatible dogs based on their preferences.

Home Page

"Find a Pup" Quiz

"Find a Pup" Quiz

Here, Users would fill out their zip code along with their preferences such as size, age, gender, and breed. At the end of the quiz, they would click “continue”

Beginning with the Homepage, users are encouraged to begin their search by clicking on the “Find a Pet” button. This CTA is an important part of the search process, as they are able to browse for compatible dogs based on their preferences.

Here, Users would fill out their zip code along with their preferences such as size, age, gender, and breed. At the end of the quiz, they would click “continue”

"Find a Pup" Quiz

Search Results

Search Results

Messages

The search results page serves as the critical screen, allowing users to explore available dogs, assess ratings of each dog's needs and temperament, delve into their stories, and mark favorites for potential adoption. For further details or to express interest, users can simply click the "Inquire" button on a dog's profile.

Messages

On the messages page, users can engage in conversations with the shelter housing the dog. When they’re ready to move forward with the adoption process, they simply click the "Apply" button which will lead them to the adoption application.

The search results page serves as the critical screen, allowing users to explore available dogs, assess ratings of each dog's needs and temperament, delve into their stories, and mark favorites for potential adoption. For further details or to express interest, users can simply click the "Inquire" button on a dog's profile.

On the messages page, users can engage in conversations with the shelter housing the dog. When they’re ready to move forward with the adoption process, they simply click the "Apply" button which will lead them to the adoption application.

Adoption Application

Application Confirmation

The adoption application will prompt users to provide necessary personal details, living arrangements, and lifestyle information. This process ensures a thorough evaluation, aiming for the best match between the dog and the adopter.

Application Confirmation

Users would receive a confirmation message, showing that their application had been submitted.

The adoption application will prompt users to provide necessary personal details, living arrangements, and lifestyle information. This process ensures a thorough evaluation, aiming for the best match between the dog and the adopter.

Users would receive a confirmation message, showing that their application had been submitted.

Day 4 - Prototype

Transitioning from storyboard to prototype clarified which design elements were effective and which required further refinement. While the basic layout of my search page remained consistent, I adjusted the placement of certain buttons and text for a more intuitive UI.

I aimed for a lively and playful UI, resonating with the theme of pet adoptions. To maintain a gentle aesthetic, I rounded the edges of images, buttons, and text fields.

Search Results Page

I incorporated the logo's color into the primary CTA, "Apply," to maximize its prominence. I also introduced a sky blue, utilized for both the progress bar and the "Save Search" button. While my initial sketches overlooked details beneath the dog images (like name, breed, age), I recognized its significance for users' quick browsing.

Day 5 - Testing and Validating

Usability Test

I conducted 5 usability tests with participants who live in cities of over 1 million residents and have either previously owned a dog or shown interest in owning one. This would be keeping in line with CityPup’s target customers. These tests were executed via Zoom using screen share.

Findings

Overall, most of the tasks were completed easily except one, the Alert task. The testing provided some great feedback, and the debriefing portion of the interview was especially helpful in helping me make a few important changes.

  • The vast majority of users struggled to complete the Alert Task, highlighting a significant design oversight on my part. The labeling of the "Save Search" button was misleading. While I intended for it to notify users when a match to their criteria was found, most interpreted it as a feature to resume their browsing from where they last stopped. This feedback underscores the need for more intuitive and clear button labeling to ensure user expectations align with the actual functionality.

  • Many users expressed that they were unsure of the difference between the “Inquire” and the “Apply” buttons within the Favorites page. They communicated that both imply initiating contact or expressing interest. I found that the difference between “Inquire” (seeking information) and “Apply” (desire to proceed) was too subtle of a distinction, and might not be immediately clear to everyone, potentially causing confusion or missteps.



Iterations

  1. Clarified Inquiry: “Inquire” was renamed to “Ask a Question”. This would help to eliminate confusion with the “Apply” button.

  2. Consolidated Needs: Space and Activity under the “My Needs” section were consolidated.

  3. Expanded Categories: Cats were added as an additional category under the “Good with” section.

  4. Button Clarity: The “Save Search” button was renamed to “Alert Me”. This would help to increase clarity of its functionality.

  5. Brand Identity: The company name was added under the logo.

  6. Additional Information: An “About” page was added, where users could find information about the company, pricing and process.

  1. Focused Search: Changed "Find a Pet" to "Find a Pup" to reflect the site's exclusive focus on puppies.

  2. Image Update: Swapped the hero image for one with a more distinct urban vibe, featuring a girl in a city park, to better align with the brand's identity.

  1. Adoption Status: Added an "Adopted" overlay to profiles in the favorites page to clearly indicate when a dog is no longer available.

  2. Button Clarity: Changed "Inquire" to "Ask a Question" to more clearly differentiate it from "Apply" in order to better communicate their different purposes and avoid confusion.

Final Design

Project Learnings

If I had more time dedicated to this project, my next steps would involve diving deeper into user feedback to refine and iterate on the design. Additionally, I would build out the About and Messages pages, ensuring comprehensive information and seamless communication for the user.

Next Steps

If I had more time dedicated to this project, my next steps would involve diving deeper into user feedback to refine and iterate on the design. Additionally, I would build out the About and Messages pages, ensuring comprehensive information and seamless communication for the user.

Let's work

together.

jaredtseng@gmail.com

Let's work

together.

jaredtseng@gmail.com

Let's work

together.

jaredtseng@gmail.com