CityPups — UI/UX Case Study
This is part of Sayra’s portfolio. Click on this LINK to see more work.
In this 5-day Google Ventures Design Sprint, I had the option to choose a design sprint challenge to work through. From a list of seven briefs from BitesizeUX, I chose CityPups. This new startup wants to help people living in cities find the perfect dog to adopt. As a new dog owner myself, I can relate to the concerns and challenges of finding a dog compatible with my lifestyle. The CityPups website helps future dog owners make confident decisions by providing sufficient information and personalized search results.
Prototype LINK
Role
Synthesize UX research to create a design solution, build a prototype, conduct five usability tests, and refine the final solution.
The tool used for the interface design was the Marvel App.
Day 1 — Understand / Map
What’s the Problem?
CityPups is a website that seeks to increase the adoption rate, owner happiness, and home quality of dogs. It takes into consideration unique needs such as living space, schedule & transportation, outdoor space, among other criteria. Through research and interviews, Citypups discovered that many people living in cities struggle to find a dog that fits their home and unique lifestyle needs.
To design a solution, the following constraints had to be taken into account:
- Design as a website for larger screens (Desktop & Laptop)
- CityPups aggregates adoption dogs from local shelters and organizations. The adoption process does not occur on CityPup’s website.
- Focus on helping users FIND the right dog to adopt.
The Solution
Maintaining the design constraints in mind, the solution centers on providing well-rounded dog profiles and personalization features. I focused on personalization because whether it’s about finding the perfect home or the perfect dog, meeting personal criteria is fundamental to finding the perfect anything.
CityPups provides a quick questionnaire to provide fast, customized results. Filtrations are visible and can be modified by the user at any given moment. And lastly, the site also provides dog profiles with plenty of visual media and information. These visuals and descriptions boost adoption confidence by meeting both: emotional connections and lifestyle needs.
Persona
User Journey
The map below depicts the journey the user takes from the moment they interact with the computer until reaching their goal: Finding the perfect dog to adopt.
Here we see the steps the adopter will take. From diving into citypups.com to the inputs and clicks he/she must make to find a compatible dog.
Participants Recruited
Due to the short amount of time to develop and test a solution, the following participants were recruited on day one. The subjects are friends and acquaintances with an interest or history of dog adoptions or rescues:
- Chelsea
- Silvia
- Jacob
- Miguel
- Princetta
Day 2 — Sketching
Inspiration
On day two, I began looking for websites with features the site would likely need. The following are the three websites I took inspiration from:
- Petfinder
I consider Petfinder to be the main competitor of CityPups for its personalized pet matching service. The first feature to grab my attention was the find a pet by the location search bar. The “Use current location” feature was very convenient and appeared only when clicking on the input field.
I also liked the cards of results, showing photos, key information about the dog, and how far it is from you. On the left side, the filtration categories are very detailed and show the total results of each filter. Right above these filters, there’s a quiz to find the perfect dog which I find very helpful to provide a personalized experience.
Another feature I liked was the secondary bar below the main menu. It provides a save search feature and quick accessibility to modify pet species, your location, and the radius of the search. Also, appearance makes a first impression, therefore incorporating large images both on search results and dog profile is essential.
2. Airbnb
To find the perfect pet, I took inspiration from Airbnb to find the perfect place to stay. I analyzed their filtration, search, and results features, looking for key elements that could make Citypup’s features just as seamless.
I took note of how Airbnb guides the user and displays results in a very visual manner. I got inspired by the map and slideshow preview on the results page to have more visual and impactful results.
3. Rover
Rover was the third example I found. I particularly enjoyed the distribution of results. I mainly take inspiration from its three-column layout. With filters on the left, results in the middle, and a map on the right. I believe this distribution allows quick access to apply any modifications and has information visible at all times.
I also found the perfect match quiz much more interactive and visually appealing than the normal filters. The user’s attention is centered on one concern at a time quickly and seamlessly. Ultimately, displaying personalized result matches from the get-go.
Affinity Map
The following are notes I took from each site, organized as an affinity map. I grouped the sticky notes into three groups: visual features, personalization, and filter & search. I chose this grouping because:
- Visual Features: The what and how something is presented is what provides pleasant navigation to the eye. It’s important to have a separate group for features that could add to the design of the website.
- Personalization: For this group, I included features that provide fast personalized results without having the users filter out options themselves. This saves both time and effort.
- Filter & Search:
It’s important to ask for the right information and be able to modify it at any given moment. The search bar and filter features provide access to modifications and further in-depth customization of special needs.
For visual features, I included features such as the layout of search results, display of profile information, and card presentation on search results. For the personalization group, the features I found were surprisingly pleasant. Both the dog quiz and the pop-up questionnaire are very seamless and functional features that add greatly to the matching process. Lastly, for the filter and search features, I looked for visually appealing search filters and ease of modification, or information input. I particularly enjoyed the large buttons of Petfinder and the use of my location feature. Also, the top bar of Petfinder is very visual and makes the location and range of search easy to modify and expand.
Brainstorming
I began to sketch out the features I liked in a brainstorming exercise called “Crazy 8’s”. This exercise requires 8 minutes to quickly sketch out 8 different design solutions for the most important page of a website.
I decided to sketch out the search results and filtration possibilities of Citypups. This is the most complex page due to the number of filtration categories and the number of elements. The results page is critical since the adopter is presented with the matching possibilities and establishes first impressions.
Solution Sketch
Next, I sketched out the screens before and after the search results page. This would be the landing page, and the dog profile once one is selected from the results. Additionally, I included a fourth screen implementing a quick quiz for personalization.
The landing page features the search bar, leading to the second screen: Search results with a quiz as a pop-up screen.
In the search results page, the three-column layout is implemented with filters on the left, results in the middle, and map on the right. For the dog profiles, we have a large carousel of photos and videos on the left and all information and details on the right.
Day 3 — Create a Storyboard
After completing the solution sketch, the step-by-step storyboard was elaborated. Below, this is broken down into eleven steps through CityPups’ four screens:
I started with the landing page, which requires a location input from the user, as well as an optional search by dog breed selection tool. Based on personal experience, I decided location and dog breed are the most important filters to be considered when looking for a dog. Therefore, I decided to add these as the main search bar on the landing page.
After clicking on the search button on this bar, the user is then redirected to the search results page with a pop-up screen to further personalize the search. It’s a quick test to show only dog results that are a perfect match according to the user’s technical requirements.
I’m hoping this feature will bring up better and faster results than the traditional filter by filter requirements. I wanted results to be displayed in a way that filters can be accessible and visible, while dog results can be seen on a map too for snap spatial references. Once selecting a dog, the page will show a slideshow of photos and videos on the left, while having plenty of details and information on the right, followed by a “call to action” button. This button will be a very visual element on the page, for it is the final destination of our users.
Day 4 — Build a Prototype
Prototype LINK
Citypup’s prototype was made in the Marvel app. I chose this app to get the work done quickly and efficiently. It consisted of seven screens with a color scheme of purple, white, and light gray to go along the Citypup’s visual identity.
I first designed the menu, which would be applied to all pages. Here I pasted a photo of the Citypup’s logo and modified a premade menu from the Marvel app. Then I looked up an image as the landing page background and gave it a gradient overlay to create more contrast from the menu. Then it was time to incorporate features. For these, I decided to use a search bar inspired by Airbnb’s website. It’s the simple and clean design that I was trying to achieve with this site. I then duplicated the screen to make a filled-in search bar that would lead to the search results.
The search results page is the most complex page of the prototype. I worked on the elements needed for the research results page and duplicated the page to create the search personalization questionnaire. This questionnaire is an overlay pop-up screen. It’s inspired by Petfinder’s quiz applied as Rover’s overlay personalization feature. Here, only the first out of six questions is shown.
On the search results page, I included an example of a personalized search result. Tags and filters selected are in the same rounded design from the landing page’s search bar. Right above these filters, the ZIP code and radius can be found and modified. For the structure of this page, my goal was to have a similar structure to Rover’s and Airbnb’s search results. I incorporated the small preview gallery and heart/like feature to save favorites from Airbnb. To have filters handy and visible, I decided to use Rover’s three-panel structure, with filters on the left, results in the middle, and a map on the right.
Finally, for the dog’s profile page, I decided to include a large gallery of photos and videos on the left. On the right, all the basic information, as well as personality traits and energy and attention levels.
With this prototype, I hope to learn whether the search results are clear and effective and if the personalization quiz adds to the effectiveness of the search.
Day 5 — Validate Your Designs
Following the initial design, I proceeded to validate the design choices by interviewing the 5 recruited users.
These five people are all individuals in their mid-twenties, owners of an adopted or rescued dog. All participants in this testing had a high interest in adoptions and seemed to enjoy the design a lot. Although a few participants canceled, I was able to act fast to recruit all participants needed for the testing.
While testing them, some of the questions I asked the users were the following:
- Can you tell me what you see?
- Can you show me how you would look up a dog in your area?
- What information would you filter out to find the perfect dog?
- Could you tell me what you would expect to find here?
- Could you tell me what this is for?
- Is there anything missing here that you would like to know more about?
- Was anything confusing or hard to use/understand?
Interview Notes
- Chelsea
- Guessed straight away that the site will connect you to shelters.
- Resources — types of shelters/ partnerships with foundations
- Dog breeds — commonly dog breeds searched on the website/ facts about breeds
- Not sure what the heart was for. Guessed maybe to archive dogs you’re interested in.
- Survey to see what you’re interested in.
- Like a dating site but to find dogs.
- Wondered whether it connects to shelters or other dog owners as well.
- Would choose a dog by breed, age, gender, and size.
- Not sure what the 100 m means. Thinks it’s in meters?
- Likes zooming and browsing on the map
- Asked if she has to sign up to see hearted dogs.
2. Silvia
- Dog breeds — information about every dog breed
- Resources — information about adoptions / shelters
- Heart — not sure what it is for, maybe to see favorite dogs
- Radius is confusing.
- Would like to know more about the dog’s health in general. Are his vaccines up to date? Is the dog fixed?
- Likes activity and attention level feature
- Would search dog by breed, age, size, and activity level.
3. Jacob
- Dog breeds — available breeds on the site
- Resources — contact vets or the shelters
- Heart — to see saved or favorite dogs
- Dog tinder
- Understood search range 100m
- Would search dogs by photos
- Would like to know if the dog is up to date with vaccines.
- Likes activity level feature
- Said site is very user friendly
4. Miguel
- Would like an about us or faqs
- Not sure what the heart is for, maybe bookmarks of dogs
- Likes that photos are large on search results
- Understood radius, but not sure in reference from which point on the map. (The zip or my location?)
- Dog breeds — Thinks it is a catalog of dogs on the site
- Resources — things you should know
- Would look up by breed, age only.
- Would want to know if shots are up to date and if the dog is from a breeder or not.
- Didn’t know it connected to shelters.
5. Princetta
- Would like a quote about finding their forever home quote that sticks to her and would want her to adopt the puppy.
- Resources — where the puppies will come from
- Dog breeds — different names in alphabetical order, info about the dog breeds
- Heart — to save or favorite site
- Questionnaire to help you filter out search results.
- After seeing dog results, she understood the heart was to see a list of favorites.
- 100 miles understood.
- Would search by breed, age, and activity level.
- Would like to know what he likes to eat as a meal.
- Liked the colors of the site, not too loud, perfect colors. It is not too wordy and has the right amount of information. Also liked the map feature to know if she has to travel far or not.
There were only very minor confusions, mainly the heart on the landing page, and the number for the search radius. A very important piece of information users also wanted to know more about was the dog’s health. Whether their vaccines were up to date, or if they were fixed or not. I wasn’t sure if users would want to skip the questionnaire or not, but everyone seemed interested in filling it out.
Overall, all participants managed to successfully find a dog they would like to adopt. There were no major complications in completing this task, and the questionnaire proved to aid in the search. Filters were also accessible and detailed enough to further narrow down options according to the adopter’s needs.
UI Modifications
Based on the user’s responses, I modified the final design to eliminate or improve any confusing elements.
- Heart eliminated from the menu bar on the landing page and About page added to all menu bars.
Before
After
2. 100 m changed to 100 miles radius for clarity. Zoom in and zoom out are also incorporated into the upper right corner of the map for better navigation.
Before
After
3. Replaced dog size with health to have that important information at the top. And added dog size as a general information bullet.
Before
After
What’s Next
After working the CityPup’s design sprint for 5 days, I consider there is still room for improvement in the overall design. For example, the landing page needs more information and content to explain how the site works, and a footer is missing. On the other hand, working on other screens such as the about page or dog breeds and resources opens up more room for challenges and design testing that would be interesting to see how users interact with.
CHECK OUT MY PORTFOLIO SITE OR SEE BELOW FOR MORE CASE STUDIES.
