Case Study: DYR

 
macbook dyr copy.png
 
 
 

Background

Client: DYR

Duration of project : 2 weeks

DYR is an association of animal shelters. They partner with shelters all over the country to raise awareness and foster the discoverability of pets waiting for a home. They're looking to create a platform that connects people to available animals in shelters. 

Design Goals & Objectives

  • Design a responsive website (desktop, tablet, and mobile) that is functional: search for pets, information about specific pets & information about DYR/shelters

  • Design and define new branding that effectively communicates DYR's personality 

 

Empathize

Research Goals

  • Is there anyone else doing something similar?

  • What are users perceptions around animal shelters/adopting?

  • What are the main issues/concerns people have when adopting?

  • What are main reasons of purchasing from breeders vs adopting?

Research Methodologies

I wanted to gain a better understanding of shelters and the process of adopting a dog. I started with secondary research to get educated on the requirements and familiarize myself with the world of adoption and current offerings. I then started interviewing participants to hear their experiences and gain their perspectives.

Interview

I interviewed users who are dog owners since they've been through the process of adopting or purchasing from a breeder. Hearing their past experiences is valuable information that I can use when designing for DYR. 

I interviewed 2 females & 2 males ages 27-38 with varying professions, marital status, education and number of members in household.

Key Findings

Fit their lifestyle: All participants expressed wanting to find a dog that would fit their lifestyle - whether it was a running buddy, a dog that was okay just sitting around, or a dog that wouldn’t get too big for their current apartment.

Specific type: All participants were looking for specifics while doing their search such as specific gender, age, and whether or not they were hypoallergenic.  

Location: They all mentioned that they only looked at areas around them. They didn’t want to travel too far.

Not particular: All participants mentioned their decision was more in the moment and based off of emotion.  Most just went to look after seeing pictures and once they were there fell in love with a dog and pulled the trigger. The location or shelter of where they ended up buying their dog didn’t seem to matter but rather if the dog fit their lifestyle/specifics they were looking for.

Cost: The amount they paid wasn’t mentioned unless asked. The cost didn’t seem very important to them.

 

Define

Project Goals

After completing and compiling user interviews, I listed business goals alongside key findings from my user research to find commonalities.

 
 

Sitemap

I created a sitemap under the assumption that users would categorize the items in this manner. My first draft included a lot of features I thought I wanted to include in the header of the homepage. However, I realized some of those items may not necessarily need to be included within the header and could be included in the footer.

Version 1

Version 1

Version 2

Version 2


Product Feature Roadmap

Creating this list took a bit of time. A lot of DYR's competitors had various features within their homepage but I realized a lot of it did not apply to DYR and their mission. I looked over the brief again and my user interview findings and thought about what their main objectives were then finalized the list.

 
Artboard 5.png
 
 

Ideate

Sketches: Wireframes & Logo

I started sketching different layouts while thinking about DYR's brand and how I wanted users to feel when arriving at the homepage. I thought about adjectives such as friendly, welcoming, playful and new. I also took a look back at the product features roadmap and project goals to decide what to include. I then started sketching the homepage and logo and transferred them to Sketch.

dyr sketches.png
Combined.png
 
 

 

Style Tile

Afterwards I created a style tile while still thinking about the prior adjectives (friendly, welcoming, playful and new). It includes my finalized logo, typeface, color palette and images.

 
 
 

Prototype

High Fidelity Wireframes

I was excited to apply my UI kit to my homepage, profile creation and setting a date pages! I created high-fidelity responsive wireframes and built a prototype using Invision.

 
 
all 3 responses.png
Match homepage.png
match screens.png
 



Testing

After creating my test plan, I conducted user testing with 4 participants ages 29-38. The participants were 2 females and 2 males. 3 have one or more than one dog, 1 participant does not own a dog. I conducted all these test in person.

Objectives

  • Observe if users can successfully set a date with a dog (Scout)

  • Do they run into any issues/pauses? 

  • Does the website offer a clear UI experience?

  • Is the content on each page clear?

  • Is there any information that the user needs that is not readily available to complete each task?

Goals

  • Evaluate the users process and interaction with DYR's website

  • Identify any issues or confusion when users create their profile and set a date

 Key findings

Successes

  • All participants felt the pages were easy to navigate and the process of setting a date was easy and quick

  • All participants felt that the homepage was clean, concise, and new

  • Most participants mentioned they felt confident in finding a match after completing their profile 


Frustration & Confusion

  • Most participants wanted to be able to include more information about themselves and their living situation so that the dogs also get what they need to live comfortably

  • A few participants asked about next steps after setting up their date in regards to the shelter and whether there is an application process

  • One participant mentioned the footer and header information felt redundant

 

Next Steps

I started making a few adjustments to the homepage and would like to A/B test which homepage showcases DYR in the clearest way. I'd also like to include additional areas where users can include more information about themselves as well as features such as emailing confirmation dates to themselves and providing information regarding the application process.

dyr sidebyside.png