the company.
CityPups is a startup dedicated to helping city dwellers find the perfect dog to adopt. By partnering with local organizations, fosters, and shelters near city limits, CityPups ensures that urban residents can easily pick up their new furry friend using public transportation. Understanding the unique needs and limitations of urban living, CityPups strives to make the adoption process seamless and convenient, making it easier than ever for city residents to find their forever pup.
introduction.
I conducted a 5-day Design Sprint to rapidly test a potential solution for the CityPups website, this agile approach allowed me to thoroughly understand and map the problem through 10 user survey interviews and persona creation. We then sketched solutions, crafted a detailed storyboard, and prototyped user flows. Finally, we conducted 5 usability tests to validate the solution, ensuring it met the needs and expectations of our target audience.
role.
UX/UI Design, User Research, Branding, Sketches, Wire-frames, Interactive Prototypes, Usability Testing
the problem.
People living in cities face unique criteria and limitations when it comes to adopting dogs. Urban living conditions often mean smaller living spaces, busy common areas, and reliance on public transportation. Adopters need a platform tailored to their specific needs, offering a seamless search experience that helps them find the perfect canine companion. A website designed with these urban challenges in mind is an excellent way to match the right dog to its forever family, ensuring a harmonious fit for both the pet and the adopter.
tools.
the solution.
The CityPups website is designed to address the unique needs of city dwellers looking to adopt a dog. It features an easy-to-navigate interface that allows users to search for adoptable dogs from local shelters, fosters, and organizations near city limits, ensuring convenient access via public transportation. Additionally, the site provides tailored information about each dog’s suitability for urban living, helping potential adopters find their perfect match while considering city-specific challenges such as smaller living spaces and busy environments.
day 1. understand & map
Goals for CityPups:
-
Increase adoption rates for urban dogs.
-
Help adopters find the perfect pup for their unique city criteria, including:
-
Small living spaces and limited outdoor environments.
-
Work schedules and transportation constraints.
-
Populated areas with lots of stimulation.
-
-
Increase partnerships with shelters, fosters, and facilities within city limits.
-
Expand to other adoptable animals, including cats.
​
How Can We Fail?
-
Not providing enough information about the dogs to make informed decisions.
-
Setting unrealistic expectations, leading to dogs being returned to the shelter.
-
Failing to showcase the pups with enough content (pictures and videos) to drive interest.
-
Maintaining a low inventory of dogs, resulting in limited choices for adopters.
user statements.
The best way to connect with users is by hearing their stories and empathizing with their needs. All of the people surveyed live in the city and want to add a dog to their family; they are looking for an emotional companion that fits into their busy lifestyles. Each person is unique, but their needs share common themes reflecting city life.
​
-
6 out of 6 want a socialized dog that is good with people and animals.
-
6 out of 6 seek a dog with low to moderate energy that can be left alone.
-
5 out of 6 have a small living space, making room for a dog a concern.
-
3 out of 6 want a dog that can travel well in the city and on transportation without distraction.
​​
data analysis
mapping.
I plotted out the steps a user would take to adopt a dog online in the most convenient, informative, and intuitive way. I focused on providing filters for available dogs close to the user's location.
​
how might we?
-
Increase the adoption rate?
-
Provide enough info about the dogs for users to make a decision?
-
Match compatibility with the right dog to the right family?
​​
​
jobs to be done.
-
Job: Increase adoption rate, easy adoption process​
-
Related Job: Provide content about the dogs
-
Functional: Connection / compatibility
-
Emotional: Finding a dog’s forever family
-
Personal: Creating an emotional connection between dog & user
-
Social: Sharable links, high traffic to the site
user stories.
Capturing stories from city dwellers' perspectives helped me understand the essential flows to include in designing the CityPups website. This agile approach guided me in selecting which MVPs (Minimum Viable Products) to prioritize as software features.
mvps.
I plotting out the steps a user would take in order to adopt a dog online, in the most convenient, informative and intuitive way. Concentrating on providing filters and available dogs, close to the users location.
​
-
Increase adoption rate / Provide adequate information and content about pups
-
Personality compatibility / Include search options, filters and compatibility quizzes
-
Create forever families / Create trust using testimonials, reviews and easy communication.
research.
competitor websites.
I conducted research on the two most popular pet adoption websites, PetFinder.com and AdoptaPet.com. While both platforms served a similar purpose, they differed in the amount of searchable information and content presentation. PetFinder had a friendly interface with search filters on the homepage, yet its UI felt somewhat cluttered and inconsistent. On the other hand, AdoptaPet featured an easy-to-use search/filter tab and lively illustrations, though the site's design felt somewhat distracting, potentially detracting from showcasing the dogs effectively.
Petfinder
Adopt a Pet
-
The home page is easy to navigate
-
Many filtering options available on each page
-
Distracting, inconsistent photos, colors & icons
-
Quick user flow to inquire about a specific dog
-
The homepage has an easy filtering option
-
The site is bright and happy
-
The UI has to many colors, bad photo placement
-
Easy to follow adoption process
day 2. sketch
Sketches were created using the Crazy 8s technique to rapidly brainstorm and generate ideas. Specifically, I focused on sketching the "dog profile" screen, recognizing its critical role in enticing users to click for more information. This screen serves as a pivotal point for making emotional connections and forming first impressions. Additionally, I sketched the user flow from the dog selection screen to the dog profile screen, incorporating a "pop-up" element displaying contact information and a prominent call-to-action button for adoption.
day 3. storyboard
This user flow focuses on a user logging on to CityPups and all the steps to completing an adoption form. I included search filters, dog profiles, dog detail pages, communication options (chat and email), and the adoption process screens. Streamlining the process so that user doesn’t get distracted along the way.
ui design.
visual system.
The style guide and the color palette is based off of the CityPups logo that was provided in the brief, using shades of purple and white for grounding. For the photography, I wanted to develop an emotional connection, “pulling on their heart strings” was my motto as I was finding images of dogs and cropping them. For the fonts I picked easy to read, san serif fonts and developed buttons and components that felt fun and compelling to click on.
day 4. prototype
The high fidelity prototype was designed in Figma, using consistent branding throughout the screens, for the buttons, I created interactive components that update when you hover and then click on them. Since filters were so important to the users so I made sure to include a filter header on the dog finding screens. When the user sends a message to Citypups they will see a fun animation of the mail being sent as a confirmation.
high fidelity mockups.
Using a Figma plugin called Mockuuups Studio and a site called Previewed I created mockups to see how the site looks on a computer screen to a user. This lets me see the visual hierarchy better to distinguish if important information is seen at first glance and if the design principles are consistent, I made sure that the imagery and icons reflected the brand personality, including the color palette and checked for visual accessibility and color contrast.
website features.
Based on virtual meet applications like Google Meet and Zoom, I created a flow where adopters can virtually meet with the dogs they are interested in adopting, learn more about a specific dog on their profile page and send a message if they are interested in adopting. With the increase of virtual meeting in the past few years I feel this feature is a great way to save time and level expectations when getting to know a dog without having to waste time getting to an adoption location.
dog profile screens.
virtual meet screens.
send a message interaction screens.
usability testing.
day 5. test & validate
I interviewed 5 people who are currently looking for a dog or have adopted a dog before. We met via Zoom, lasting 20-30 minutes each. For the user tests I asked the participants to share their screen as they clicked through the CityPups prototype. I wanted to see how they navigated through specific tasks and how felt about the look and feel of the website. I explained that it was a prototype and that many features were not yet designed.
I used the 5-Act Interview technique, welcoming and thanking the participants before giving a brief introduction to the problem. I conducted a pre-interview with questions about their experience looking for and adopting a dog, asking their process and how they felt. Participants had 3 user flows that they were tasked with, - finding a dog they are interested in, sending a message to CityPups and setting up a virtual meeting.
findings & discovery.
-
4/5 Users want more dog videos and content, especially the dog “in action” to understand and learn about their personality.
-
3/5 Users were interested in the compatibility quiz feature, commenting that it is a fun, informative way to find the right match with a pup.
-
3/5 Users had questions about the dog adoption process, including fees, how long it will take and company information.
outcome.
reflection.
Looking back on the development process, I love how quick the process was to create a tested prototype in 5 days. This agile approach to developing the essentials to be tested before laboring over the fine details works well. I enjoyed researching and designing for such a heart warming and needed category of dog adoption.
The greatest challenge for me was moving to the next process in the sprint when I knew that I could make things a little bit better. It takes discipline not labor over things or go off on tangents such as creating additional flows and adding fun animations.