Netenrich is an enterprise SaaS company that provides multiple offerings in IT ops, cybersecurity, incident response and more. I was one of the founding members of the Netenrich Design System team where I built the new design system from scratch, covering everything from creating component libraries to engineering integration, documentation and support.
Lead designer - design system, interaction design, accessibility checks, documentation & implementation support
2 Design Managers, 4 UX Designers, 5 Product Managers, 3 Developers, VP, CTO
12 Months
As the design team and platform grew rapidly, we started seeing inconsistencies and facing multiple challenges:
1. The design team grew from 3 → 6 designers.
2. Our product suite had expanded from 1 → 5 products and they were all built in isolation from each other.
3. Lack of a component library meant each project involved designing the same components over and over again with the style changing each time to suit functionality.
4. Several inconsistencies between designs and developed features.
5. File management became unruly. All files were saved locally and filenames were non-descriptive or inconsistent across design tools.
It was crucial to have a single source of truth and high time to start building a design system.
Working with the head of design, product managers and front-end engineers, I established a set of short term and long term priorities. Rapid scalability and modularity were some of our guiding principles, working towards a tight deadline for the launch of the first phase. This meant favouring reusable components and a templated approach to layouts, where possible.
I conducted a website audit which uncovered numerous issues. There were dozens of tag styles, different button styles, multiple font weights and single-use icons being used across different products.
No one had gone through the entire platform before. As part of the site audit, I also made note of the reusable components we used across the platform and grouped them into categories. The biggest task was combing through the platform and existing design files to build an exhaustive list of all the current components and patterns used.
One key task I took on was defining the typography scale. There were over 20 different text sizes, styles and different base fonts being used across different products with no documentation or guidelines. I decided to create a new system for the font and decided to do a font test to figure out the new base font size. I updated the typography system by introducing a common base font size of 14px. Keeping in mind all the use cases found, I streamlined the font collection and introduced specific guidelines for each product along with examples.
The other component that took a long time to get right and faced the most challenges was the not-so-simple date picker. It was the first thing used by people across the platform, all with different usage contexts. We focused on consolidating the different kinds of date and range pickers in a way that we could use a single component to satisfy more use cases.
I designed more component sets including button, pagination, drop-down, modals and timelines. I also worked on the base structure such as the grid and template for the base page and created standardised empty screens.
Building the components was just one half of the solution. The second was to collaborate with developers and make the design system a shared priority between design and engineering. We achieved that by:
- Bi-weekly design system meetings and workshops: I conducted regular meeting and workshops with all the developer teams to understand the technical constraints. Through this I found out that the developers were using the ANT design system as their base with additional customised components.
- Setting up a core team: We set up a core design system team which involved 2 developers, a design manager and me. All of us took ownership of making sure the design system got implemented.
- Rolling out initial changes: With a dedicated design system developer, we pushed out the first phase of changes to standardise the typography, buttons and priority risk colours.
- Creating a code library: Initiated the process to create a coded component on the engineering side.
Adoption was a key step in our project to ensure the design system was a success. Implementing such changes required time and effort and would only be possible by getting the product owners and developers onboard.
We systematically promoted this by:
- Design system updates: Presenting the design system and its updates at monthly product development check-ins.
- Demos: Demos with all the developer teams to show what the new design system was and understand future requirements.
- UI Bug team: Encouraging the product team to spot and find inconsistencies across the platform and integrating this culture with JIRA tasks.
We established a governance process based on Brad Frost’s methods with strict guidelines to create new components. We also introduced a better cloud file management system to keep files in order, up-to-date, and ready for engineering to build.
I helped built the web design system from scratch for Netenrich from research, design and implementation in the period of over a year. The design system included over 70 components along with their variants, 12 patterns plus guidance on colour, typography and data visualisation. Following are the highlights from the launch of the first phase:
- Shorter design and development time: Post design system, the time taken to design and develop new features reduced by 20%.
- Reduced UI inconsistencies: The number of design inconsistencies reported by internal users or identified during QA testing decreased by 30% in the first six months within adoption.
- Increased team collaboration: The level of collaboration between design and development teams grew since they had a shared set of tools and guidelines to use.
- Increased product design consistency: Since all designers had access to the design system, the consistency of design products across the platform increased.
The design system is still in progress, and constantly being iterated on. Here are some of the next steps I would take:
1. Coded component library: Ensure there is complete overlap between code and design components.
2. Design system audits: Establish regular design system audits to assess adherence to guidelines and identify areas for improvement.
3. Maintaining documentation: Cultivating processes and best practices for maintaining the documentation to ensure that our library stays up to date and perfectly in sync both on the design and code side.
Design system is a constantly evolving system that ensures designers and developers have the right support and resources to do the job. I learnt that success hinges on its invisible parts–how to use it, when to evolve it, and understanding why it matters for the overall success of the team.
This required constant communication with various stakeholders and a shared vision along with a close working relationship between designers and engineers to ensure everyone was in sync.