Paws & Claws
Around 6.5 million companion animals enter U.S. animal shelters nationwide every year, mostly cats and dogs, and each year, about 1.5 million shelter animals are euthanized. Those are a lot of pets! Paws & Claws wants to change this. By partnering with shelters all over the country, we've successfully created a platform that allow people to see all available animals in any shelter close to them. Here's how I designed the solution.
01. Project Details
Challenge | Design a country-wide pet finder website
Client | Paws & Claws (fictitious project)
Duration | 3 weeks
Role | Lead UI UX Designer: Design Researcher, IxDesigner, Visual Designer
02. Design Goals
- Deliver a strong, responsive web experience across multiple device platforms
Formulate company identity
Create an intuitive, smooth experience for potential adopters and shelter owners by leveraging existing design patterns and user expectations
03. Tools Used
Research | Industry Research, Competitive Audit, Contextual Inquiry
Synthesis | Empathy Map, Trello, Persona
Product Strategy + Ideation | Whiteboard, POV + HMWs, Goal Mapping, App Map, LucidChart
Interaction Design + Testing | Pen + Paper, Task Flow, Illustrator, Photoshop, MarvelApp, Apowersoft Recorder
Delivery | Zeplin
Research & Synthesis
01. Industry Research
Before building the platform, research was needed to understand the current animal rescue landscape, as well the needs and interests of both the animal owner and the shelter employees. Thus, I began my research for this project with a quick secondary scan of statistics which helped me contextualize the pet homelessness situation. My goal here was to understand the current animal rescue industry, specifically, "What is the difference between adoption / rescue versus purchasing from a pet store / breeder?" and "What are the repercussions for choosing stores over shelters?" Here's what I learned:
Stat #1: For every puppy or kitten who is deliberately produced by any breeder, an animal in an animal shelter dies.
Stat #2: Animal shelters across the nation are forced to stretch their resources to the brink to accommodate an overwhelming population of homeless and at-risk animals.
Stat #3: Approximately 6.5 million companion animals enter U.S. animal shelters nationwide every year. Of those, approximately 3.3 million are dogs and 3.2 million are cats.
Stat #4: Each year, approximately 1.5 million shelter animals are euthanized (670,000 dogs and 860,000 cats).
02. Competitive Analysis & Provisional Persona
With this initial information, I compiled a snapshot of notable pet matching sites currently out for use. A quick search for “animal shelters near me” brought to light my top competitors: local animals shelters of various sizes (although they are indirect competitors, they are also partners with us) and pet locators that are aggregates of shelters (with Petfinder, AdoptAPet, and AllPaws being the most popular). I conducted a quick site audit of my top 5 competitor’s website to help identify the strengths and weaknesses of each and surveyed pages for trend and feature implementations so to know where best to invest our resources.
In order to facilitate future design decisions, I aggregated and interpreted the data results into provisional personas, (relatable, representational customer profiles), focusing heavily on user behavior and motivation. I had created them early on to begin thinking about who might make up the customer base of Paws & Claws.
03. Contextual Inquiry
Driven by curiosity in learning more about my users, the development of my interview plan was built upon a foundation of working assumptions and unknowns. Using my secondary research, unknowns, and assumptions, I developed an interview guide to structure my contextual interviews. To understand the procedures for pet adoption, the services and programs offered, and the channels and roadblocks for adopting pets, I visited my local rescue shelter. There I struck up conversation with 9 individuals (employees and potential adopters) who fell within the aforementioned archetypes and analyzed their attitude towards pet adoption.
04. Empathy Mapping & Persona
From the contextual inquiry, research data was mapped out and analyzed to identify patterns, similarities, and contrasts. By doing so, we uncover insights from my observations and move towards identifying implicit user needs. Based on the opinions and views shared by participants, a primary user persona (Sarah) was created to encompass all common ideologies between users.
Defining And Ideation
01. POV Statements / HMW Questions
With my primary persona established, I moved onto translating the insights and needs of Sarah into defined "Point of View" statements. Afterwards, I crafted a set of "How Might We" questions to help ideate the best possible solution for each design challenge.
I then posted my HMW questions onto a whiteboard and generated as many ideas as possible, which I planned to review, sort, and refine during later stages. Where ever possible, I grouped my ideas by theme and relationship: Organizing ideas in this way helped me to expand on some of the ideas further.
01. Business and User Goals & Feature Roadmap
To help define minimal viable product features, I mapped the overlaps of business goals, user goals, and technical considerations. After a thorough cross examination of my brainstormed ideas with the business user goal map, I created a product roadmap, with features presented in order of priority in terms of development and investment. I also included metrics so that the impact and effectiveness of the features can be analyzed during testing phases.
01. Site Mapping & User Flow
Using the features furnished in my Product Feature Roadmap, a sitemap was created showing the content architecture proposed for Paws & Claws. With the site map in place, I created a user flow based on some simple use cases for Sarah. Doing so ensures that the organization of pages flow in a logical and smooth manner. The diagram below outlines 2 primary tasks Sarah may use during site navigation: 1. Searching, filtering, and reviewing of pet information, and 2. Contacting the shelter by filling out an inquiry form.
Before moving to digital wire-frames, initial sketches were made to build variations on the homepage design.
02. Mid Fidelity Wire-framing
Subsequently mid-fidelity responsive frames (corresponding to the user flows I originally mapped out) were created. These mid-fidelity frames were developed with the goal of quickly translating them into a prototype so that I could begin testing my design early in the process.
An interactive mid-fidelity prototype of Paws & Claw's desktop website was created using Invision. The prototype functionality is limited to four major task flows.
- Task 1: Search the site and filter for a Labrador Retriever, Male, Large, Adult that is good with children, cats, and dogs
- Task 2: Switch your residential zip code (60613) to your workplace’s (60645), and search for a compatible dog with the same filter criteria as before.
- Task 3: Search the pet profile page for the following information: multiple pictures, pet’s story, appearance, energy, health, compatibility, and personality information. Afterwards, send an adoption inquiry and schedule a meet and greet.
- Task 4: Search for Alive Rescue Shelter and navigate to Alive Rescue’s info page to view all their pets. Narrow your results from all pets to just dogs.
Below is a quick walk through of this mid-fidelity prototype. If you'd like to personally interact with it, click here.
Usability Testing & Validation
01. Usability Testing
To determine the level of efficiency of design and usability within the user interface of the interactive prototype, moderated usability testing was conducted. Due to time constraints, I recruited 3-5 willing participants. The test was designed to:
- Identify features that were successfully implemented in helping users accomplish tasks and uncover features that were missing / breaks user expectations / could be improved upon.
- Obtain feedback from users in regards to any obstacles, pain points, or frustrations during site interaction.
- Identify successes and room for improvements in the navigation, information architecture, flow, and design of the site.
02. Affinity Charts
An affinity map was created based on errors and issues observed during usability testing. I segregated data into 3 groups of findings: successes, challenges, and observations to distill insights. From there, I translated my insights into a recommended course of action to address our user's issues.
User Interface Design
01. Mood Board
The prototype was further updated to accommodate the affinity map recommendations. During this iterative stage, I also developed the site's visual design, first creating a mood board to draw inspiration for my color palette, imagery, logo, branding, type-faces, and icons.
Although pet adoption is a rather serious and heart-wrenching topic, I wanted users to be greeted with an air of positivism and professionalism. Users should feel warm and optimistic about the opportunity to add a new member to their family, and the site should be reflective of that.
Given the over-population of blacks, browns, grays, and whites from pet coats, I ended up going for a mid-century theme with blue and orange accent colors to add a pop of vibrancy from the rather neutral focus colors.
02. Logo Design
My logo is a graphical representation of the name itself: I wanted the logo to be representative of the site's mission, and believed the best direction would be to incorporate imagery of a dog and cat. I went for a silhouette with a play on positive and negative space to conserve real estate on the site's navigation area.
03. Style Tile & UI Kit
I then created a style tile by compiling the elements from my mood-board, logo, and additional visual elements. This served as a guide for when I applied the visual design to my final high-fidelity wire-frames. I had also created a UI Kit to serve as a reference for anyone working on the site. Should any additional iterations / add ons / changes need to be made in the future, having this guide will ensure consistency of styles and elements across all screens.
Final High Fidelity Frames
With the affinity map recommendations and visual design now set in place, I developed a revised set of high-fidelity responsive wire-frames for a second round of prototyping, as this would offer us another opportunity for user testing before site implementation.
Takeaways & Next Steps
The overall findings were quite successful given the time constraints on this project. Now that we have corrected for round 1 issues, during next stages, I would like to move forward with implementation of priority 2 (educational resource screens) and priority 3 (community / social) features. I'm most excited for the design and development of a community forum, as the organization of content and information architecture would likely be a fun challenge.