Connect the Spots
TEAM MEMBERS & Primary ROLES
Chris White – Information Architect
Natalya Miranda – Lead Designer
Jacob Perez – Design Researcher
Beau Pesa – Visual Designer
- Interactive prototype
- Hi-fidelity mockups
- Annotated, responsive wireframes
- User flows
- Style guide and moodboard
Create a website to:
- Enable users to determine if they are a dog or cat person and find the most fitting breed of dog
- Browse dogs available to adopt and get shelter information
- Allow not-ready-to-adopt user to support shelters through donations of time, money, or canned food
- Allow shelters to review user profiles when they arrive for a quicker adoption process
I was on a team given the project brief above as part of the General Assembly User Experience Design Immersive course. We began the project by defining the problem more clearly.
Many people want to adopt a pet but don't know what type of pet would be best for them to adopt. Through a series of two quizzes, we will help people decide whether to adopt a cat or dog, and then which breed. Users can then view matching animals in nearby shelters more informed about what to look for.
I led the competitive analysis and looked at websites with dog breed quizzes and the local Austin animal shelter websites. I didn't find any that have a quiz and available shelter animals together.
We talked to the staff and a few people adopting a pet at Austin Pets Alive! and the Austin Humane Society about what factors are considered important when adopting a pet. Staff members told us that many pets are returned because of maintenance requirements, leading us to focus on the “matching” part of adoption, not only what people wanted in a pet but also what type of pet they could care for.
This insight led to quiz questions about the living situation such as the size of the apartment/house and how long the pet would be left alone. Since some pets can handle more restrictive conditions than others, we tried to reduce unsuitable adoptions so pets don't end up back at the shelter.
A card sort was used to determine the most important characteristics when adopting a pet. Participants categorized and sorted the cards from most to least important factors, informing the quiz questions about the characteristics of the dog breeds.
Personas and User Flows
We created the personas to fit common motivations for adopting a pet. A user flow for each of the personas illustrates how they would use the site differently.
We also assigned a user story to each persona:
As an active person, I want to find a new dog, so that I can share my love for the outdoors with it.
As someone who lives alone, I want to find my ideal pet, so that I have a companion.
As a family with 8 year-old-kid, we want a pet to keep our son busy, so that we can enjoy more time for ourselves.
After sketching a few pages, we realized the website required more pages than we initially thought, but didn't know what pages were needed. We paused our sketching and Natalya guided our team in creating a process flow to create a complete list of pages. When the flow was complete with Post-It notes Beau created the digital version.
Sketching and Design Studio
We conducted a Design Studio to create wireframes for the most important pages. Each of us sketched 3-5 versions of a page and reviewed each other's sketches, pointing out the pros and cons of the design. After a few rounds of the design studio our sketches began to look similar for each page. Our team discussed the differences and agreed upon a single design.
The quiz was written to be light and engaging with humorous language and large icons. I wrote the questions and answers with the objective of matching pets with suitable adopters in mind. We decided on the available pet page filters phrasing such as talkative for louder and extra mile for more maintenance needed. Some of these were based on the questions and answers in the quiz to keep the language consistent between the quiz and pet pages.
I wrote the quiz based on the characteristics for adopting a pet found during research. The characteristics for the 25 most common dog breeds are below. These were used for filters on the available pet page and would be preselected if the user completed the quiz.
Style Guide and Mood Board
Creating a style guide was important for consistent visuals across the website since each of us were working on different pages simultaneously. Beau lead this part of the project and Jacob helped finalize the style guide.
The mood board captures the lighthearted feel of adopting pets along with the natural colors associated with animals. The mood and colors influenced us to keep the visual and content lively, bright and natural while designing.
Upon completing each phase we tested our design with possible users. This included testing with a paper prototype, a Balsamiq wireframe, and Sketch mockups in Invision. Changes from the results were noted and implemented in the next phase to refine our design.
One of our biggest accomplishments was finding important characteristics that adoption sites underuse. We used these factors to match adopters more effectively with pets but never shared the reasoning behind the questions and filters with users. However, sharing insights on why animals are returned to shelters could prevent people from adopting a pet they are not prepared to care for.
Our team worked well together but could have shared our ideas through sketches earlier and more often, instead of relying on verbal explanations, to save time discussing ideas. After sketching our ideas, we could have created digital wireframes before creating hi-resolution mockups in Sketch which would have saved time revising changes to layout and content.
Throughout the process we followed an Agile framework including daily stand ups which helped us track each other's progress since we worked on different pages of the site simultaneously.
From creating the quiz, I learned how a few questions with multiple answers can lead to many different outputs. Assigning the different combinations can easily become complex and requires a lot of work. Reducing the number of answers on the questions would have made matching the answers to dog breed matches easier.
At the end of the project we presented the website design to a web development class to create a functional version.
A redesign of the website for a local shoe store, InStep.
A redesign of the world's most largest classifieds website.
A collection of smaller projects.