M3 Migration

Migrating from M2 to M3 significantly enhanced the efficiency and consistency of the app. All elements in the design system became reusable, reducing ambiguity in cross-functional teams and accelerating development by enabling developers to reuse colours, textsyles, components and patterns.

Background

The current design system used Material 2 components so needed to be translated into the Material 3 text styles, colours guidelines and components and also understand the foundational changes itself. It was important to understand new patterns used expected for certain interacitons users used in other apps. like how to share, download, navigate

M3 standard Documentation https://m3.material.io/foundations
Material 3 Design kit: https://www.figma.com/community/file/1035203688168086460

The Challenges

Colour challenges
- Using the M3 theme builder while preserving our brand identity presented challenges. The tool adjusted colour hues for accessibility, requiring a balance between accessibility and maintaining our distinctive brand and core colours
Component challenges
- Integrating our current text styles into the new M3 text style kit involved auditing the entire app for each text style, assessing potential issues with adjusting size and thickness
Component challenges
- Striking a balance between native and bespoke requirements: Our strategy leaned towards a more native approach however there were times when a component did not exist to meet our specific needs, in these cases we needed to audit the use cases and find the most User friendly and scalable solution.