Magnetize was the first Design System as a Service project for IBM iX UKI. The engagement was to augment the creation of and drive the adoption of a new, industry specific design system.
This is a secure project, so some details will remain vague.
As the first DSaaS engagement in IBM UKI, the first 3 months of the engagement was designing and implementing a delivery model which would allow the iX design team to integrate with the existing client development team. As Design Lead I focused on 4 key areas:
How do you define and manage the functional and non-functional requirements of a single component, that exists in isolation?
It was clear from when I joined the project that the functions of a component were being defined by the developer creating, with little to no inclusion of the wider project team and no pre-planning. This meant that components tended to reflect the assumptions and past experiences of individual team members and that the system as a whole lacked consistency and direction. Along with implementation of a more standard agile workflow, we developed the new Definition of Design Ready. The Definition of Design ready is a stage-gate that exists before a story is picked up by the design team. It allows the product team along with the PO to define up-front the functionality they need from a certain component. For example, a date picker that needs to support both relative and absolute date selection. By using this, we were able to give the design team the information they needed to create components with confidence. Allowing them to focus on the design of each element instead of worrying about what is actually needed to do.
How do you test a component without a use case or application? What testing is the responsibility of the Design System vs the consuming projects?
There was no testing process in place when I joined the project and the client leaned heavily on IBM to help them define it. One of the major KPIs for the client was accessibility and ensuring that the system met WCAG 2.1 AA as a minimum.The first thing we had to define was what was our responsibility to test for as the Design Systems team, followed by how would we go about meeting those testing requirements. The solution was for the Design team to own the UI testing of all components (Contrast, Motion, Clickable area etc.) and for the development team to focus on automated testing using AXE.We also run weekly user testing sessions with an Accessibility sponsored user (Screen reader) to augment the automated testing done by each team.
The team grew from 4 part-time people to 16 full time people. I planned and then implemented a new scrum team structure as well as the wider meeting and delivery cadence for the 2 newly formed teams.
With the new Definition of Design Ready and Delivery Cadence in place, we defined how design work would be completed and tracked. This also informed the design team of their responsibility for how to detail all completed design work for the development team.
Once the initial setup phase was completed I moved into more of a delivery focussed role. This consisted of designing and then building the Design System in Figma as part of the core design system team.
To date, 23 of the identified ‘foundation components’ have been created in Figma along with guidance on how to use them for both designers and developers. I have also defined the styles for the system (Typography, Colour etc.)
I was embedded in a project team to aid them with the adoption of the new system, as we started to shift our focus onto driving understanding and adopting the new system. The success of the initial setup and the first stages of delivery resulted in a ~£500k extension in 2022, with a further ~1.5m expected as we move into 2023.
