Helping aspiring dog adopters living in cities to find their perfect canine match with a quick intuitive quiz to personalize their search
large screen website • pet adoption database • design sprint
Overview
Responsibilities
Project Management
Research
Design
Prototyping
Usability Testing
Tools
Miro
Photoshop
Google Docs
Figma
Zoom
Introduction
CityPups is a new (fictional) startup that wants to help people living in cities find the perfect dog to adopt. Combining provided interview results with my own research, I designed a website from low to high-fidelity to cater to the unique needs of their city-dwelling users.
Project Type
Modified Google Ventures Design Sprint in partnership with Bitesize UX for Springboard's UI/UX Design program, simplified for a team of 1 so that each "day" can be completed in just a few hours
Timeline
16.75 Hours over 5 Days
Process
01
Map
02
Sketch
03
Decide
04
Prototype
05
Test
Project Timeline
Click / tap image to magnify
01
Map
Methods
1-on-1 Interviews
Affinity Map
Persona
User Maps
Tools
Miro
Summary
I created a quick affinity map to synthesize research documentation I was provided to review. These consisted of interview highlights and a recording one interview. Using the results from the synthesis and a provided persona, I drew user maps to explore possible end-to-end experiences.
Time Spent
1 Hour
Interview Highlights
Through research and interviews, CityPups discovered that people living in cities struggle to find the right dog to adopt due to their unique needs, including:
-
Living Spaces
-
Schedule and Transportation
-
Outdoor Space
-
Other City-Specific Criteria
CityPups saw an opportunity to help city-dwellers find the perfect dog to adopt and meet these specific goals:
-
Increased adoption rate
-
Happier owners
-
Better "forever" homes for dogs
“I look at their basic info - size, age, etc. Photos and 'bios' are so great to get an idea of the dog's personality. Some things are harder to figure out - like how much attention the dog needs. I would need a dog that could be left home for a while if I'm at work or get home late due to my commute.”
- Dan
“I want to know how comfortable and trained the dog is when traveling or moving around the city. I definitely need a pup who is ok riding the train with me, around a lot of other people and distractions.”
- Lindsey
“I like to see lots of photos - or even better, videos! They help create an instant connection, and it's 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.”
- Anthony
Affinity Map
Creating an affinity map to synthesize the interview findings helped visualize which factors were the most important for city-dwellers looking to adopt a dog.
Click / tap image to magnify
Persona
I was provided this persona to assist in creating the user maps below. I also kept this user in mind when moving forward with the rest of the design sprint.
Click / tap image to magnify
User Maps
I combined the information drawn from the affinity map and the persona to draft some possible end-to-end experiences a user might have with CityPup's product.
I also kept in mind the following Design Constraints from the brief that I was given:
-
The end product should be a website for large screens (desktop/laptop).
-
CityPups aggregates adoption dogs from local organizations and shelters. Once a user decides to adopt, they get sent to a third-party contact to start the process.
-
Focus on helping users find the right dog to adopt.
User Map 1
Click / tap image to magnify
User Map 2
Click / tap image to magnify
02
Sketch
Methods
Lightning Demo
Crazy 8s
Solution Sketch
Tools
Photoshop
Summary
After mapping out the interview findings and the potential experiences to solve user pain points, I researched similar existing products. I ideated solutions for the most important step of the user maps via rough sketches. I then expanded the best solution into a 3-panel storyboard.
Time Spent
1 Hour 15 Minutes
Lightning Demo
With the steps laid out in the user maps in mind, I did a short research session of similar products that currently exist. These included products/services in the pet adoption space and some products outside that space but with similar features.
Most of the popular aggregate pet adoption services (the closest competitors to CityPups) prioritized the user's location and the type of pet over all other search requirements. This was denoted by the large input field for location immediately in the top left of the landing page.
Petfinder does have a quiz feature (CTA boxed in orange), but it does not appear to be prioritized. The location input field is again very large and prominent on the page.
The trend of taking quizzes for personalized products has skyrocketed in the beauty and cosmetics industry in the past few years. It is especially popular with younger people, like our persona, Ellie, who is age 27. I wanted to look at the website for one of the very first companies to offer this feature for personalized hair care products, Function of Beauty. The CTA to take their quiz is highlighted prominently in the left of their hero banner.
Crazy 8s
After researching comparative products, I decided that featuring an effective quiz would be a unique (if not innovative) way to personalize the user experience. It would also make it easier for users to find their best canine matches. Additionally, this method would appeal to young users like Ellie.
From the second user map, I decided the step of "answering the quiz questions" was the most important step of the journey. This is how the user essentially enters their requirements to filter the database of potential matches. I ran a Crazy 8s exercise to quickly sketch out ideas for this particular step. The session turned out mostly to be an exercise in building the most effective form.
Click / tap image to magnify
Solution Sketch
From the screens generated via the Crazy 8s, I chose one to be the Critical Screen for my solution sketch based on the following criteria for a good form:
-
step counter to provide peace of mind of the user's journey
-
limited number of questions per screen to reduce mental load
-
large visuals to accompany answers for a fun, aesthetically pleasing experience
-
large prominent CTA at the bottom to continue to the next questions
Again with the user map in mind, I sketched a more detailed version of this Critical Screen. I also sketched the screens that come before and after finishing the quiz. This helped better visualize the main steps of the journey.
Click / tap image to magnify
The first screen is the home landing page. I wanted to clearly prioritize the CTA to take the quiz. I also displayed information about each step of the process below the hero banner.
The Critical Screen begins the quiz with the most important questions - the user's search location, search radius, and the size of the dog. It also includes detailed information about each size category, such as their weight and space needs. This would help the user choose the correct answers for their situation. These sketches were still rough and only meant to convey the general idea of the quiz. So I remained open to the question about dog size being pushed to the next screen. It would depend on the actual screen real-estate that will be available in the next fidelity of designs.
The third screen contains the results of the quiz. It features the cards that list each available dog that matched with the user. The individual answers to the quiz are also shown as dropdown menus near the top. This is so the user has the freedom to change their answers quickly. There is also a button on the right to let the user re-take the quiz if they wish. On the left side are more filters that are less important (to keep the main quiz short and not overwhelming). They allow the user to further narrow their search.
03
Decide
Methods
Storyboarding
Tools
Google Docs
Photoshop
Summary
The screens from the solution sketch were further expanded into more storyboard panels, which will be used to help create a prototype for the product in the next step.
Time Spent
2 Hours
Storyboard
In a regular team environment, the solution sketches would normally be pitched alongside other solutions for review. A single solution would be chosen to move forward with the project (hence why this is "Decision" day of the design sprint). Since I am doing this project as a solo sprint, I simply continued with the solution I had come up with.
I first wrote out the rest of the quiz questions and decided how the answer options would be displayed (ex. selectable cards, sliders, etc.). I then sketched out the other screens to visualize the rest of the user's journey. This included screens for the other quiz questions and the individual dog profile. I also expanded the home page vertically and moved the question about dog size onto its own screen for better spacing. These screens will be used to create a quick low-fidelity prototype for testing.
Click / tap image to magnify
04
Prototype
Methods
Prototyping
Style Guide
Design
Tools
Figma
Summary
I created a quick simple prototype using the storyboard sketches. Then, given extra time, I put together a minimal style guide for a round of mid-fidelity designs. I then used those mockups to create a more detailed prototype for usability testing.
Time Spent
7 Hours
Low-fidelity Prototype
I stitched the individual storyboard screens together into a quick prototype. It was so simple that each screen had only 2 clickable areas at most - the button or card to move forward in the flow and the CityPups logo in the top left to return to the home page.
This took so little time (and knowing that I had a full 7 hours allotted for this stage of the design sprint), I decided to put effort into a higher-fidelity version of my solution.
Style Guide
Creating mid-fidelity mockups meant first putting together a quick style guide. I wanted to devote as much time as possible to actually designing the mockups. Yet I felt it was still important to create a style guide to keep the brand and artistic direction consistent across all the screens.
For speed and efficiency, I focused on the most important elements of a style guide - the colors, fonts and buttons. I used references from the CityPups documentation that I was given at the beginning of the project. The logos where especially helpful, encouraging a bold, rounded, friendly feel.
Primary Color
#9F39FE
Secondary Color
#FFFFFF
Text Color
#333333
Header / Assistant
Extra Bold
Body Text / Raleway
16 pt • Regular
Mid-fidelity Prototype
I translated the sketches into basic shapes and colors without much deviation from the original layout. I added a quick shadow underneath some of the white cards to distinguish them from the background. This was easily copied onto other elements, like buttons.
Since the quiz was the main feature to solve user pain points, I focused on building out its animations. They would help provide a more intuitive experience during testing, such as for the card selections and sliders. Aside from the main photo of the dog's profile screen, all other photos and illustrations were added last, given enough remaining time.
Click / tap image to magnify
05
Test
Methods
Moderated Usability Testing
Tools
Google Docs
Zoom
Figma
Summary
I put together a quick test plan and script. I then conducted remote usability tests. These included exploratory questions and tasks to be completed, using both the CityPups design and a competitor's website for comparison of metrics.
Time Spent
5.5 Hours
Usability Testing
Participants
Due to COVID-19, I conducted usability tests remotely through video chat. I recruited 5 participants (2 male and 3 female) with diverse backgrounds and experience levels with owning/caring for dogs. All participants had interest in adopting a dog at some point in the future.
Goals
-
Conduct extra primary research to find out more factors that people consider when adopting a new dog
-
Taking the opportunity to conduct my own research to combine with research CityPups provided at the beginning of the project
-
-
To obtain a baseline for metrics comparison, measure how long users take to find the right dog to adopt on a competitor’s website (Adoptapet.com), under the following user conditions:
-
Lives in San Francisco (a major city) in an 800 sqft. 2-bedroom apartment
-
Has a roommate living with them
-
Shares a car with the roommate, so is often limited to taking the bus or train
-
Wants their new dog to be part of the family for many years
-
-
Test the effectiveness of the CityPups design in achieving the same task under the same conditions
Click / tap image to magnify
Research Findings
To initially build rapport and conduct some quick primary research, I asked the participants the following questions:
-
Do you have experience with dogs?
-
Are you interested in adopting a dog eventually at some point?
-
What factors would you consider when looking for the right dog for you?
3 out of the 5 participants had a lot of experience with dogs, growing up with them and owning a few in the past or present.
The other 2 participants had little to no experience with dogs. Their main reasons for hesitation were (1) lack of knowledge/experience, causing insecurity of their ability to provide a good life for a dog, and (2) financial limitations.
All participants wanted mellow, low-energy dogs who could get along well with other dogs. Other factors mentioned were the owner's living space size and the dog's eating habits.
Usability Test Findings
With the CityPups design, testers were on average
49.48% faster
to make a decision about whether or not to adopt a dog
than its competitor, Adoptapet.com.
With Adoptapet.com it was initially simple to enter a location and quickly begin browsing dog listings. Yet testers had to take time to adjust filters. Some filters were vague, especially to testers with no experience with dogs. Important information, like how good each dog was with other pets/children, was not readily available. They also could not be filtered, forcing testers to click and read through every single dog listing. Some testers did not bother using the filters at all, which increased their search time even more.
Taking the CityPups quiz took more upfront time initially. However it made their search results more personalized and ultimately provided a smoother experience of looking through the listings.
“I really appreciate these disclaimers [in the quiz], especially as a new dog owner. It's really helpful and makes me feel less shy about not knowing the information. It's more comforting to know that it's important enough to show.”
- Sarah P
I compiled the findings from the usability tests into a table, with recommended solutions formulated for CityPup's every issue.
Key Findings
-
Home page:
-
Need option to immediately browse dog listings as a quick alternative to taking the quiz
-
Cards below the hero banner are unclear - clickable options or just informative?
-
-
Quiz:
-
Help text need to be more succinct for better scannability
-
Need option to select range of training and energy levels, rather than just 1 number
-
-
Results:
-
Listing cards could use more initial info, such as special needs and behavior with other pets/children
-
-
Dog Profile
-
Info about behavior with other pets and children need to be called out
-
History and behavior/personality can be broken into separate sections for better scannability
-
Click / tap image to magnify
“I understand that [the help text in the quiz] is for educational purposes, which I love. I love that you're encouraging people to make the right decisions, but I think I would rather see it more digestible bullet points, simply because people may not read it.”
- Trixy W
“If I was searching for all maltese, all these pictures would look almost the same. I [would] have to lean more on how well the photographer did, as opposed to what I can know about the dog, and I'd rather know more about the dog.”
- Alexei K
Final Takeaways
As this was my first sprint, my major takeaway from this week was time management. I also learned how to condense the steps of a regular project into a tighter timeframe. This sometimes meant using different tools and methods. Research and testing were still absolutely important. I also practiced prioritizing the features of a mockup/prototype that would best get the idea across for usability testing.
Next Steps
While my role in this project ended here, the findings from the usability testing made the steps for the next design iteration quite clear. These include adding a quick search bar and referencing it as an alternative option, adding extra info to the listing cards, a second slider handle for range selection, and adjusting information for better scannability. I found it particularly difficult to make the help text in the quiz more succinct. I knew that improving my copywriting skills will be an on-going process for the future.
After making adjustments to the mockups, I would update the prototype for another round of usability testing, and so on. I could also start to explore and add other lower-priority features. These could include user accounts and the ability to save search settings, adding more informational pages (ex. faqs, the adoption process, care guides, shelter/rescue database, etc.), shelter/rescue reviews on the dog profiles, and a section for "more dogs at this organization" to encourage more browsing and discovery.
