Metropups is a dog adoption website designed for desk and laptop, to matchmake users with rescuable dogs in their area that fit their their living situations and lifestyle. The goal was to design and build the site utilizing a streamlined, "Lean UI" approach, in a Google Ventures style of a "Design Sprint." This means one day each is allocated for every design step, to from a one-week cycle of this rapid prototyping method.
How might our new startup "Metropups," help people living in cities find the perfect dog to adopt?
Identify and address the common issues with owning a dog in the city such as living spaces, schedule, outdoor space, activity level and other limiting factors. The goal is to increase the adoption rate, achieve happier owners, and find better "forever homes" for the dogs.
The design is for a website made for desktop and laptop screens.
Day one, I started with a set group of pre existing user-feedback and brief interviews from user's experiences with popular pet adoption platforms. The wants and needs of these users will form the jumping off point for the solution sketches.
"I generally look for older dogs-I usually assume they are more well-trained but that's not always the case. Really, I want to find a dog that is comfortable walking with me in the city, and wont get freaked out by all the people, pigeons, and things to do!"
"I would never want to adopt a dog that needed more activity or space than I could provide. I try to find breeds that are generally less hyper, but it all really depends on the personality of the dog."
"I look at the basic info -size, age, etc. Photos and 'bios' are so great to get an idea of a dog's personality. Some things are harder to figure out -like how much attention a dog needs. I would need a dog that could be left at home for a while if I'm at work or get home late due to my commute."
I finished day one by quickly sketching out solution maps and routes of the end-to-end site experience based on the available user data. At the same time I sketched out some potential logos and stylistic imagery to come up with a general theme, to help inform larger design decisions to help keep everything unified as the design continued to develop.
After drafting a few end to end user routes I ended up streamlining a route from one of the popular adoption sites used by the people in the starting feedback pool. It consists of a basic search by location to populate the results with dogs from local shelters.
Going off of the user feedback I reasoned that the best way for people to ensure a good fit for their needs would be to add simple filter parameters from the user's side, so that while browsing, the user gets a much more relevant list of search results as they browse the dogs.
Jotting out some basic thematic sketches early on helps me shape the look of the site as well as starts to craft a cohesive theme to help draw inspiration for the rest of the design. Due to the metropolitan themed name and the urban focus of the app, I played around with imagery and lettering around ideas like, "municipal," "graffiti," "mural," "transit," and other city-adjacent iconography.
I ended up focusing on the "walk" icons reminiscent of crosswalk lights, and narrowed the focus to a Swiss design style of minimalist icons and sans-serif, universal typefaces.
Day two consisted of sketching out key pages, starting with inspiration sketches aka "Lighting Demos," and Crazy 8's, which are a series of key pages and components sketched out in quick succession, using the previous round of inspiration sketches as a reference.
The Lightning Demo sketches were made from sources like existing pet adoption apps/websites, housing search sites, as well as a dating/matchmaking site. I was primarily concerned with seeing how things like search fields and maps were handled as well as the UI that has user's searching for lists of things based on a preference or location. I also Included the Google homepage to observe a minimalist approach to starting a search query.
I found the simple button icons and minimal fields in the Petfinder desktop site to be a preferable solution to many of the other sites' countless fields and dropdown menus. I also liked the simplicity it would allow for all ages and types of users to quickly start browsing for pets. I also liked the toolbar layouts of the Zillow desktop and the Lyft app, as they are simple and serve as visible yet unintrusive jumping off points into the changing content of the rest of the page.
The Crazy 8's sketches were informed by the Petfinder and Zillow pages from the Lighting Demo round. I mostly iterated versions of a similar location/zipcode toolbar atop different combinations of cells containing search results, GPS maps, and an additional toolbar for our user's lifestyle parameters to match the dogs to.
The thematic and logo sketches from earlier also inspired these wireframes, as they gave me the idea to include municipal-style icons to take the place of what would normally be columns of drop down menus . I had the idea that if the user side toolbar was a little game with these city icons, it would make the search seem more effortless, and thus, quicker, as the user would have a bit of fun arranging the icons on their mini "character sheet" instead of a menial task like filling drop menus.
Day three of the sprint involved choosing the best solutions from the Crazy 8 sketches and developing them into low resolution screens and wireframes.
The main screen I decided to implement was one with the minimalist toolbars on the X and Y axis. I kept the user needs toolbar as sparse as possible with 4 buttons, with the top toolbar having very to-the point functionality as well. Everything to make the user's filtered searches feel like an instant plug and play style, like the Google homepage in my Lightning Demo sketches.
The last screen is the "Shelter" search function and features a GPS map I was playing around with including. Although still kept as part of the final design, this function was left out of the duration of this Design Sprint prototype as it is not part of the product tailored for the existing feedback and subsequent testing.
After teasing out the walk icon as the thematic seed for the style and identity of the site, I went ahead and designed vector images in Illustrator for the Metropups logo and the site icons that could all aesthetically appear in a street sign. These municipal style characters entailed a whole theme of efficient, and universal Swiss design conventions like rounded edges, bold slab forms, and stenciled use of negative space. This style helps sell a cohesive theme of urban iconography, but it also helps the user understand the meaning of the buttons at a quick glance.
After roughing out the low resolution wireframe and the site imagery, I again looked to our city aesthetic for further inspiration on how to populate the blank framework with color and type. A universal, sans-serif typeface would fit the theme nicely. I chose "Lato" due to its accessibility and variety of font weights.
I also wanted a very reserved color palette to fit this efficient city design motif, so I kept the standard black and white, chose a nice, trustworthy/soothing blue and used it to make two greys and a softer alternate hue of the primary color.
The final high res prototype was a bit more involved than originally planned for but I wanted to make sure all the bells and whistles like the buttons functioned as intended, so the user would have the full experience of the working UI. Many times for a Design Sprint, something rudimentary like Powerpoint is used to make a quick and dirty functioning prototype, but I opted to use Figma to for the mock-up in order to test if my toolbars allowed for the "plug-and-play" experience I was after. The scratch made buttons and menus too an extra day to wire up in Figma Prototyping but I feel it was worth it to have a test day with more accurate feedback and site experience.
You can try this prototype for yourself here in Figma.
For day five of the sprint I lined up five different users to test how well the focused prototype addressed the needs of the initial user feedback. Three of the users had experience rescuing from shelters before, while two of the user's were completely new to animal recue or adoption platforms. After a brief interview I had each user run through the website cold, and then do a second run to complete specific tasks.
The initial cold runs were quite positive. 4 out of 5 users remarked about how to-the-point the button filtered search behaved, allowing the users to window-shop very quickly with minimal labor involved, making for a fun upfront experience. But once the user is engaged with the browsing, was the site effective in actually getting inquiries and adoptions from the users?
After completing all of the tasks and engaging with each of the functions, I found more users following up with the inquiry function than hitting the adoption button outright. This "maybe" function is an important addition to have when a big decision like pet adoption is streamlined to the click of a button. As the prototype searches are populated with real rescue dogs profiles that I found and researched, the amount of profile information is pretty true to life to what each shelter or foster organization would realistically provide. Many times the shelters just can't offer up the level of profile detail for every dog they have, so our test users often found themselves utilizing the inquiry button. A few times some of the older participants opted to "contact" the shelter over the phone or email link provided on the dog's profile.
I also noticed 2 of the 5 users gravitating towards breeds they already had owned or had experience with in the past, indicating that they trust their own experience with certain breeds when it comes to behavior rather than conclusions about the dog's compatibility by age, size, and other metrics.
Overall the week long GV Design Sprint was pretty informative about our Metropups proof of concept built to address the feedback and critiques of existing adoption platforms. The UI proved to be a success in that streamlining the usual search processes when browsing rescue dogs made the experience more entertaining and fun to engage with. As most of the paperwork and clerical aspects were backloaded to email after the user interactions, it really put the user's focus solely on the experience of looking at the various dogs.
The actual success of linking owners with pets was a little more abstract, in that this type of platform is so reliant on the level of work and effort on the shelter or rescue organization's side of the equation. Some users were happy to get a curated list of dogs needing a home, while it seemed others would still rather have opted to use a variety of social media tools and searches to find their very specific type of dog. In reality, the match system we prototyped satisfied a specific type of dog owner, and the site's broader search functionality for more active and specific browsing will be prototyped and added in subsequent cycles of the Design Sprint process.
