Creating Omnipresent's design system from scratch

Design systems are hard to create even if it was part of the initial plan. Read how I helped create a comprehensive design system for Omnipresent's product suite from scratch.

As the product designer at Omnipresent, I was actively involved and led parts of the process of creating a design system for the Omniplatform, which initially lacked input from designers and suffered from inconsistencies and usability issues. Through a platform audit, we identified and categorised the problems, paving the way for a comprehensive action plan. Collaborating with the design, marketing, and engineering teams, we developed foundational elements like colour palettes and typography, while I created a scalable token system for future adaptability.

Involving all product designers, we gradually integrated additional components into the design system, ensuring a collective effort. I took the lead in documenting the system's usage in Notion, facilitating its adoption throughout the organisation. Through a soft rollout, we updated typography, colours, and key components, striking a balance between consistency and the development of new features.

While the design system is still a work in progress, our efforts have significantly improved the visual quality, usability, and accessibility of the Omniplatform. Developer productivity has increased, and the user experience has become more intuitive. Our achievements stand as a testament to the solid foundation we've laid for future growth and continuous improvement.

A design system is a collection of reusable components, principles, and patterns guided by clear standards that can be assembled together to build any number of applications. Design systems are very hard to create, even if they are developed simultaneously with the product. It becomes even more challenging when it is done after the fact for a product that was created by engineers without the input of a designer.

The state of the product was the first thing I noticed when I joined Omnipresent in August 2021 as the first product designer. There were a lot of inconsistencies, usability issues, and accessibility issues that would take a very long time to fix and maintain. While we were actively shipping fixes for the current design of the product constantly, I started to hatch out a plan with a senior engineer to figure out how we could create a scalable design system for the Omniplatform, which is the digital product created and maintained by Omnipresent.

‍Below is how we achieved the difficult task and set a solid foundation, starting with a team of 1 (me) until we had a dedicated team.

The Omniplatform was initially developed solely by a talented founding software engineer as an MVP, with no input from designers. While the platform was functional enough to keep things moving, two years later, after numerous contributions from various engineers and feature additions by founding product managers, still without the input of a designer, the seemingly insignificant issues multiplied and began to significantly impact the usability of the product on a large scale.

The platform had become visually fragmented to the point where implementing a fix didn't automatically propagate throughout the entire product. Each page had to be individually updated to implement the fix. Just imagine the challenge of changing the colour of something on every single page.

As the company grew and more people started shipping features and making creative decisions without adhering to set standards, the platform became increasingly broken.

In our backlog, we already have a lot of user feedback regarding the usability of the platform, mostly due to the lack of scalability.

To get started on this huge project, we created a plan on how we would tackle it and generate the necessary awareness within the company about what to expect. Therefore, another designer and I devised a three-step approach to revamp the design of the Omniplatform.

Step 1: Platform audit

Step 2: Design direction exploration

Step 3: Create foundational elements e.g. colours, typography etc.

Step 4: Create key components and token system

Step 5: Start rolling out and continue expanding the design system. We had two goals for this project: ‍ 1. To improve the visual quality of the OmniPlatform with minimal engineering effort, while also laying the foundations for the future. ‍ 2. To enhance the user experience of all UX flows for Omniplatform users. Since we didn't have a dedicated design system team at the time, I was actively involved and even led many of these initiatives.

To kickstart this project, we needed to understand everything that was wrong with the current platform. I facilitated an audit process that involved all designers in each squad performing an audit of all the pages related to their squad's product. They were tasked with identifying and highlighting usability, accessibility, visual, and consistency issues. Once all the audits were submitted, I began categorising these issues and preparing them for presentation to the product organisation.

As part of this process, it was important to inform the product organisation and key stakeholders about the upcoming changes so that they could incorporate them into their work. I collaborated with one of my colleagues to prepare a presentation for the product guild meeting, where we shared our findings from the audit and outlined our plans to revamp the Omniplatform by establishing a scalable design system.

After successfully completing the platform audit, we began exploring and ideating different design directions. This was a collaborative effort involving the entire design team, with each member contributing their own vision of what the future Omniplatform could look like. The purpose of this crowd-sourced design approach was to gather as many ideas as possible and select the best elements from each to combine into the final version.

We eventually settled on the design below which was going to be our north star.

As soon as we decided on a design direction, we immediately began collaborating with marketing and engineering teams to create the foundational elements.

My colleague and I were assigned the task of exploring various color palette options, typography, and icon libraries. It took us some time to make these decisions. Below, you can find some of the explorations we conducted as well as the final version we settled on.

Once we were confident about most aspects of the foundation, I proceeded to design a scalable token system for the design system. Creating a standard for a token system can be challenging, so extensive desk research was conducted to develop something that would be scalable and adaptable to our future needs.

You can learn more about my work on the token naming convention and token management system here.

Gradually, we began incorporating additional components into the design system, and we were fortunate enough to have a dedicated team, which expedited the process of adding new components. The responsibility of designing components was shared among all product designers. In my role, I was tasked with designing button states and variants, input file states and variants, tags, checkboxes, alerts, toasts, and other components.

While the design system is still in its early stages, I took the lead in initiating the creation of temporary documentation on how to use the design system in Notion. This proved to be highly beneficial and straightforward to set up.

After approximately a year of continuous work on the design system, we initiated a soft rollout by first updating all typography and colours. We then gradually replaced the key components, ensuring that subsequent designs incorporated the new design system components.

Getting to where we are now, especially for designers, was not an easy journey. One of the major challenges we encountered was figuring out how to roll out the design system in a way that maintained a consistent experience throughout the Omniplatform. We wanted to avoid having some areas of the platform look polished while others appeared unpolished. Unfortunately, we didn't have a one-size-fits-all solution for this. It was a decision we had to make on a daily basis, especially as new features were being developed in parallel with the design system. It required an artful balance of knowing when to compromise on consistency.

While the design system is still in its infancy and there is much work to be done, I am immensely proud of the progress we have made. Most importantly, we have established a solid foundation that can be easily built upon. Throughout this process, we made multiple changes to the colour scheme, which were as simple as adjusting a value in Figma and pushing it to Github.

Every day, we receive feedback about how the design system has improved developer productivity and how the platform has become more accessible and user-friendly. This serves as a testament to the extent of our accomplishments.