CONNECT THE SPOTS
VISION
PROJECT DESCRIPTION
One of the big problems with pet adoption is that many do not fully understand the responsibilities involved and often animals end up back in shelters. We aimed to employ technology as a means to help preventing pets from being returned and keep Austin's no kill ratio above its target - 95%.
This was my first interdisciplinary team assignment during General Assembly's ten week immersive course. We worked with a group of web development students to design and build a working animal shelter and pet adoption website.
SUGGESTED DOGS PAGE
The website is responsive for both desktop browser and mobile device viewing. Above a few key screens are shown: animal search modal, home page and shelter account sign up (from left to right.)
THE TEAM
CHALLENGES
-
Figure out how technology can help prevent animals from ending up back in shelters
-
Work with developers in a team and make sure they are getting what they need from the UX members
-
Utilize the lean agile methodology over the project's lifespan, despite the process being new to all team members involved.
ACTIVITIES
UX :
Jacob Perez
Natalya Miranda
Chris White
Development :
Shirish Dali
Jessie Haughton
Richard Davis
TIMELINE
Two weeks
TOOLS
Pen and paper, Adobe C.S.
Sketch,
InVision,
User research, user testing, open card sorting, surveys, design information architecture, site mapping, create process flows, contextual interviews, competitive analysis, created personas, design studio sketching, storyboarding, wireframing, prototyping, made high fidelity mock ups, style guide creation, employed agile sprint methodology.
RESEARCH
METHODS
We started off by making a study of the existing shelter system in Austin and attempted to find out where it was broken and how a digital product could potentially alleviate pain points in the system. Below are some of the research methods we used to learn more about the problem and our user groups.
CONTEXTUAL INQUIRY
OPEN CARD SORT
We visited two animal shelters to speak with volunteers and potential adopters. immediately, we learned that returned animals were one of the biggest problems dealt with on a daily basis.
This exercise helped us learn what qualities in animals people were most concerned with when considering the adoption of a new pet.
SURVEYS
We surveyed people to learn what percentage of adopters were first time pet owners, where they lived, who they lived with and other questions engineered to help them assess potential factors in their lives that might impact a pet adoption either positively or negatively.
COMPETITIVE ANALYSIS
We looked at two other animal shelter adoption websites to analyze their strengths and weaknesses. The American Kennel Club's site provided us with some valuable insight into what dog adopters need to consider before committing to full time ownership; their quiz feature was a key source of inspiration.
IDEATION
ATTRIBUTE BRAINSTORM
As a team, we began our ideation process by writing down all the possible attributes an adopter and potential adoptee might have that we could think of.
USER STORIES, PERSONAS AND USER FLOWS
We looked at two other animal shelter adoption websites to analyze their strengths and weaknesses. The American Kennel Club's site provided us with some valuable insight into what dog adopters need to consider before committing to full time ownership; their quiz feature was a key source of inspiration.
USER STORY + PERSONAS
USER FLOW
STORYBOARD
I was thinking about the "Ron" persona and decided to storyboard an incident that would cause him to consider adopting a dog. In this scenario, his current pet has gotten too old to run in Texas heat, so he decides to adopt a younger dog he can be active with while his older pet relaxes at home. I drew this fast, 5 minutes max.
TASK ANALYSIS AND INFORMATION ARCHITECTURE
We used a task analysis for each user story to focus on the interactions that would take place within the site. This helped us realize that there were steps we hadn't thought about while making user flows.
SYSTEM MAPPING
As we continued to develop the information architecture, the site kept growing in complexity, so to make sure that users could navigate the site easily and didn't get stuck in a dead end we created this system map to help us visualize the architecture.
MOBILE USER FLOW SKETCH
USER FLOW MAP
DELINEATE
MOOD BOARD
With a decent understanding of our user groups and the information architecture in place, it was time to begin designing the look and feel of the website's surface plane. I began by creating a mood board that sampled colors, textures and emotions from pictures of people and pets interacting.
WIREFRAME SKETCHES
With all of the necessary pages identified, we split them up amongst ourselves and began to sketch out possible ideas for each of them individually. I was focused on the home page and dog search dashboard initially.
HOME PAGE SKETCH
USER PROFILE SKETCH
STYLE GUIDE
I put together this early style guide in order to help all team members create mock ups with a similar look and feel. My background in graphic design and illustration lends itself well to creating documents like this one and I enjoy making them.
HIGH FIDELITY MOCK UPS
I put together this early style guide in order to help all team members create mock ups with a similar look and feel. My background in graphic design and illustration lends itself well to creating documents like this one and I enjoy making them.
MOBILE SCREENS
DESKTOP SCREENS
Spacing
This product was designed to be mobile web responsive, so I created a spacing grid system based loosely on the twelve column bootstrap model. In portrait view on a tablet, the grid compresses into six columns and for mobile web into four.
METHODOLOGY
For the full term of the two week design sprint, we utilized Agile methodologies. This included daily stand-ups while asking the three questions, using Trello to track our burn down chart and breaking down project tasks using t-shirt sizing.
VALIDATE
GUERRILLA TESTING
Using our high fidelity mock ups, we put together a clickable prototype using InVision so that we could run user tests on our finished product. Overall, most users easily understood the website and had very little trouble navigating the site and completing their desired actions.
WHAT WE DID RIGHT
-
Distributed work evenly
-
Validated ideas throughout entire process
-
Created developer friendly deliverables
-
Stayed friends
Prev.
AREAS TO IMPROVE
-
Have sketches ready before discussions
-
Don't duplicate work
-
Spend more time in low resolution prototypes
Next