The Need for a System

Complete Anatomy had been worked on by a number of designers without much structure aligning that work. This presented a number of problems for both the design and development teams, with each new project being designed and built from scratch. A robust, reusable design system needed to be retroactively shaped around Complete Anatomy. For future releases, this would increase the efficiency of both teams, while also presenting the user with a uniform, multi-platform experience. This makes the whole product easier to understand and use: everything that looks the same, works the same.

Complete Anatomy developed into a fragmented product, without an overarching design system.

The Problem

A fractured design system presents non-uniform experiences, and a lack of structure increases the timelines for both design and development teams.

Designers worked independently from each other, meaning different areas of Complete Anatomy had different styles. While a page header may be bold in one area, it was light in another; drop shadows were 30% in one place, but 50% in another; some buttons were 50pt high, others 44pt; different tones and shades of grey were used throughout, with no purpose behind visual elements.

Designers worked independently from each other, leading to different areas of Complete Anatomy having different styles.

The Solution

I retroactively fit a uniform colour palette, font table, and style guide around Complete Anatomy's existing design to inform the design and development process.

By creating uniform styles, we were able to assign meaning and uses to each. Specific styles were used in defined cases only, so that when designing new screens, we would have a set style applied.

Green #4EBC96 was used on interactive elements, or 12pt upper case was used for subtitles - we documented and applied style and font guides across the entire application.

With established styles, we could more rapidly produce quality designs, which could in turn be more easily built and managed by the development team.

Opportunity for Growth

In future, we could grow this design system and begin delivering some key user requests.

Allow users to choose in-app font sizes.

By applying CSS variables to our font styles and associating them with specific uses, we could allow users to dynamically change font sizes. We could create a flexible, dynamic font table that mapped to our styles, as shown in the Human Interface Guidelines.

This functionality is something that the Customer Service team consistently raise as an issue for users, and it often came up throughout our different user tests. Users needed the ability to increase the font size of the app to more easily read the structure information.

A layered colour palette allowed application wide dynamic updating of colours.

Complete Anatomy 2018 used a light grey colour palette. A dark background colour would provide greater contrast with the models, showing off the more intimate details and shapes of model structures. This feature made up almost 50% of customer requests to our Customer Service team, and was widely approved of when implemented.

Build a reusable, responsive component library to pull design and development assets from.

The next step in this process is to examine our styles and structures, and build them into common reusable components. This is beginning to take shape in things like our content cards, our tabs, and our buttons.

Ultimately this would be fleshed out, creating a full component library, like the Angular Material libary.

It is a resource not only for developers, but designers too - a one stop shop for everyone involved in building and creating the designers.