Design Systems: Is It Worth Investing for Startups?

Building a product from scratch is never easy. Companies may rebuild/redesign it at various stages to give the best features/experience to their customers. Clumio underwent major design updates not once, but twice – the first time, while coming out of stealth mode, for branding and the second time when we expanded our offering with AWS EBS Backup (we began supporting more than one backup source for the first time – VMware and AWS). The experience of working on these redesigns led us to believe the need of a comprehensive and futuristic guide for the design of our UI.

As our team of developers and designers also grew, we really needed the team to follow a creative direction consistently, reliably and coherently. This was an important first step to get right if we were to build a product interface that told a consistent story.

This objective made us define the requirements clearly. We needed to identify and define patterns and these patterns needed to be articulated, shared and built. This essentially is what a design system at Clumio is at its core. It is the language of our product’s interface.

It’s important to note at this point, that as we continue to learn more about the product and its usage, this system is expected to always evolve and we as a team need to be comfortable with. The key though is, that once we articulate our design system, it then becomes actionable and reusable. Now, let us understand what a design system is.

What is a Design System?
Design System, often termed as the single source of truth for design, is a set of comprehensive guidelines to design a product. It consists of the following three parts:

1. The Building Blocks for Design
2. Governance Principles
3. Component Libraries

Let dive in:

1. The Building Blocks for Design – These are the basic elements used by the designers to build UX mocks for the product workflows. This includes:

• Assets like images, icons, color, fonts, etc.
• Reusable design-elements like buttons, checkboxes, tables, etc along with all their variants.
• Layouts for various kinds of pages in the product to ensure standards such as margin, spacing, etc.

Design for some variations of the Input component at Clumio.

2. Governance Principles – These principles define the context for usage of “Design Building Blocks”. They provide direction and clarity on what elements to use and when. These principles includes (but are not restricted to):

• Usage of various colors from the color palettes.
  Eg: The primary actionable button in a workflow should be of the brand color.
• Instructions on using different Building Blocks – when to use and when not to use.
  Eg: When to use a Link vs a Button or a Tooltip vs a Popover in the product.
• Define various interactions for the components.
  We need to keep in mind the target devices while defining these interactions.  For example – a hover and a click on computer, both maps to a tap on mobile devices. Hence, having both these interactions on the same web elements for mobile devices is not user friendly.
• Accessibility – Define the specifics of keyboard navigation and shortcuts.
  

Figure 2. Glimpse of some Governance Rules for the Input component at Clumio.

3. Component Libraries: These are reusable set of components, styles and layouts. coded by UI developers based on the Design Blocks and the Governance Principles. This also includes a developer’s guide on how to use these components.

Figure 3. Screenshot from the Component Library at Clumio.

Why invest in it?
Creating a Design System seems to be so much of an effort. This may be useful for large organisations but can startups like Clumio take advantage of it? Is it even worth investing time and money for a small organisation like ours – with just two designers and six UI developers? We had these thoughts exactly in our mind 8 months ago when we started exploring this for Clumio.

On the other hand, we also had questions that if we put this on the backburner now – would it be too late until we realise it? Will this get pushed until there is no alternative apart from using it? And with each day that passes we can’t re-use design and code.

After many discussions, we decided to gradually augment our efforts on building the Clumio Design System. This had to be done incrementally along with our existing priorities. We started with generic product layouts, components we had in the product then and being mindful of the future requirements.

With two major features released since we adopted a design system, below are the benefits that we have seen till date:

Cost Benefits:

1. 1. Accelerated time to market – Design System removes redundancy by avoiding to solve the same problem again as most of the components for the design and UI are reusable. Hence, the UI design and development moves much faster.
   2. Easier for the teams to scale efficiently – Since Design Systems also ensures the comprehensive documentation of all UI behaviors, it is not only easier to just onboard new designers but also new members in the UI development and QA teams.
      
      In absence of the documentation, a very common problem that can be seen in organizations is having the same UI component with minor variations across the web-application because they were handled by different designers and developers. That is not only a re-work in terms of implementation but a wasted effort to maintain both – design and code.

Quality Benefits:

• Build a consistent product – Consistency is vital to brand creation and user experience. Focus on a simple and consistent UI in enterprise applications is relatively a new phenomenon. With pre-built design and UI components, Design System brings the ease of use which we have seen in consumer-grade applications to the enterprise.Here is an example of similarity between the vCenter VM List page and the Microsoft 365 Mailbox List page in the Clumio application. The beauty of this was that a few customers who had only used our vCenter backup protection before were easily able to protect Microsoft 365 suite on Clumio without having to read or follow any instructions.

Figure 4. Screenshot of the vCenter VM List page in Clumio App.

Figure 5. Screenshot of the Microsoft 365 Mailbox List page in Clumio App.

• Low chances of error: Another advantage of using the pre-built components is minimal chance of error and even if there are any, QA team can easily detect those by comparing with the Design System.

Summary
Startups often prioritize features that can bring revenue over what is perceived as nice-to-have. However, we also need to have enough discipline in our processes to avoid rework and enable reuse. Design System is as critical for a good UI as culture is for a startup. It is never too early to invest in the Design System for your company – the benefits for startups are the same as for large organizations. It is also imperative to understand that a design system is a living document and must continue to evolve over time. Startups can always start small, demonstrate the benefits of using it and then continue to make their design system robust as the product evolves.