CityPups
City Pups for City Peeps
Duration: 1 week // Dec 2020 - Jan 2021
Problem
Everyone deserves a little companion… easing and distracting us from our day-to-day chaos. While many of us have either wanted dogs or have dogs, the process of finding the perfect one can feel overwhelming for anyone -- especially for city folks that have unique needs due to their lifestyles, whether it be their small living spaces, hectic schedules and transportation modes, or the turbulent city landscapes and activities.
Solution
Now, insert CityPups: a new (hypothetical) startup that wants to help people living in cities find the perfect dog to adopt. They see an opportunity to assist city-dwellers in the search for their perfect dog to bring home, to increase the adoption rate, have happier owners, and better “forever” homes for dogs.
This project assigned design constraints, in which:
My solution should be designed as a website, starting with designs for larger screens (desktop & laptop).
CityPups solely 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
In this modified GV design sprint, I will be focusing on designing a website that helps users find a dog that will be a great fit for them, and some of their city-specific needs.
My Role
As the sole designer on this project, I will take on:
DISCOVER
Synthesizing research
DESIGN & VALIDATE
Sketching
Storyboarding
Wireframing
Style Guide
High Fidelity Mockups
Prototyping
Usability Testing
Iterating
Synthesizing Research
Based on the given user research of interviews, interview notes, and personas, I learned that:
Various people have differing criterias on what they would like as their perfect dog
Visuals (pictures and videos) are crucial to assess the dog’s size and personality
Laying out as much information as possible about the dogs and the adoption agencies will display more trustworthiness for the users in the adoption process
I then jotted down my map of the possible end-to-end user experience.
Modified Lightning Demos
I browsed through various sites to spark inspiration from the user experience of other sites that provide local services, include search features, and display search results.
Crazy 8’s Exercise
I sketched 8 screens, given the inspiration from the modified lightning demos, in 8 minutes, yielding these results below. I chose the second screen on the left as the most critical screen, which is the search results screen, where the user can customize the filters to narrow down to their unique preferences, since the problem I am solving revolves around the process of easing the search and decision-making of finding the perfect dog for each user.
The Solution Sketch
I decided to go with these three screens for my three-panel storyboard, because this middle/critical screen is the heart of the solution -- FINDING the perfect dog.
The other optional screen I created for the search was inspired by Netflix, and how they have genres that users can scroll through, however the user interviews showed that users have MULTIPLE criterias in what they want in their perfect dog, therefore having a one predetermined “filter” (or “genre” like Netflix) may not be enough for the users to actually find it individually suitable. This chosen screen can give more attention to the filtering functions at the top.
The landing screen previous to the critical screen is inspired by the clean Zillow landing page, where it has a simple phrase with a location search bar underneath, with a visual of a dog in the background. The user interviews showed that visuals are a great tool for them to see a dog’s personality and size. A photo appearing right on the landing screen already shows what users enjoy, and having very little else on the screen gives this feature a huge spotlight.
The third screen includes a table where the bio/stats about the dog is consistent within all the dog profiles (breed, size, age, energy level, etc.) to ensure that the formatting and content will not vary for the sake of avoiding unnecessary cognitive overload. A uniformed, organized layout in the dog profile supports comprehension fluidity, and presenting as much information about the dog as possible allows for the user to make a confident, informed decision in their adoption process.
Wireframing & Storyboarding
I took the above three-panel storyboard and expanded into a six-panel lightweight wireframes storyboard with more detail of necessary UI elements and interactions.
Style Guide
Before jumping straight into the hi-fi prototyping, I produced a quick style guide to set myself up with a foundation for a cohesive and consistent design.
These ranges of colors were chosen for the color palette as they portray how dynamic cities can be -- contrasting the unapologetic brick orange and mustard yellow with a mellow blue demonstrates the extremes that bustling cities can be. Utilizing bold colors in contrast with a safe blue gives the spunk that reflects city environments.
High-Fidelity Mockups & Prototyping
I used Figma to build the CityPups mockups and prototype.
My goals for testing the prototype is to discover initial impressions and uncover usability issues of the CityPups main screens. I want to learn and recognize other desirable filtering categories or alternative wording for the filtering categories for better user comprehension.
The landing screen displays a simple interface for users to direct their eyes right where they can type in their location, surrounded by lots of white space, where I included a snoozy lil’ dog.
Upon clicking on the search box, there is an option to choose their current location, and past zip codes or cities they looked at previously.
When clicking on the user’s preferred option, the option turns into a shade of gray to indicate and prove responsiveness to the user’s actions.
The search results appear in accordance to location.
The user can filter their search results by the filtering categories next to the search box. In the sketch, I had two levels, where the text box would be on top of the filtering categories, however I included them all in one row for the user to have more space to browse through the search results.
After the user inputs their preferred filtering, the user’s ideal categories will appear, and the borders will change color to demonstrate change and responsiveness.
This is the format of the dogs’ profiles -- the categories in the table on the right will be consistent throughout all the profiles so that the users will avoid cognitive overload and come across uniformity in the types of information.
Usability Testing
I created a prototype using the high fidelity mockups, and gathered 5 people to conduct usability testings, based on the criteria that they are:
Ages 18+
Living in a urban city
Looking to adopt a dog
Uses the internet at least 2+ hours a day
The 5 users describe themselves as:
21 year old college student living with roommates in downtown Berkeley.
32 year old operations associate living with her parents in Manhattan.
41 year old engineer living alone in downtown LA.
19 year old college student living with a roommate in San Francisco.
21 year old college student living with roommates in downtown Sacramento.
Interviewing these 5 users gave lots of insight, in which I learned:
What other criterias people look for when adopting a dog (breed, history of aggression, etc.)
How adding more methods of contact for users to reach adoption agencies would be preferable
The wording of certain categories, like “Home Preference” (how spacious the owner’s should be) was confusing for 80% of the users
The placement of the “Distance” filter/feature was confusing for ⅘ of the users
There were sentiments of desire to know more about CityPups as a company, although knowing that it is a site to find a dog to adopt -- the users want to build knowledge and trust with the site so they can feel ease finding a companion to adopt.
Iterations
I took upon the above findings to make iterations to the prototype.
Inspired by Yelp, I added another filter (distance) next to the location search
Added the “About Us” page to give insight for the users to know what CityPups does -- this builds trust in the company to feel comfortable finding a dog to adopt through the site
Changed “Your History” to “Recently Viewed” as this latter jargon felt more familiar to 40% users
Moved “Recently Viewed” to the bottom of the screen with horizontal scrolling, due to 40%users feeling it took much too much screen real estate when it was on the side, when they can be looking at more dogs
Instead of describing each dog’s size/weight as “x lbs (max),” I replaced it to “~x lbs (grown)” as this alternative was brought up to be more comprehensible by 2 confused users
The distance filter was moved on the right of the location search bar to mimic the placement in the landing screen
Added “Breed” and “Hypoallergenic” filters
Changed “Home Preference” to “Preferred Home Size” as this former wording puzzled 60% users
Rearranged the order of the dog’s table of stats -- quantifiable metrics were grouped consecutively
Added the email of the adoption agency for other optional methods for users to reach out to get their questions answered
“About Me” will also answer a set of predetermined questions, so that the profile acknowledges the common ponders
Conclusion
Through this modified GV design sprint, the quick turnarounds pushed out priceless insights without compromising time, effort, (and money). The ability to reach a solid baseline for the web design allows for many rounds of usability testing to make reiterations that ultimately build into extensive strides of improvement.
I learned of the importance of UX copywriting, that the wording of categories can easily alter comprehension and affect usability issues. The user experience can feel very different depending on how one may understand what certain filters can do for them, when it simply comes down to the wording on how designers describe it as.
The next steps of this project will be to implement continuous rounds of usability testing, following iterations to reveal more improvement points, prioritizing discoveries surrounding:
Which types of sorting will be beneficial when sorting search results (ex. youngest to oldest, smallest to largest, etc.)
Building more trust with users to create a comfortable atmosphere that ensures feelings of security in adopting dogs through the CityPups site
P.S. Let’s revamp.
I’m looking at this project a couple days later, and felt unsatisfied about the visual design (I’m recognizing my growth!) — so here comes the revamp with before-and-afters…
I added more photos, and specifically photos of people and dogs in a city environment. Since city folks are the target users, this only made sense. Users can also learn more about CityPups as they scroll down the landing page. The arrows direct the users for better site comprehension.
The information architecture within the profile previews were rearranged to improve visual hierarchy. Users can also quickly reach the top of the results without scrolling with the “Back to Top” button.
I continued to inject the updated visual design patterns and created division between the upper bio portion with the lower portion of the detailed descriptions of the dog. Users can better digest the information with a more orderly layout.