Interactive Investor
Portfolio Design System
The creation of a whole new Design System built from scratch with Figma and Code parity at its heart, and the building of a dedicated Design System Squad to bring it to life.
The role
My role as Design System Lead at Interactive Investor spanned the management and evolution of the Design System from V1 to V2, implementation of new ways of working, and the building of a dedicated Design System team to handle the creation and maintenance of Design System assets.
When I started, the Figma Design System was in poor shape, with components built years ago not benefitting from recent Figma features to streamline them. This resulted in many more variants than necessary and pain maintaining the library.
Component pages had poor or no documentation, and were used as work-in-progress files by the whole team, with anyone being able to contribute or edit assets. There was also no dedicated team responsible for maintaining Storybook to keep it in line with Figma.
This led to a growing level of disparity between Design and Development, as Figma asset updates were rarely reflected in their coded counterparts, resulting in friction between Design and Development on the single source of truth.
It was also clear that designers were struggling to navigate the Design System, and this resulted in low adoption, excessive questions, and uncertainty over the contents of the system.
When designers eventually did find what they wanted, the component either had no documentation, little documentation, or generic documentation copied from the web.
01 / GOAL
Simplify the structure of the Design System to make it easier to navigate.
02 / GOAL
Enable designers to self-serve through detailed component guidance documentation.
Simplifying the structure of the Design System, archiving unused files, and collating components into a single file not only helped make it easier to maintain the Design System, but more importantly helped its users navigate it with ease.
/ 01
Increase the touchpoints with the users of the Design System
It was clear that due to no dedicated management of the Design System, there was no-one in charge of assessing what improvements could be made to the system.
To change this, I set multiple touchpoints for the team to provide feedback. These ranged from weekly Design System Office Hours sessions, to regular workshops to help designers use assets correctly, and quarterly retros for more detailed analysis on ways to make the Design System work for the people using it.
/ 02
Rebuild the whole Design System from scratch
The main part of my role was building the new Design System from scratch. A clean start, not hindered by the fact that the team were using V1 was the best approach, allowing me to build it in a secure, protected environment, conduct tests to improve component builds, and provide assets to the Design System Engineers to build before releasing them for consumption.
Simplify component builds
Utilising the latest Figma features and efficient usage of booleans and properties, I drastically reduced the amount of component variants while maintaining all possible variations.
Quantifying efficiency gains
To prove the value of the rebuilt components, I ran multiple tests with the designers to quantify the productivity gains from using more streamlined Design System assets.
/ 03
Increase designers’ Figma proficiency and overall productivity
As part of my role, and due to my strong background in UI Design, I was tasked with upskilling the team to ensure they used Figma to its full capacity, as well as keeping the team informed about the latest updates and features.
/ 04
Establish a dedicated Design System squad to rebuild the Design System from scratch
A dedicated Design System team would enable the teams consuming the Design System to focus on implementation rather than struggling to add and maintain Storybook themselves.
Provide a business case for team
To get buy in from the executives and stakeholders for the creation of a dedicated Design System team, I ran multiple tests to compile data on efficiency and cost effectiveness, and numerous presentations on the results.
Detailed ticket creation
To ensure there was a comprehensive backlog of work for both Design and Engineering, I worked closely with the team’s Scrum Master to create detailed tickets which showcased the depth of work required.
/ 05
Establish a component request workflow
To ensure that we didn’t go back to the previous way of working where anyone could add components to the Design System, I implemented a request workflow.
This helped establish the expectation that any new addition needed true rationale, and had to solve a purpose not already solved by existing Design System assets.
Multi-stage workflow
The workflow was tweaked multiple times to ensure that it added just the right amount of friction. This helped to reinforce the expectation of using existing assets first.
Ticket backlog
All requests were assessed and I ran meetings with the requestor and their team to understand the need for the new asset and advise on the next steps in the process.
/ 06
The outcomes
The results of a closer relationship with the Design System users, simplification of the structure and composition of the Design System and its assets, and the building of a dedicated Design System team to take the management of the Design System away from the collective.
01 / OUTCOME
Clarity on the Figma Design System being the single source of truth.
02 / OUTCOME
Increased satisfaction expressed by the users of the Design System.
03 / OUTCOME
Components which were much less convoluted and easier to maintain.
04 / OUTCOME
A dedicated Design System team handling the creation and the maintenance of Design System assets.
05 / OUTCOME
Less friction between design and development as all assets in Figma had an aligned asset in Storybook.
06 / OUTCOME
Increased consistency in designer output and higher levels of parity between design and development.
01 / RESULT
A Design System which made it easier not harder for Designers and Engineers to do their job.