Petmatch
Responsive web design is a combination of technology and strategy, where design teams create designs that rearrange and even hide and reveal content on the screen as customers use different devices. Current best practices in responsive web design encourage teams to design “mobile first”: to work out the hierarchy and information flow on smaller screens (where it’s more of a challenge), before re-solving the problem on larger screens. Teams will take a mobile-first approach to creating a responsive web design to help a client solve an organizational problem regarding websites that support pet adoption.
Eric Gan
Jessica Lin
Adriana Poznanski
November 9 - December 9, 2021
In order to gain a better understanding of our domain, we conducted secondary research as well as interviewed pet owners on their experience with adoption while using online services. Our interviews were conducted using the directed storytelling method and asked questions about the timeline and context of their adoption. After the interviews, we completed a competitive analysis to learn more about the features that existing adoption services offer and what would be important to include in our design solution.
Our main research goals were to find out more about the current services for adopting pets, how they fulfill user needs, and what issues they have. We wanted to uncover pain points in the adoption process and discover opportunities for innovation, while analyzing the process timeline and establishing a vision for a preferred future for online adoption services.
Taking the data we collected from our interviews, we created individual customer journey maps to help us identify pain points and opportunities within the adoption process. We then created an overall customer journey map to show a collective experience.
Based on our insights from our interviews and research, we created a design brief to help us get more clarity and concretely define our goals and intentions.
Objective: Our goal is to provide an enjoyable experience for users looking to adopt when searching for adoptable pets for users wanting to adopt. We also want to provide educational materials so that users feel prepared for their pet without having to turn to external resources and create a way for shelters to easily list their available pets and increase the chances of pets being adopted by having them provide more initial information about each animal.
Success Criteria: The final product is able to successfully transition from web to mobile and vice-versa, creating a responsive web experience that retains the data and settings from the last device utilized without disrupting the service. The service will be able to add value to both the user and the adoption agency.
Target User Demographic: Our target audience is young to middle aged adults who are looking to adopt a pet.
Stakeholders: Stakeholders in this process include potential adopters and animal shelters.
Scope: Our scope includes providing more information about specific pets, working on the search/filtering options, and providing educational resources on how to take care of pets.
Our team then further scoped our design by generating 8 scenarios of use involving users in the customer and service provider roles. They each set up a situation with a trigger, interaction, and detailed the value received. All scenarios were unique solutions aimed to discover new opportunities by taking risks.
To further explore potential use cases of our service, we chose four scenarios in which a responsive website could enhance the pet adoption process for users and created storyboards of these scenarios. The scenarios focused on improving the pain points highlighted in our research.
Based on our research and exploration of scenarios through our storyboards, we decided to create a solution centered around an improved filtering system. Allowing users to filter pets by personality traits, not just physical characteristics, would allow them to adopt pets that are the best fit for them. We also decided to incorporate a personalized pet care page into our solution, to help inform users of how to care for their potential pet. To quickly sketch out initial ideas of what our service’s interface would look like, we created a wireframe.
We mainly decided to work with a mobile frame for low-fidelity so we could flesh out our design first and then transfer it to a website frame. Since we were creating a pet search service, one of the main pages that we wanted to design was the page of the website that listed all possible pets. We considered progressive disclosure and typographic hierarchy while developing this prototype, such as when placing the number of available pets, as well as the filter and sort options, at the top and in bold. We also ensured that this page wasn’t text-heavy and mostly pictures so that the user wouldn’t be distracted from the pictures of the pets.
Since a core part of our solution was designing an improved filtering system, we included the filtering options in our low-fidelity prototype. From our interviews, we noticed that some common filtering options that people would have liked to see were temperament and behavior around other animals. We also made the filtering categories expandable so that it was not mandatory for the user to pick a filtering option from every single category. Instead, they could just expand and select only the filtering options they valued.
Our mid-fidelity prototype was a continuation of our mobile low-fidelity prototype. To further build out our design for a cohesive user experience, we added more detail to the individual pet page, as well as creating pet care pages - one personalized and one general. This was to address a common pain point - lack of information about what to do after adoption. Allowing for a personalized option ensured that users were able to see exact information for different pets, guaranteeing accurate information and expectations for each potential pet. To improve the organization of the filtering, we placed the three most broad and non-negotiable filters at the top and then listed the more detailed filters below.
Critique we got from classmates was that the care page seemed slightly text-heavy and that the lack of indication on whether or not the filters were chosen was confusing. It was also pointed out that first-time pet owners may not know the meaning of a “young” cat or a “small” dog. A few people mentioned that it would be convenient to be able to contact the pet shelter from the pet’s profile page.
