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 are in need of a responsive website design to cover this purpose.
Design a responsive website that covers core functionality: search for pets, information about specific pets, and information about DYR. In addition, I will be creating a Brand ID that highlights the brand message.
To help me understand who the potential users of DYR's new website are I began my research by conducting a market analysis. Notably, Millennials are the largest group of pet owners at 35%, closely followed by Baby Boomers (32%) and finally Generation X (27%). Interestingly, 61% of the growth in the population of dog owners in the past decade came from multicultural population segments. In addition, 80% of total pet owners derive happiness and emotional support from their pets.
After learning about the pet ownership and adoption market, I wanted to learn more about DYR's competitors. Since DYR is online only, I used a simple Google search for pet finding websites and examined the first three that appeared according to their algorithm, Petfinder, Petango, and Adopt A Pet. I examined each site, taking note of strengths and weaknesses.
Based on the quantitative data I discovered, I created several provisional personas in order to begin gaining empathy with potential users of the Mirror website. According to my market research, the generational representation of pet ownership was fairly even so I create personas belonging to each.
To better understand the pain points and goals of those who search for pets online, I ventured out to some local animal shelters and rescues. I was able to conduct one-on-one interviews with eight participants who fell within the provisional persona profiles I’d established. I asked each subject some questions about their experiences adopting a pet. During the interviews, I took notes as I asked questions and conversed with each participant.
After completing the one-on-one interviews, I created an empathy map that allowed me to uncover common patterns based on my interview notes and observations. From these patterns, I found key insights that directly translated to the needs and goals of my target user.
Once I had an understanding of the goals of my user as well as their needs for interacting with an online pet-finding site, I created a persona for my target user. Providing me with a realistic representation of my key audience segment, this persona helped to keep the concerns of the user at the forefront of every design decision I would make moving forward.
With my primary persona established, I moved into translating Gloria's insights and needs into defined "Point-of-View" statements, then crafting a set of "How Might We" questions to guide my design
I timed two rounds of three minutes each and came up with as many ideas as I could think of and then recorded them. This allowed me to ideate quickly and helps to answer the questions of how I might solve the needs of the user.
Now that I had a clear picture of my user's goals, I wanted to learn how they interacted with the goals of the business in order to discover any goals that may be shared by both entities. These shared goals helped to focus the next few stages of the design process of creating the MVP (minimum viable product).
With the project goals in focus, I created a product roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. Gloria's needs and priorities were used to focus the exercise. The roadmap includes proposed metrics for measurement so that the impact and effectiveness of the features can be analyzed.
Informed by the features and priorities outlined in my product roadmap, I created a site map showing the content architecture proposed for the new DYR website.
Equipped with my sitemap, I moved into design iteration. I created flows that showed the ways that my user would move through the site, paying close attention to the key task of finding a pet and saving them to the user's profile. The flow charts aided me in prioritizing the key pages that I'd need to create in order to complete this task.
I created some low-fidelity wireframe sketches of key frames corresponding to the user flows I'd mapped out. I referenced the UI requirements and site map to make sure I included priority elements for each page, and conducted a brief search for design patterns to reference as well.
Working from my lo-fi wireframes, I began working in Sketch to create a set of mid-fidelity responsive screens. This set of wireframes shows the site pages that a user would encounter as they progress from the home page. These 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.
One of my main design challenges was to design a responsive site. To that end, I created Responsive Wireframes that show what the site will look like on tablets and mobile screens. Paying close attention to established design patterns, I used common breakpoints to ensure that my designs would fit on any device.
In order to see how successful I was in making my design choices, I created a Mid-Fidelity Prototype using InVision. I wanted to see, in real-time, how my user would be able to flow through the main task and identify any pain-points or friction before moving into branding and higher fidelity deliverables.
You can view the prototype here.
Before conducting usability testing, I created a rubric outlining objectives, methodologies, information about participants, along with the task and scenario to be tested.
Usability testing feedback was gathered and organized into various categories (successes, problems, and observations). An affinity map output insights and recommendations, which served as a guideline to create the next iteration of the website. Recommendations were prioritized high to low, with any time or budget constraints also considered.
My second challenge was to create a Brand ID for DYR. First, I began to consider the keywords that I hoped to convey : Caring, Convenient, Endearing, Familiar, Playful, Soothing, Trustworthy. From here, I created a Mood Board to help inspire my decisions and keep me focused.
View Mood Board here.
Using my Mood Board as inspiration, I started to sketch ideas for a new logo which is included in the Brand Style Tile below
View my logo exploration here.
Once I had my new logo ready to work with, I created a Style Tile depicting the visual design direction of the brand.
With my recommended revisions list from the affinity map in hand, I moved forward with developing a revised set of high-fidelity wireframes. These show how the visual design will be applied to the site.
Finally, I created a UI Kit to serve as a reference and resource guide for anyone working on the site. Maintaining this guide will help to ensure the consistency of styles and elements used across the site.
