DYR

Case Study of Responsive Website
A Platform for pet Adoption

PROJECT BACKGROUND: In United States, around 6.5 million companion animals enter animal shelters every year, mostly cats (3.2 million) and dogs (3.3 million). Each year around 3.2 million shelter animals are adopted and about 1.5 million shelter animals are euthanized. DYR is an association of animal shelters and their goals are to raise awareness and discoverability of this problem.
THE CHALLENGE: Create a platform that allows people to see all the available animals in any shelter close (or not) to them.
THE SOLUTION: A responsive website that helps people to discover adoptable pets and learn more about shelters. Core functionalities of the website includes searching for pet, information about specific pet and information about shelters.
ROLE: UX+UI Designer (Research, Interaction design, Visual design)
DESIGN PROCESS:

Research

TOOLS USED: SECONDARY RESEARCH: MARKET ANALYSIS, COMPETITOR ANALYSIS, PRIMARY RESEARCH: USER INTERVIEW.

RESEARCH GOALS

With the requirements from project brief and research plan in hand, I started research phase to fulfill following goals:

• To identify and define target users of DYR.
• To determine strengths and weaknesses of DYR’s competitors.
• To understand strengths, weaknesses and pain points of current adoption system.
• To understand factors that influence people’s decision for adopting a pet.
• To understand what information people want to see in pet adoption website.
• To understand the reasons why people adopt or don't want to adopt a pet.

MARKET ANALYSIS

I conducted market analysis to understand demographics of pet ownership, reasons why people adopt or don’t want to adopt a pet and I also gathered information about process of pet adoption and pet adoption organizations. Keys findings are:

• Millennials account for 35% of pet owners, baby boomers 32% and other age group 33%.
• People adopt pets because they want to rescue a pet and also adoption is less expensive.
• Reasons people don't want to adopt pets are either they are looking for specific breed or they think that animals in the shelters have health or behavioral issues.

COMPETITOR ANALYSIS

Next I moved on to competitor analysis to identify DYR’s competitors and to determine their strengths and weaknesses.

Based on my secondary research, I created provisional personas to begin thinking about who might make up DYR’s customer base. It helped me to focused on the question I wanted to ask in interviews.

PRIMARY RESEARCH

After the secondary research, I developed list of questions and conducted series of interviews with people who had experience with pet adoption or who were considering owning a pet. These interviews helped me in gaining understanding of people’s experiences and preferences about adopting a pet.

Click here to view full interview guide.

Assumptions I hoped to prove or disprove were:

• Majority people are aware of online platform for pet adoption.
• People think that online platforms for pet adoption are not updated.
• People are not attracted to buy older pets.
• People are nervous to adopt a pet because of their health or behavioral issues.

Synthesis + Defining

TOOLS USED: EMPATHY MAP, PRIMARY PERSONA, POV + HMW STATEMENTS, BRAINSTORMING

EMPATHY MAP

After completing interviews I gathered and organised all information to look for insights. I wrote down responses on sticky notes and mapped them out in says, does, thinking and feeling. This method allowed me to discover trends and patterns from which I was able to draw insights and discover the needs of my user.

Insights

• People value adopting a pet.

• People struggle with information related to pet while adopting.

• Users know that adoption websites exists but they think that they may not get all the information they need.

Needs

• Users need to be informed about benefits of pet adoption.

• Users need to be informed of pet's history and behavior.

• Users need to know that adoption websites are updated.

PERSONA

Using all the qualitative data that I gathered in my research process, I created DYR’s primary persona Jennah.

POV STATEMENTS & HMW QUESTIONS

Using my persona's goals and needs I develop Point of View statements and translate them into How Might We questions. This allowed me to define the problem before thinking about solutions.

BRAINSTORMING

In the brainstorming session I spend 3-5mins on each HMW questions to generate as many solutions as possible.

Strategy

TOOLS USED: PROJECT GOALS MAPPING, PRODUCT ROADMAP, SITE MAPPING

After a short brainstorming session and aligning the business and user goals, I created a product roadmap outlining features and metrics. This helped me in organizing my thoughts and prioritize what features to focus on for DYR's website.

Business and User Goals
Product Roadmap

INFORMATION ARCHITECTURE - SITEMAP

After outlining the features and priorities in product roadmap, I created a site map showing the content architecture of DYR’s website.

Interaction design

TOOLS USED: USER FLOW MAP, SKETCHING, WIREFRAMING IN ADOBE XD

USER FLOW

Once site structure was established, I created a user flow to determine how Jennah (primary persona) will navigate through DYR's site.

WIREFRAMING

I established UI requirements for key pages based on user flow. I started with low-fidelity wireframe sketches on paper and experimented with different solutions and layout for each page.

Then I moved on to create mid-fidelity responsive wireframes. Key pages created were homepage, pet search page, pet detail page and pet care. The wireframes were developed with the intention to quickly translate them into a prototype, so that I could begin testing my design early in the process.

Prototype and testing

TOOLS USED: TESTING PLAN AND SCRIPT, PROTOTYPE IN ADOBE XD, AFFINITY MAP

I created prototype in Adobe XD, then I conducted in-person usability testing with four users who were recruited in a public places. I provided the users with a detailed scenario and had them complete series of simple tasks.

AFFINITY MAP

After testing my prototype I created affinity map to organize responses and observations. This helped me to discover patterns and driving insights, from which I constructed design recommendations. I listed out design recommendation in the order of high priority to low priority.

UI Design and Iteration

TOOLS USED: MOODBOARD, STYLETILE, HIGH-FIDELITY WIREFRAMES + PROTOTYPE, UI KIT

I started working on UI design by defining brand attributes Playful / Happy / friendly / lively. With these words in mind I created moodboard and organized the images into color palette, typography, web inspiration and logo.

After that I refined the direction of visual design to create style tile, selected logo from various sketches and digitized it.

HIGH FIDELITY WIREFRAMES

With list of recommended design revisions and final branding decisions in hand , I moved forward to create high-fidelity wireframes.

View High-fidelity prototype

NEXT STEPS

Test: Further user testing with the updated, high-fidelity prototype to test the usability of the current interface.

Iterate: More iteration of the prototype based on next round of usability test.

The Research part of the project was incredibly informative. I learned a lot by talking to people and asking questions about their experience with current adoption system. While designing I kept user needs in mind to provide them seamless user experience.
The feedback I received from testing prototype with users was also very valuable and I was able to make iteration at early stage. For UI design providing happy, fun and playful feeling and yet trustworthy and reliable was bit challenging.
Overall I had a lot of fun designing this website on such a fun topic.