Citypups
Design Sprint
CityPups is a desktop site concept in which hopeful dog adopters can find a match that fit the challenges of living in urban areas.
​
View Prototype
Background
This design sprint had a scope and sequence of 5 days from research to high fidelity design.
​
CityPups is a web-based concept aimed to pairing adoptable dogs with forever homes in the city. It is a 3rd party service that helps hopeful owners locate and connect with their next companion in order to begin the adoption process.
​
My task as a designer was to develop a site to best suit the needs of city living users.
RolE:
Sole UX/UI Designer
Tools:
Sketch, Craft Plugin, InVision, Miro
Timeframe:
August 2021
How might we help city dwellers find their perfect match in an adopted dog despite the challenges of urban living?
Problem
Potential adopters living in cities face unique challenges compared to those living in suburbs or with more open space. Typical adoption websites tug at the heartstrings of those looking for dogs to adopt with cute photos, yet much more information is needed for hopeful owners in order to make a well-informed decision. Not enough prerequisite information can lead to disappointment or worse, dogs being returned to shelters for simply not being a good fit.
Solution
Create a more customizable search interface that allows users to better understand the temperament and personality of their possible matches. Allow searchable options more than just breed and size.
Designer's Role
Using the research provided, I designed and tested potential solutions for CityPups, a startup designed to address the needs of dog owners living in urban areas. I worked on initial brainstorm sketches to creating the high fidelity prototype.
Design Process
Day 1: Discover & Define
For this design sprint, I listened to a prerecorded user interview and compiled notes from other user interviews to further understand the problem.
User interview Notes & Affinity Map
​Summary of pain points
-
Living in a small space such as an apartment
-
Riding elevators
-
Using public transportation
-
Walking in crowded streets
-
Hearing noises from neighbors
-
Not having access to an outdoor space
-
Being alone for periods of time while owner is at work
-
Not being highly reactive (barking) at inappropriate times
User Journey
​
"I'd like to see lots of photos, or even better, videos! They help create an instant connection and its a little easier to see how big they are, get a feel for their energy level, and imagine if my small apartment would be a good home for them."
​
​
"I have called and visited shelters before- speaking to someone and describing my lifestyle, schedule, and space is really helpful- but it takes a long time, especially if you want to inquire about multiple dogs."
​
- Research Interviews
Day 2: IDeation
On day 2 of this design sprint, lightning demos and the crazy 8s exercise were used as a brainstorming starting point.
Lightning Demos
For inspiration, I looked at pet adoption websites with a similar process and feel. I also drew upon designs in ecommerce and even dating apps.
PetFinder
-
Find your best match feature provides a questionnaire for users to best filter results
-
Large number of filter options to sort through results manually
​
Adopt a Pet
-
Fewer filter options than Petfinder, but has a favorites feature once an account is easily setup
-
Option for onboarding through a google account
-
Can search for pets with or without an account
​
Dating Websites (Bumble, Tinder, etc)
-
Swipe features for quick scanning of matches
-
Algorithm changes based on swiping
​
​
Ecommerce Websites (Amazon, etc)
-
Allows users to easily view reviews that have posted photos or videos only
​
​
Turbo Tax
-
Clean looking UI
-
Simple flow for filling out forms
Sketches
Using the "Crazy 8s" strategy, I brainstormed my ideas shown here in about a minute per screen.
​
Each of these represent an idea for a screen I may want to include in the design.
Day 3: Ideation
Storyboard
Since I was working solo on this design sprint, I decided to storyboard some of my ideas for screens and user flow.
​
Some features included here:
-
Onboarding/profile setup to help find matches
-
Inclusion of filters to show videos
-
Dropdown menus showing specific needs of users in a city environment
Day 4: Prototype
Minimum Viable Product
I created these screens in about a day to begin testing my ideas.
This was then user tested as a prototype created in Sketch using the Craft plugin for InVision.
​
DesigN Features
-
Quick solution of profile setup and filters to help users search for dog adoptions in cities
-
Set up profile preferences to find the best matches
-
Profile setup consists of questions in 3 parts
-
Household
-
Lifestyle
-
Dog Preferences
-
-
Users are also able to browse without an account by zip code for pets nearest them
Day 5: Validate
User Testing
User Testing Goals:
-
What else users would like to add
-
Functionality of site
-
Overall appeal
-
Additional solutions from users
-
Are any new problems created?
Testing Format:
MVP prototype created using Craft plugin for Sketch and InVision​
​
Participants ranged in age from 30-60, all are current pet owners.
​
3 in-person user tests
​
2 remote user tests
Summary of Findings:
​
-
UI is simple and easy to follow
-
More detail was wanted in certain places such as the home page
-
CityPups logo and way to get back to the home page is needed during profile setup so users aren’t stranded
-
Color choices and font was easy to view and understand
-
At times, the next and back buttons might be confusing for users because they use different UI elements
-
A progress bar would be helpful so users understand where they are on the site
Insight from users
“I’m not sure where to go on some of the screens, it looks like it needs more detail”
-D, 30
“Is there going to be a mobile site as well since this is only desktop? A lot of people will be researching on their phone too”
​
“Find your new best friend today” and “browse dogs in your area” sound like the same thing, someone might not know what is being offered from the jump.
-K, 31
Suggested progress bar during onboarding
​
“One thing that stood out is the next button and back button aren’t the same style”
-M, 33
“It is a turn off when you can’t browse pictures without starting an account, or if it isn’t obvious to find”
​
“I don’t like to click more than 2-3 times to get someplace, but this seems like an okay amount”
-J, 44
“Make the logo bigger on the home page and on the profile pages so the company name sticks with me”
-S, 59
Day 6+: Design Iteration
After testing, the following iterations were made to better accommodate user wants and needs.
-
Updated UI to a more clean and modern feel
​
-
Updated user flow to allow browsing without creating an account
​
-
Added results and dog profile screens to view more of the site
Reflection
Final thoughts
Here's what I learned from this design sprint:
​
1. Never underestimate the power of user testing. I interviewed users of different ages and professions and they all had great insights that helped in the end. One detail oriented user who works in front end development was looking for small design details that needed feedback- spacing, font sizes, and alignments. Other users in customer service professions were focused on the usability of the design. There is something to be learned from everyone.
​
2. In a design sprint, just go with it. It's easy for me to get caught up the aesthetic design before progressing on the user flows and layouts. Working on this sprint taught me to put my ideas out there, regardless if they are final or even good. You don't know until you try something and test it.
Future Iterations
Future Iterations may include:
-
More personalized filter and browse options
-
Shelter profiles
-
Blog and advice additions
-
Saved pets screens