DYR
DYR is a non-profit association that partners with animal shelters all over the country to raise awareness about animal adoption and foster the discoverability of pets in need of a new home.
About the Project
DYR wants to create a platform that allows people to see all the available animals in any shelter close by. They hope to educate the public on the adoption process and spread awareness through their new responsive website. DYR also needs a new logo that will speak to their mission and goals.
My Role
This was a capstone project completed through Designlab's UX Academy in August of 2018. I acted as the Project Manager, User Researcher, Graphic Designer, UX Designer and UI Designer.
Project Challenge
How can I create a captivating UI design for users to find their perfect pet?
My Design Process
Key Focus
Ideate & Prototype
Step 1: Research
Using both qualitative and quantitative methodologies, I started this project by researching current resources potential pet owners use to adopt a pet.
I found that many shelters use online platforms to advertise pets looking for a home. Filters are becoming very specific allowing for customizable searches. Animal awareness is also a central focus for most competitors already in the space.
User Interviews
Most of the issues and gaps in the market were identified through user interviews. I was able to speak to both animal shelter staff and prospective pet owners. During these discussions, individuals shared that the online pet search process was overwhelming. Although searches are becoming more thorough and customizable, many pet searchers described the process as tedious and time consuming.
In addition, shelter staff felt that visitors are oblivious to the benefits of adoption vs. breeding. Breeds are no longer disclosed at this shelter, so that the focus can be on the pet’s personality rather than its pedigree. Their main priority is to continue educating the public on adoption and advocacy opportunities.
STEP 2: Define
Personas
Using my research and interview notes, I created user personas. This allowed me to give names and faces to the different types of people that would visit DYR's site. As I developed each persona, it was important for me to consider what each person would say, do, think or feel.
Feature List
With the users now defined, I could determine what features the site would need to satisfy each persona's needs and accomplish DYR’s mission. These features included:
Advertise who DYR is and their main goals as an organization
Educate users on adoptions and its benefits
Raise awareness about how users can help shelters and pets in their community
Develop a search feature for users to browse through pets
Design pet info pages for each pet posted on the website
Create an account where users can access their wish list of pets they’re interested in
Schedule to meet a pet at their shelter
STEP 3: Ideate
Leveraging my research and feature goals, I constructed a blueprint of the site to better understand how users would flow through the website. During this phase, I sketched my sitemap, user flow and wireframes.
Sitemap
User Flow
It was at this point, that I thought about the best way for users to browse through a high volume of pets. Referencing my research, I found a common trend with users using a pet’s appearance as their first filter in sorting through the ones they were interested in.
I wanted to develop a way for users to quickly “swipe” through pet photos to decide which ones they liked and didn’t like – similar to Tinder.
Wireframe
STEP 4: Visual Design
Brand Logo & Style Tile
My inspiration for DYR’s logo and style tile were the organization’s mission and brand. They associate themselves with qualities such as:
Honesty
Kindness
Love
Awareness
Equality
STEP 5: Prototype
Using my wireframes for guidance, I incorporated all of the functionality, color and content to create high fidelity prototypes for both desktop and mobile devices. The prototypes were based off of users being able to search for a pet, swipe through options, schedule a visit, and learn about DYR and the adoption process.
Desktop Prototype
Mobile Prototype
Phase 5: Test
User testing was conducted with participants fitting the demographic of my personas. I observed each participant as I asked them to complete the following tasks:
Specify search criteria for a dog
Swipe through dog matches
Add 3 dogs to your wish list (Ronald, Lucy, Scooter)
Schedule a visit with 1 dog (Scooter)
Multiple feedback and insights were gathered during testing, which were then compiled into an affinity map.
After reviewing users’ thoughts of the first prototype, I made improvements to better suit their needs and improve the overall process.
Feel free to test the most recent DYR prototype here.
Reflection & Next Steps
This project had the challenge of creating a responsive “swiping” UI design in a 2-week time frame. Given the challenge, I learned to manage my time by establishing a clear timeline with actionable milestones. In addition, I leveraged different visual hierarchy principals to make a multi-functional design.
My next step for this project would be to develop wireframes for the second phase of the website’s features (i.e. shelter account sign-in for managing pet postings and volunteer opportunities).