Aaron Cecchini-Butler
Aaron Cecchini-Butler, UX Research / UI Design
inu mockup grass.jpg

inu - Mobile App Connecting Dog Shelters & Volunteers

inu

The What and the Why:

Me and Maple, my Shiba Inu (it all makes sense now!) And yes, the orange in the app was pulled directly from her fur. :)

Me and Maple, my Shiba Inu (it all makes sense now!) And yes, the orange in the app was pulled directly from her fur. :)

As the proud owner of two Shiba Inus it pains me to think of dogs who are stuck in shelters that are understaffed. There is a shortage of volunteers due to a shortage of volunteer management. However, people often express a deep desire to spend time with dogs. The solution to both problems can be the same - get people who miss spending time with dogs to volunteer at dog shelters.

I designed this app to connect dog shelters with volunteers by standardizing volunteer requirements and incorporating simple ways for volunteers to upload their information.

Some of the existing challenges are:

  • Inspire volunteers

  • Making it easy to volunteer

  • Targeting dog lovers who don’t currently have a dog

  • Include adoption functionality

  • According to the National Humane Society, shelters advertise for volunteers as follows:

    • 63% web

    • 54% their personal newsletters

    • 45% community newspaper

I addressed these issues by creating:

  • An app that allows volunteers to upload their information and availability for shelters

  • An app that encourages shelters to make the same requirements for volunteers

  • A digital space to see current adoptable animals

 

After determining the initial problem and ideating some solutions, I interviewed a number of people and created a user persona to gain more perspective and inform my next steps.

 
 
 

Primary Insights:

  • Many people don’t know how to volunteer

  • Most volunteers found opportunity through a friend

  • In urban areas many dog-lovers are prohibited from having a pet by their lease

  • College students said that volunteering would be a great temporary solution for both missing their family pet and not being able to have a pet

 
 

User Persona:

 
Alison Pierce has the potential to be a power-user of inu if it’s designed with her in mind.

Alison Pierce has the potential to be a power-user of inu if it’s designed with her in mind.

 
 
 

Before I moved on, I wanted to get informed. I decided to do a competitive market analysis as well as construct some provisional personas.

 
 
market analysis
 
 

The biggest takeaway from my competitive market analysis was the lack of existing solutions. Many of the apps that exist are poor. Even more concerning was adopet’s unknown error during sign-up. There was no explanation and no way for me to get help!

 
 

I wanted to deepen my empathy for a potential user so I drew up a quick storyboard to explore their journey.

 
 
 

At this point, I felt prepared to build out an information architecture in order to decide upon which screens needed to be built.

 
 
 
 
 
 
 

The IA for inu is structured on the concept of getting users to input their info once. This can happen either during sign-up or during the volunteer application process - to minimize redirecting the user and encountering abandonment.

 
 

At this point I also wanted to flesh out the sign-up user flow to try and detect improvements I could make to the IA.

 
 
 
 
 
 

Creating the user flow for the sign-up process made it clear that I had to create multiple chances for the user to fill out their profile and availability. Additionally, using the confirmation page as a place to include a CTA for the other major function of the app (Adoption) was quite successful in user testing, as the user has the feeling of accomplishment related to a confirmation page, combined with being in the emotional space of wanting to interact with dogs.

 
 

After completing the information architecture, I dove into sketches. I played with logo designs and word mark ideas as well (some of which are visible here).

 
 
IMG_6600.jpeg
IMG_3844.jpeg
 

After sketching out all of the screens, I began putting together some wireframes. There was a short break between sketching and wireframes, so I was very thankful for my color-coded notes!

 
 
WF Personal Info.png
WF Info.png
WF Volunteer.png
 

Moving from wireframes to final designs was exciting because I was confident in what I was going for. I put together a UI Kit before I began on these designs to finalize decisions on button designs, icons and typography.

 
 
The welcome screen is meant to capture the  positive vibe of inu .

The welcome screen is meant to capture the positive vibe of inu.

A  solid grid layout  for volunteer options allows a chance for shelters to put their best paw forward with a great photo. All of the final designs for inu  utilize iOs Human Interface Guidelines .

A solid grid layout for volunteer options allows a chance for shelters to put their best paw forward with a great photo. All of the final designs for inu utilize iOs Human Interface Guidelines.

A  page describing the shelter’s cause is very important for the user.  You don’t want to end up at a shelter specializing in aggressive dogs if you don’t feel prepared for that, and you don’t want to end up at a shelter of puppies if … wait, of course you want to end up at a shelter of puppies.

A page describing the shelter’s cause is very important for the user. You don’t want to end up at a shelter specializing in aggressive dogs if you don’t feel prepared for that, and you don’t want to end up at a shelter of puppies if … wait, of course you want to end up at a shelter of puppies.

The calendar is central to the design of inu. With this design, I aim to start the process of  standardizing volunteer times . If a user can select their availability in advance, the shelter must then select from that availability.  This can take some of the complexity out of the current method  of finding shelter volunteer opportunities.

The calendar is central to the design of inu. With this design, I aim to start the process of standardizing volunteer times. If a user can select their availability in advance, the shelter must then select from that availability. This can take some of the complexity out of the current method of finding shelter volunteer opportunities.

A page to check info before submitting is always important, here we have a page with  multiple ways to change any information  that may be wrong. Clicking the change button brings you back to the beginning of the Information Input Flow, (while leaving fields filled in) whereas the plus button brings you to the beginning of the calendar flow.  Additionally, dates/times can be deleted directly from this screen by dragging them to the bottom of the screen.

A page to check info before submitting is always important, here we have a page with multiple ways to change any information that may be wrong. Clicking the change button brings you back to the beginning of the Information Input Flow, (while leaving fields filled in) whereas the plus button brings you to the beginning of the calendar flow.

Additionally, dates/times can be deleted directly from this screen by dragging them to the bottom of the screen.

Confirmation pages are a great chance to include a CTA . The user is probably feeling positive and a large “See the pups!” has a great chance of getting clicked. This button would bring the user to the adoption page, hopefully resulting in more dogs with homes!

Confirmation pages are a great chance to include a CTA. The user is probably feeling positive and a large “See the pups!” has a great chance of getting clicked. This button would bring the user to the adoption page, hopefully resulting in more dogs with homes!

 

After finishing my designs, I like to utilize the UX Research I’ve completed to create a notification sound design.

 
 
 

The benefits of a custom notification sound are obvious. The user doesn’t need to check their screen to see what the sound was. For this sound, I recorded my dogs collars using a Neumann TLM-103. I then applied EQ to the sound to pull out the low end (not audible on iPhone speakers) and applied a minimal amount of reverb.

 
 

Although most of inu isn’t animation intensive, I had a specific vision for the calendar flow that I wanted to flesh out. I created this animation in Principle.

 
 
 

The process of designing inu has been a joy, and it doesn’t stop here! I’ve included some next steps below.

 
 
 

inu has a special place close to my heart. I’ve been to dog shelters and seen the sadness - and I’ve also seen the joy in a dog’s eyes when they get to interact with the volunteers. In the US, there is no shortage of dog-lovers so it seems to me that a shortage of volunteers is something that will only exist until a similar solution to inu is presented. Although I am not in a position to turn inu into a reality at this point, I’ve listed where I’ll be going next with this design process:

  • A second round of user testing using InVision

  • Responsive design - adapting to different screens

  • Updating style guide and UI kit based on iterations to maintain consistency

  • A second round of UX Research involving more local shelters