Halstack is the DXC Assure platform bet for their suite of SaaS insurance products. After a failed attempt of a previous UI framework, they embarked in the journey of creating a design system that would bring consistency to the application suite.

I joined DXC at the beginning of 2021 to help the Assure platform team to continue building Halstack after it was launched in 2019. Alongside the architecture team and the product managment we identify some of the problems Halstack was facing in the early stages.

Problem statement

One of the first assigned tasks was to rethink the structure of the component guidelines, so we worked in a Markdown template to re-use across all the component pages in order to unify the content. The task gave me a broader perspective about how the whole system was designed.

The first month, we started to realize that the components had problems affecting to their core definition:

• Undefined element states (lack of :focus or :active states)

• Unclear inner and outter spacing methods

• Limited color palette

• Lack of component usage guidelines

• Differences between design definition and implementation

• Innaccessible components

• UI Kit delivered in fixed versions (Designers need to re-do work after every change)

The system adoption was also low, and most of the teams complaints were about the lack of components or functionalities available in the system to solve their problems, being easy for them to use a third party framework that provide the flexibiliy they were looking for.

Design tokens to the rescue

A distributed library of design tokens helped developers to better manage style changes.

We defined a whole new approach to how the design tokens were defined an consumed by the different components of the system. Starting with the core principles:

• The color palette grew to acommodate the different element states

• All typography styles where defined, and we replace all fixed units by relative ones

• We created a spacing scale based on a 8px grid

• We also defined border, box-shadow and z-index tokens

The way the tokens were implemented was also a field to improve, every time a developer need to make a change (because every component is also themable), multiple files were need to be changed. In order to reduce the workload, we proposed to create an independent library from where the tokens can be consumed as a dependence of the project.

All the tokens were documented in the design guidelines as design principles, each component page also included in the design specifications section a table with all the tokens used and the core reference.

The UI Kit

We created an Adobe XD open source library where designers could update automatically our components.

The value the UI Kit was providing to the designers of the Assure products was very low at that moment, they used to to copy and paste from a versioned UI Kit file, making updates a handcrafted work of replacing the current component instance by a new one. The components were mostly static (no states) and no variants present.

We started working in the following UI Kit functionalities:

• Publish as an open source library (A single file need to be mantained and updates will reach all users)

• Introduce the core design tokens and reuse them across the whole kit

• Create component and element states and variants

• Use component nesting to improve kit management

• Create additional libraries and linked files to manage and export component images for the guidelines

The changes listed helped the different design teams to deliver faster reducing the time wasted in updating components and making changes.

Accessibility

My advocacy for accessibility has changed the team mindset about how to approach the component design and development. We started doing:

• Addition of aria classNamees and role types to our components

• Accessibility section in the guidelines component pages

• Assistive technology testing

Conclusions

Altough this project is a work in progress, there are many things I personally accomplish this year:

• Help the developement team to have a deeper understanding of the component design implications

• Provide tools for designers that helped to deliver faster

• Elevate the design value within the organization

• Advocate for accesibility and usability in our product suite

• Help product design teams to achieve their needs using the design system

• Help to define the strategy of the core design system team

• Improve the design system documentation and deliverables