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.
Sole UX/UI Designer
Sketch, Craft Plugin, InVision, Miro
How might we help city dwellers find their perfect match in an adopted dog despite the challenges of urban living?
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.
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.
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.
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
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
"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.
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.
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
Clean looking UI
Simple flow for filling out forms
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
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.
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
Users are also able to browse without an account by zip code for pets nearest them
Day 5: Validate
User Testing Goals:
What else users would like to add
Functionality of site
Additional solutions from users
Are any new problems created?
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”
“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.
Suggested progress bar during onboarding
“One thing that stood out is the next button and back button aren’t the same style”
“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”
“Make the logo bigger on the home page and on the profile pages so the company name sticks with me”
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
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 may include:
More personalized filter and browse options
Blog and advice additions
Saved pets screens