Design System

Supporting the design team on evolving and maintaining iAuditor's Design System

iAuditor web app

In order to comply with my non-disclosure agreement, I have omitted and obfuscated confidential information. All information presented here is my own and does not necessarily reflect the views of SafetyCulture (SC).

Understanding the problem

iAuditor has been built up since 2012. The need of a Design System started to become evident when the team and the product started to expand and evolve, resulting in a disconnected user experience.

Currently, iAuditor has around 10 product designers working across multiple features, locations and platforms. Therefore, the need for a Design Systems went hand in hand with the need for scale, efficiency, and consistency in visual design and user experience.

Main contributions

When I joined the team in January 2018 they had already implemented a basic Design System. As a Design System's advocate I asked to be part of the team to further develop iAuditor's Design System components and guidelines.

I had the opportunity to lead the work on:

  • system icons

  • typography for Web, Android and iOS

  • light and dark themes colour palette.

System icons

System icons represent common tasks and types of content in a variety of use cases. Our system icons were based on Google Material Design (rounded icons) due to its quality and variety.

Icon grid and keylines
Icon grid and keylines

Additionaly to a written document I created a video training course to explain the system icons framework. It included topics as style, grid and layout, keyline shapes and anatomy.

Typography

I was responsible for defining the typography for iAuditor's Web, Android and iOS apps.

Typography: type scale
Typography: type scale

Both Web and Android apps used Roboto typeface. However, there were small differences in font sizes and style across headings, body texts, descriptions, captions and labels.

The iOS app used SF Pro because it offers the control and flexibility to optimally display text at a variety of sizes, in many different languages and across multiple iOS interfaces.

Light and dark themes colour palette

iAuditor mobile apps are used in a variety of environments and lighting conditions. We have customers, for example, working in mines and customers providing roofing services. In order to provide a great customer experience iAuditor mobile apps must have both light and dark themes. The ability to switch between light and dark themes help to improve visual ergonomics by reducing eye strain, adjusting brightness to current lighting conditions, and facilitating screen use in light and dark environments.

Light theme vs dark theme
Light theme vs dark theme

I contributed to iAuditor light theme and I led the dark theme initiative. On the dark theme, I used desaturated colours of the light theme meeting the minimum colour contrast ratios (Accessibility Standards Level AA). The dark themes were platform specific and followed Android and iOS guidelines as much as possible.