Animalia — Design System



Project Concept

Helping a user navigate an experience is the fundamental goal of design systems. The ability to apply design work across a spectrum of media and context, to create a cohesive, intuitive user experience, is an essential skill.

This project focusses on a fictional, Canadian, veterinary telehealth service, for which branding was created, and then applied in the development of a mobile application.


One of the consequences of a global pandemic is limited access to in-person services. Of these services, some (including veterinary services), are not considered essential.

The gap in access to services provides an opportunity to create a product users need. As a result, the fictional telehealth Veterinary Service named Animalia was born.


Once the concept for the design system had been established, the next step was to create a look and feel for Animalia as a company. This included imagining the iconography and typework that would be appropriate for a remote veterinary service.

Ultimately, a full branding guide was developed for Animalia, to guide all design work for the design system going forwards.

See the Animalia branding guide here.

The title page of the pdf document listing the branding standards for the fictional veterinary telehealth service, Animalia.


The next step of the project was to decide on the range of products and services that Animalia would provide users, within the context of a mobile application.

Once the shortlist of features was finalized, the pages of the application needed to be organized, such that a user could find what they needed, without any onboarding information. Animalia's application architecture is as follows:

Visual flow diagram of the application architecture of Animalia. It features the main site pages, organized into primary and secondary navigations.

Final Product

The final version of the Animalia prototype is clean, straightforward, and appropriately clinical. The app architeture is well-understood by users, and the incorporation of minimal animations makes for an enjoyable user experience.

Although Animalia isn't a real company, it represents a real opportunity for rendering remote services, as well as the possibility to expand into sales of other related products.

Experience the Animalia mobile prototype here!

A photo of a Caucasian hand, holding an iPhone, which depicts the homescreen of the Animalia application.
A mockup of 3 iPhones depicting the Home, My Account, and COVID-19 FAQ pages of the Animalia application.

Animalia — Design System