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

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

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.