Opportunity for Optimisation
Back in 2020, SMLWRLD had the opportunity to look into areas of our style guides used in design and development processes, and determine how they could be better optimised not only to deliver consistent and cohesive experiences, but also to improve the time spent building the enterprise software platforms. During evaluation, we identified the following areas for improvement:
- Guidance on how user-interface (UI) components could be reused universally.
- Standardisation of colour usage, tailored to the branding guidelines of clients.
- Standardisation of typography usage, tailored to the branding guidelines of clients.
We looked into open-source design systems that were both publicly available and already adopted within an organisation, taking inspiration from guidelines provided, and applying it to our own style guides.
A Helping Hand
Through our research, we decided to use IBM’s Carbon Design System as a basis for updating our style guides, as this system had the necessary tools and guidelines for creating products and digital experiences that are similar to SMLWRLD.
The Carbon Design System guidelines provided insights into four key areas that we were looking to improve on:
User-Interface (UI) Components
We updated the UI components within our style guides to ensure they are visually and functionally consistent for all our platforms, both for the front-end and back-end web pages. This prevented the same components being created repeatedly, and provided better management if certain components needed adding or updating in the future.
Spacing Tokens
Creating a spacing scale was an area we had overlooked within our style guides, and we realised its importance when creating clear, consistent and visually pleasing page layouts. Using the spacing tokens provided by the Carbon Design System guidelines, we were able to design and develop layouts faster, that provided better visual clarity and balance.
Colour Tokens
Managing the usage of colours throughout our clients’ enterprise software platforms was a priority, to ensure consistency and balance.
Defining rules for colours based on a client’s brand guidelines gave us a clearer view on:
- Colours applied to web page elements (e.g. buttons, dropdowns, links)
- The colour contrast between interactive and non-interactive elements
- Accessibility of colours for users with visual impairments (e.g. colour blindness)
- What colours should be reserved for system-only purposes (e.g. buttons for saving and deleting)
Similarly to spacing, we created tokens for colours that allowed us to define primary colours, secondary colours, tints, shades and system-only colours. Any updates made to a single colour could now be done by simply updating the HEX/RGB value on its token, and seeing the effects universally throughout the platform.
Typography Tokens
With typeface styles varying from client to client based on their brand guidelines, we wanted to create a clear guide on how font size and weight would be used throughout a client’s enterprise software platform. By assigning tokens to font sizes and weights, we could control the hierarchy of content displayed (e.g. headings), and elements that provided emphasis for content (e.g. headings, anchor links, alerts) in a simple and effective way.
A Look to The Future
Updating our style guides to a more robust design system is an ongoing project, and will require continued iterations and learnings from our design, development and production processes. The changes we have made so far have provided great improvements not only to existing products, but also to future products in the pipeline.
