Canine Assistants

Timeline:

10 weeks:

August 2023 - November 2023

Role:

I was one Product Designer of 2. We worked alongside a Product Manager and Engineering Manager as well as 5 Developers. Together we worked with a client to develop a personalized solution for their needs.


Canine Assistants is a nonprofit in the Metro-Atlanta area

Canine Assistants is a 501c3 dedicated to educating people and dogs so they may enhance the lives of one another. They specialize in placing service dogs with people who have difficulty with mobility, epilepsy/seizure disorders, or Type 1 Diabetes as well as dogs in pediatric hospitals and similar facilities. Canine Assistants believes that dogs who are asked to improve the lives of people in need deserve themselves to lead happy lives. They use an unconventional teaching method called the bond-based approach to prepare their dogs to live in their forever homes.

Canine Assistants currently keeps paper records of each dog, but there are a few problems with this system

Canine Assistants doesn’t have a centralized location to store information on all their dogs. In addition to regular information like DOB, medications, and health issues, every time a dog stays at a volunteer’s home or interacts with staff, valuable information on the dog’s behavior is observed but never collected. Dogs may interact with many different people within Canine Assistants, and there is no efficient way to communicate about the dog with each other. Additionally, there is no current access control across the 3 different roles within Canine Assistants: administrators, recipients, and volunteers. 

The Solution: A Digital Database to keep records of each dog

Bits of Good is developing a web-based dog database that stores basic information and dated logs for each dog. This database would serve as a centralized location for Canine Assistants to access any necessary past information on a dog.

Because there is some information that is sensitive for non-staff, the application will implement access levels to ensure separation between staff and volunteers. Staff should be able to decide whether a log can be viewed by volunteers or not. Volunteers can decide if a log should be viewable by only staff or staff and other volunteers.

Meeting with the client

This was the first project that I worked on where a client was involved. I met with the other designer to compile a list of initial questions to ask the client as a starting point for our research. We then met with the non-profit, asked them the questions, and took notes of the responses that we got. This helped us when going into the empathy interviews, which we decided we wanted to do next.

Hearing about it from Canine Assistants themselves

I heard about the problem and some of the requirements from our Product Manager and from the client, but I wanted to dive deeper into the solution and really empathize with the user, so my first step was to conduct some empathy interviews with Canine Assistants employees and volunteers. 


I first determined who the users of this database would be and I identified 2 groups:

After determining the broad audience groups, I came up with individual moderator guides for them based on what I wanted to understand more about their role within Canine Assistants.

Creating research objectives and turning them into moderator guides

When creating the moderator guide, I first outlined a set of objectives (broad questions) that I wanted to investigate within these interviews. I then created more specific questions to ask the user in the interview that I could piece together to answer my broad questions. I created two different objectives based on the 2 different user groups.

Conducting interviews + affinity mapping

We unfortunately had a very small sample size and only conducted 3 interviews. It was a challenge getting Canine Assistants staff and volunteers to understand the importance these interviews have on the outcome of the designs. Nonetheless, we carried on with conducting these 3 interviews and then affinity mapping their responses to understand common pain points and daily tasks that could be digitized.

We interviewed two staff members and 1 volunteer and took notes/affinity mapped on a Figjam board. 

A close up of some of the findings in our affinity map

Huge findings from research: Demographic Information

After conducting our interviews, we discovered that a majority of the Canine Assistant staff and volunteers are older people. Most of the volunteers have time to do so because they are retired and now dedicate their time to helping train dogs. This means that our designs need to be easy to use and simple since they are less technologically advanced than the average group of people.

Creating User Stories

Since the system we were building had a lot of requirements for many different users, we created user stories to aid in empathizing with our audience groups.

Based on the affinity map and user stories, we derived a few key features to be included in the platform

Feature 1: A main dashboard page to quickly glance at all dogs

Feature 2: Individual dog pages that allow logs and forms to be viewed and added. Logs need to be mobile-optimized because those get added on the go more often than on the desktop

Feature 3: A user management page that allows for access to be granted/denied to individual users within the system

These features need to be developed with our user group of older people in mind

Once we knew what features to add, we created user flows and information architectures to define the structure of the site

We created user flows for the first few features we wanted to implement and information architecture diagrams to understand how the content on the site would relate to each other.

Now that we had an idea of the features that needed to be included, it was time to design them

The other designer that I worked with created the design system while I started designing the login/sign-up page so that we could stay ahead of the developers.


We already had colors, fonts, and logos provided to us by the client. We took those and applied them to the digital components like buttons, input fields, and dropdown menus.

Time to design! We iterated features on a sprint-by-sprint basis

For this project, I developed designs for a few features each sprint:

Sprint 1:

Sprint 2:

Sprint 3:

Sprint 4:

Sprint 5:

Sprint 1: Sign Up/Log In Pages + Loading Animation

For this sprint I designed the login/signup pages. I first started with a set of mid-fi wireframes. Signup pages are simple enough that I felt like I could skip lo-fi sketches. From there I received feedback from the engineering manager that we were only going to have log in with Google and no other method of signing in. Based on that information I made changes and developed Hi-Fi wireframes

I originally made the design on the left, but I wanted to add more visual flair to the screen since this was the landing page. I ended up adding the waves and I liked that design much better and I kept that in the final design.

After making these designs, the engineering manager came back to me and said they would allow people to create an account within the system, so I had to change the designs to reflect that. This is how the final screen turned out:

Keeping visual consistency, I carried the waves into the loading animation:

Sprint 2: Adding Logs + Log Display

For sprint 2 I needed to design logs. Logs are free-text descriptions that volunteers and staff can add after a single interaction with a dog. These logs can have tags attached to them to make filtering/searching easier. The adding of logs needs to be mobile-optimized because that happens on the go the most. Log displays can be optimized for the desktop. 

The biggest change that occurred with these designs was the tags. There were initially two tags per log, but that was confusing categorically, so we went back and separated it into three tags which made the categories easier to understand. 

I first created quick sketches to get a basic idea of the layout, and once the EM and PM approved those designs, I turned them into Hi-Fi wireframes.

Before: Topic and Concern level were combined into one tag, but it was confusing when it came to the adding a log flow to understand the dropdown menu

After: Topic and Concern level are two separate tags making the dropdown menu simpler to understand

Add a Log Mobile Designs

To make the mobile experience optimized, I utilized a bottom sheet found in many apps. Although this is a website and not an app, I felt that popups were too inaccessible and the bottom sheet allowed you to take up more space on the screen and allow more content onto the page.

Sprint 3: User Account Settings

User Account settings was an easy and simple page to design. The engineering manager told me that this page should allow users to change their display name, deactivate their account, and view their role. These are the designs I created based on that information.

Sprint 4: Adding Forms

Canine Assistants has forms which are sets of questions that need to be filled out every week and month per dog. We were given the list of questions that needed to be filled out and needed to design the page that would appear. These questions are incredibly long, and keeping the audience in mind, I decided not to overcomplicate the design visually.

Sprint 5: Fixing mistakes in past designs

Sprint 5 was the last sprint for this project this semester. I spent these last two weeks cleaning up the Figma file to be handed off to the designer who will work on this project next semester. I also fixed any discrepancies in past designs.

Next Steps

Next semester this project will continue to be worked on. We will focus on mobile optimization of all features as well as User Testing the current system to make adjustments as needed.

Growing as a designer

This was by far the hardest project I have worked on, and I grew a lot as a designer. Here are a few things I learned:

A big thank you to Bits of Good for allowing me to be a designer on their project and thank you to Canine Assistants for allowing us to do this for them. I learned so much and I loved working with my team!

If you haven't already, check out this case study next!