When I joined, as the first in-house designer the platform had already been active for a few years, but with a mix of contributors to the design. In its infancy as a scrappy startup, the engineers had first dabbled into putting something together and at a later stage an agency had been brought in for a redesign. This provided some challenges given the non collaborative nature of the handover and the lack of design support to the engineering team resulting in only a partial implementation with a lot of gaps and assumptions.
My first actions were auditing the platform to see what type of UX improvements could be done and measure them against user experience impact and implementation time. I also ran a workshop with the engineering team to get a sense of the biggest issues with the platform from their point of view and understand how it affected their work.
Something that emerged naturally from these actions was the sense of lack of consistency across the platform not only for the user but also coding wise. Engineers didn't have a stable library of resusable components and that often resulted in a non efficient use of their time and in a poor user experience.
The team agreed that having a design system that they could resort to, would make their life easier and clear their time to work on more complex issues.
Having already done the platform audit I set about defining the building blocks of the system resorting to Atomic Design principles. With that in mind, I split the Figma file into artboards reflecting the methodology concepts.
One of the biggest concerns in developing this kit was to make sure that it was AA compliant according to the Web Content Accessibility Guidelines (WCAG). That meant among other things testing all the color combinations and clearly defining what colors could be used in conjuction and in what situations.
Dark mode
Part of the platform offers the possibility of changing the UI to dark mode so this also needed to be factored into the design system. Not only were all components duplicated into a dark mode version but I also developed a color theme guid to help engineers during implementation and color mapping.
Implementation
Impementing the design system is an ongoing effort from the engineering side given the amount of legacy code. The approach taken is that every time a new section of the platform needs changes,
a bit more time is baked into the timing estimates to readjust the components.
Storybook has been setup to document the components and I've also advocated for the use of the Figma Tokens plugin to allow for quick and easy changes to the core tokens should the need for it arise.
