Designing an app to facilitate Animal Rescue in Canada — UI Case Study

The Canadian Disaster Animal Response Team (CDART) is a volunteer-run organization that trains and prepares respondents in assisting domestic animals during emergency situations in Canada.
More information can be found at www.cdart.org

Team

Julie Woolf, UX Designer
Sherry Xie, UX Designer, Scrum Master
Marie-Philipe Boucher, UI Designer, Project Manager

Brief

My team and I were approached by CDART to create a mobile app that would provide a solid learning and resource framework for volunteers and first responders.

However, before attacking the task at hand, we had to understand the underlying problems that led to the desire to have this app.
We wanted to understand the needs of animal rescue responders, and how an app could benefit them.
We also wanted to better understand why animal rescue had such low awareness compared to human rescue and how the app could help this low awareness level.

From the above, we decided upon the following goals for the CDART app:

  • Increase support for volunteers
  • Increase CDART’s profile and awareness to animal rescue in Canada

Persona

Before tackling on any visual designs, we needed to understand who this app was going to be for.

Research

As the CDART mobile app was going to be an extension of the current CDART brand identity, research was conducted with CDART and its current brand identity to see how it could be adapted to appeal to a wider audience and communicate the appropriate messages to the end users.
From a previous article, you can see that the current visual brand identity of CDART was not communicating its real essence.
I therefore wanted to provide the client with some suggestions for a clearer visual brand identity that could easily be adapted to, not only, their app, but also their website and all pieces of communication.

Through our interview with the client, some key words stuck out and I wanted to be sure to include these in their visual brand identity.

Characteristics of CDART

Through my design inception process, I asked myself,

“ Why would volunteers want to use this app?”

“Why would pet owners want to be part of the CDART community?”

The answer to both of these related to the animal and human bond. It is stronger than most may think.

From the main emotional reasons behind this app, it then led to the creation of two distinct art directions that would showcase how this emotional connection would translate into colour, shapes, movements and space.

The first art direction, “A Shared Life” was majorly focused on the animal and human bond and reuniting families together.
The second art direction, “Reliable & Informative” was aimed at creating credibility for animal rescue and validating the need for it in our society.
It was important to me that both art directions had to have a shade of red at the center of it all, as it is a colour associated with rescue and emergencies. The client also did not want to remove this colour from their brand identity.

Both these art directions had similar elements such as saturated but not too alarming colours, structured movement, defined shapes and room for breathability.

You can find the two art directions below:

Through discussion with the client, “A Shared Life” was selected. However the client also wanted to add some elements of green for validation purposes.

Planning

Based on the selected art direction, and research information generated by my UX team members, I was able to gain a better sense of what kind of information was going to be displayed on this app and how we could make the art direction come to life.

I therefore proceeded with a Style Tile for the CDART App that incorporated UI elements for this app and well as typographic examples.
This phase was also where I started playing around with a new logo & coming up with a name for the app.

As can be seen, the green elements for validation were added, as requested by the client.

Through the bonding mood we were aiming for, I chose a rounded and welcoming header font, that could also be used with the app logo.
I ended up with Muli as a logo and header font & San Francisco Text for the body and navigation text.
San Francisco was selected for its familiarity and legibility across all types of screens and devices. As our main audience will come from a vary wide spectrum, this design decision was made with our worst user in mind.

Design Deliverables

Logo

One important thing to keep in mind was that CDART has an existing logo that they are satisfied with and as the CDART app was going to be an extension of this brand, I wanted to make sure the main elements were kept to have a connection between both.

I sketched various ideas before realising that I shouldn’t be reinventing who they are.

Logo sketches

The animal paw and the Canadian maple leaf were my two main elements that I wanted to showcase to stay true to CDART’s original logo.
I therefore changed proportions of this elements, moved the text lower (and straighter) and added two signal rings to showcase the accessibility for all.

I also played with gradients to add a more modern look and feel. This gradient can also be seen throughout the app screens.

Previous CDART logo in comparison to redesigned logo for CDART Assist

Another important point in this logo design was that I didn’t redesign it just because the previous was outdated. I redesigned it for usability purposes. The previous logo was was user friendly in smaller screens and as our task was to design an app, we need a logo that was adequate for such at the forefront of this project.

At this stage, we also gave the CDART app its final name — CDART Assist. It is short and to the point. This app helps CDART assist with your pets in times of emergencies.

App Icon

CDART Assist App Icon for App Store

As mentioned above, the major reason for the redesign of the logo as to make it user friendly. The first place were the user is going to see this logo as on their App store, and it won’t be very big.
I therefore adapted the CDART Assist logo on the red gradient background, removed the copy in order to make it fit in the required 120 x 120 size for the App Store.

Animal Intake Form

Based on our research, a major concern for all volunteers was a form that is to be filled out when an animal is received in CDART’s hands. All volunteers communicated that they often forgot how to fill it out and it became stressful to fill out during times of emergencies.

CDART’s Previous Animal Intake Form

Although this form wasn’t going to be fillable directly on the app, I still took on the task to redesign it to fit with the new visual identity created and also design it for easier usability.

Redesigned Animal Intake Form

From the new version of the form, I added a lot more breathability through lighter colours and grouped the information differently to allow to user to feel less confused when filling it out.

UI Style Guide

The most important part of this project was to develop a thorough Style Guide for the app screens but also for the client to use on internal communications, marketing material and so on.

This style guide included Colour palettes, Typography, Logos, UI elements and Iconography.

CDART Assist’s Style Guide

Screens

Paper prototype to HiFi Screen iterations
On boarding screen for CDART Assist
A few of the final screens of CDART Assist

Prototype

You can see the final InVision prototype right here.

Key Takeaways

In retrospect, even though this was an existing brand, they did not have much of a brand identity and I had to help them understand that that was the case and how a defined brand identity could have a huge impact on retention and attraction of new users.

I learnt a lot by working with a client who did not see anything wrong with their current brand identity. It was a great way to learn how to balance the clients’ happiness versus your personal design rationale.

If more time allowed, I would have liked to develop a better set of iconography and embed it better with the brand.

The whole process from the mood board to the final style guide definitely showed me how easy it is to deviate off track. Staying focused in the same direction is hard as new ideas always emerge through the process and you have to know when to ignore them. I thank my team for always pushing me back to our main goals & objectives.

Marie-Philipe Boucher

Written by

UX/UI Designer with a flare for international interactions | Adventurer ✈ ⛰ Currently designing for National Bank of Canada | 📍 Montreal

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade