nrma-banner-bg.jpg

nrma insurance design system

ROLE IN THIS PROJECT

I was the UI/UX Designer in this project. In this project I worked on a much-needed design system for the existing iOS and Android native applications. There was an existing design library, however, this library was not maintained. There was no central source of truth or conceptual documentation for brand styles, buttons, form elements or components and patterns. As the project was new, there was a substantial amount of iteration and re-evaluation of UI elements. 

DEFINING THE PROBLEM

The NRMA website has a comprehensive design system available to internal and external partners. This design system is called CHROMA. However, the NRMA native applications had no central source of truth. As a result, teams within the mobile space were not functioning efficiently.

GOALS

I set out to build and sustain a lean design system called CHROMA MOBILE. This design system needed to create a visual language and foundational component library to support the native mobile applications and tools complete with documentation available to internal and external partners.

PROCESS

DESIGN AUDIT
DESIGN AUDIT

We had to get serious with our UI elements. We conducted an audit of all the UI work so far. We collected every UI variation and type style across the whole project. We ran sessions between the entire UX and UI team to agree on which styles would be the best global style. The process involved many meetings and discussions with the developers which was a crucial part of the project. We wanted to make sure that the we were all consistent with naming convention and the usage of all styles and components.

PRIORITISE SYSTEM COMPONENTS

After the audit and hours of discussions with the developers and other stakeholders, it was time to clean up and consolidate symbols in sketch. Critical to the success of the system was alignment with all teams on the differences in the parts we would be designing and building. Components are distinctive UI elements that are built to be used over and over throughout a product. They are most often actionable elements like buttons, input fields, selections, or tool tips.

Patterns on the other hand refer to recurring elements or practices throughout a product, such as navigation, tables, notification, alerts, or modals. They are versatile and often contain multiple components.

FINDING THE RIGHT TOOL FOR OUR LEAN DESIGN SYSTEM

We wanted to aim for what CHROMA WEB currently has, a comprehensive design system available to everyone to access. However,  for CHROMA MOBILE V1.0 we decided to make it lean but ensuring that it can be accessed both internally and externally. I looked at our current tools especially the ones we used for the dev handover stage. My aim was to see if I could use any of our current tools to serve as a place for our breathing and living design system. After a few days of research I found that ABSTRACT was the tool we could use for CHROMA MOBILE V1.0

DESIGN, DOCUMENT, ABSTRACT

The process to make and maintain CHROMA MOBILE V1.0 required cross-functional collaboration. Using an agile approach, we set up sprints to include design critiques and regular reviews to keep tasks a manageable size and identify and address problems quickly.

Design components and patterns using Sketch.
Include the basic guidelines and applications of each component in sketch to ensure proper usage and adoption.
Upload all final sketch files to abstract and use this as the central source of truth for internal and expernal partners to access the documentation and components.

KEY PARTS OF THE PROCESS

During this process we made sure that all components are:

  • High visual quality

  • Flexible components, can be used for both iOS and Android

  • Accessible and inclusive

  • Components have consistent style and on brand with the NRMA website

  • Adaptable, can be used for different brands

RESULTS

Within the organisation, utilisation of the system increased design and development collaboration. It also served to improve efficiency in developing new tools, leading to a more cohesive, higher-quality user experience.

CHROMA MOBILE V1.0 succeeded in simplifying the system. It created a foundation for building accessible and usable products.

LEARNINGS

Building a design system is a continuous process. It is important that everyone is motivated by the value it brings not only to our customers but most importantly to the products teams. Design and technical debt quickly snowballs to an unmanageable size. Leading to more costs, time consuming, and reduction in quality. The other challenge was keeping the whole team, especially the developers, informed and engaged throughout the whole process. It was a crucial part of the process to have the developers on board from the very beginning. The most successful part of the initiative was devising and bedding in component-centric thinking, which made for a quicker design process across all projects, and a more robust and consistent visual language.

© 2020 by Mabelle Montina