Supporting the design team on evolving and maintaining iAuditor's Design System
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).
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.
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:
typography for Web, Android and iOS
light and dark themes colour palette.
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.
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.
I was responsible for defining the typography for iAuditor's Web, Android and iOS apps.
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.
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.
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.