The change management of a refreshed design system: prioritizing colour accessibility and consistency by bringing design tokens, dark mode, and intentionality to the Jostle platform
I led the change management to bring the integration of dark mode, accessible colours, and design tokens into the Jostle Platform. This effort fulfilled a major user request and ensured accessible design elements, and a more semantic way of referring to colours for consistency.
role + timeline:
Directed the strategy and proposal for using semantic design tokens over global colours, and lead workshops with the design team for accessible colour selection. I also co-created with my dev lead to gain support and provide education on the move to design tokens.
We delivered all of this in just over a year, starting with an internal alpha then a full customer release in Q2 2024.
success metrics:
Top request delievered
dark mode delivery was a top priority for customers
A co-created language
creating shared understanding of token values between dev and design
Addressing issues:
Up to 2022, Jostle was facing mounting challenges with the design system: inconsistent colours being applied to elements, inaccessible designs, and fragmented workflows that forced designers and developers to memorize which values applied to which use cases. This slowed delivery during the QA phase. Inaccessible colours meant that sales teams were impacted from selling to certain customers, and inconsistent colours made our platform look unprofessional.
And dark mode was one of our number one requests – meaning that additional colours to memorize would slow down delivery for designers, developers, and QA alike.
Colour woes:
Jostle previously had an existing colour system that was limited in colour choices, and did not meet accessibility. This was highlighted during an audit – revealing that:
- links and buttons failed to maintain the required 4.5:1 contrast ratio set by WCAG AA
- alternative text colours lacked sufficient contrast, often falling below the minimum 4.5:1 ratio
- some icons failed to meet the minimum 3:1 contrast ratio
Upgrading colours:
To address these issues, we led a series of workshops with the design team to re-evaluate our colour palette. The result was helping to solve and ensure that we meet WCAG AA 2.2 requirements for text, such as ensuring text-to-background has sufficient contrast.
Intentionality was built in acorss the board....ensuring that every colour had a purpose.
Moving away from global enums:
Our goal was to move away from a system focused on global colours. Enum values such as blue01, grey05, red02, etc. forces designers and developers to memorize what cases corresponded with each colour. This led to inconsistencies in colours placements...such as accent text being used with a disabled text colour.
Towards a token system:
To implement dark mode, we led the implementation of our design token strategy. Our naming system focused on delivering the minimum amount of tokens required. We avoided overloading tokens, but created the minimum amount in order to have flexibility.
With 8 months we led naming workshops involving co-creation between design, dev and QA teams – because this new language would be shared between these teams. It was important that we collaborated to come together to create understandable and consistent language that could be applied to future use cases.
🎉
Beyond Jostle...
We also talked about tokens and change management at various events!
We've appeared at the Stockholm Experience Conference to talk about accessibility and change management, the UXxUX Conference in Vancouver, along with presenting a workshop for Vancouver Design Community about design tokens!