The Research

Before starting designing, I studied design systems of companies like Adobe, IBM and Salesforce. This gave me an insight as to how I should approach the entire process of creating a design system. From working on the foundational aspects to creating patterns of UI, these systems covered it all.

While these design systems have used design tokens, I stuck to using Figma Styles to meet the tight deadline of just one month. Additionally,

Laying the Foundation

One of my first tasks was to define the typography and color palette for the platform. I presented several options to my colleagues, focusing on capturing the essence of a modern SaaS brand while ensuring it aligned with the end user’s needs. It was essential for the platform to instill a sense of confidence and clarity, as the actions performed by users could have significant consequences if executed incorrectly. For instance, if a user unknowingly attempts a release on a disabled resource, it could result in website downtime, costing the company hundreds of dollars and affecting countless users globally.

The next step was working on a modular set of components, guided by the Atomic Design methodology. In this approach, the smallest set of components or 'atoms' are built first, followed by a combination of these atoms to form 'molecules' and so on.

By integrating all the components into a single entity, we created a ‘super component’ that was fully modular, allowing every part to be seamlessly replaced with another instance.

Accessibility seamlessly integrated into the process

Building a Design System from scratch provided the opportunity to integrate accessibility into the process from the outset, ensuring it was a core consideration rather than an afterthought. Some of the key principles taken into account were:

• checking colour contrast on different background and across different interaction states

• including text labels and tooltips for additional information and context.

• Users felts more confident with the newly designed product.

• Providing a link to product documentation and Facets team support wherever possible.

There is definitely room for improvements, as trade offs have to be made and time to ensure all standards are met is limited, but it sets us up on the right path and ensures that adherence to accessibility standards is a shared mission.

Collaboration with Developers

Collaborating with developers to translate the designs into coded components was an ongoing effort throughout the two month project. The process was highly iterative, as discrepancies often arose between the visual design and its code implementation.

We managed this through sprints, where design and development tasks were closely tracked and iterated upon. The sprint structure, overseen by a Project Manager, allowed us to continuously refine components, ensuring that both the design and code aligned with the desired outcomes.