How to approach design systems in startups?

Distilling through “how and why we developed FusionCharts Design System from scratch”

More than a thousand resources and tools are currently available on design systems. Recently, We’ve seen a lot of companies like Google, Apple, IBM, Microsoft, etc announced their design system publicly. Being unified by classic design principles, tools, and resources, these systems provide useful insights into the synthesis of design principles and elements.

At FusionCharts, we took a lot of inspirations from these resources and designed a customized system to meet our needs. Below is the process we followed.

Why we created the design system for FC?

• Inconsistency: As reflected by different startups too, FusionCharts over the past decade had seen many iterations and enhancements. As a result, it had accumulated a heap of inconsistency and ad hoc style designs.
• Subjectivity and Opinions: Most importantly, there were many subjective opinions and views when designing something because of the lack of a proper design system. That’s why it took a lot of time to validate designs. As a designer, I aim to remove all these subjectivities making the design and design process consistent and efficient.
• Aesthetics: Again, though FusionCharts has seen several improvements in product during the last decade, due to the look and feel of FusionCharts, the customer had developed a wrong perception towards the product, and believed that the product did not receive any major updates. In some way, our product sales graph was affected by it. We needed a new look and felt like change this perception.

The other tactical reasons were:

• Loss of interface predictability due to incoherent design
• In design decisions, there was no way to address subjectivity.
• Increase in Page driven semantics on front end affecting page load time
• Inconsistent usage of icons across web assets
• Re-writing a bunch of CSS/less/sass file explicitly for the same components at different point of time
• Difficulties in explaining design details during the handoff process

Our Objectives:

We summarised our project objectives to the following two things to address the above-mentioned problems.

• To design and deliver at speed maintaining consistency while removing subjectivity.
• Changing the perception of the customers towards our product by updating FC’s look and feel.

The big initial failure?

It’s hard to resist that designer temptation in us to start creating designs. Hence, we directly started by designing the UI components/kit. Turns out it was a big mistake.

For building a rich UI Kit, we intended pushing every possible element and components into the system with an aim to fasten the subsequent process in both design and development. Our initial hypothesis was that we might need these components in the future in some specific use-cases.

It turned out to be a bad idea since it cost us a significant amount of time to develop every UI element we listed out.

1. The developed UI kit failed to produce an easy to use and consistent interface in a testing environment.
2. In order to improve our visual appeal, we tried to add a few more decorative elements to our interface, which created clutter and inconsistencies further.

We struck the roadblock instead of making strides.

Key lessons:

1. A good design system is a collection of your organization’s best institutional knowledge — as Dann Mall has said. It is always wise to stick to our website/app components that we often use. Introduce the new components in the UI Kit only when they are needed. To some extent, this process also contributes to enhancing page load speed by keeping minimal components in the system.
2. A set of components behave consistently when they follow a set of principles. The consistency stays intact even when the components interact with each other.

Hence before we move ahead, we created a set of guiding design principles.

Setting up design principles

The purpose of the product can be manifested through designs only by establishing a few grounding principles.

• Deliver at speed: Our objective is to deliver as quickly as possible. Do not spend a lot of time on any particular element, and therefore keep it simple.
• Clarity: People need to know what it is, care about why it is used, understand the interface, predict what will happen when using it, and then interact successfully. Elements, where they ought to be obvious, should avoid the subtle effect.
• Usefulness / Predictability of behavior: If the product is not useful, if users do not find a use of it, then the design has failed. Maintain a consistent approach between elements that increase the likelihood of prediction of element behavior.
• Context: Instead of bombarding the users with a host of functionalities, we should provide them with a lean set of relevant options with a meaningful label.
• Accessibility: The web is a space for everyone. Design for a wide range of audiences.

Approaching interfaces systematically

1. Building DSM on top of a framework

• Previously, the front end of FusionCharts was built on using the Bootstrap CSS framework. It’ powerful grid structure, contextual elements, flexibility to integrate easily on other platforms, a bunch of interactive elements are just some more important reasons, we wanted to use them from the front end perspective.
• From the design perspective, we never wanted to disrupt our old interface much for the representation of content through different layouts.

The decision of designing elements keeping bootstrap into account though erupted disagreement initially, yet we all agreed to this point as speed was what mattered to us and we explicitly defined this in our principles.

2. The infusion of the Atomic Design process

Being inspired by modular design, Brad Frost’s atomic design approach emphasizes on creating/designing the basic elements of the UI, which are then reused across the application.

Primary reasons to adopt the atomic design process:

• Modularity nature
• supports the agile flow. We can ship the components to the dev team as we design them, simultaneously.
• provides the platform to create beautiful and easy to access content regardless of devices, screen sizes, and the context.
• allows us to think about the part and the whole at the same time, have a global vision of a product or a brand.

Below is the popular atomic design process that we followed in our flow.

Source: Google Images

Setting up the fundamental atoms:

Colors, Typography, Grids, and Spacing

1. Colors:

Colour has a significant impact on the user mind. The previously used colors across all FC products, business, and sales advertisements had introduced an unintended wrong perception towards our product in our customer base. By introducing bright colors and gradients, we wanted to change this perception as they set the mood, enhance intuitive interactions, increase readability and legibility.

Broadly our color palette consists of the following color sets:

1. Primary Color — For actionable items
2. Accent Color — For the distinct set of actionable items e.g Download, Contact Sales, etc/to distinguish it from busy information.
3. Neutral Colors — For descriptive Texts
4. Shades of Greys — To achieve figure-ground relationship and hierarchy
5. Extended Color palette — For illustrations
6. Gradient Sets — To add visual weight wherever necessary

From tints and shades of these colors, we generated the gradient color palette. The extended color palette is mainly used in our illustration system and for handling different states of UI e.g error and success state, etc.

2. Typography:

We set a few parameters to test different fonts for selecting the typeface.

• Should be Open Source and CDN enabled
• The readability and legibility of typeface should be good.
• It should have a wide range of font-variants. Having a monospace font family would be an added advantage since we have a lot of code snippets on the web.
• It should have a medium X-height: As it provides more balance and contrast between upper and lower-case letters.
• And a proper numeral set that will go well along with our data visualization standards.

We went ahead with Source Sans Pro, after testing for a dozen above typefaces.

3. Grids for UI, Illustrations, and icons:

Why we used grids?

• People scan a lot, more than reading to quickly find out the information they are looking for. They are also wired to see things through the simple structure/shape. Grid is helpful in generating such an easy structure/shape which enables both readability and scanability on the interface.
• It also helps a developer to manage the responsive breakpoints easily on the web and save a lot of time from there end.

We can always manipulate grids as per out needs but sparingly. Below is how we set up the grids in our system.

• UI Grid: We followed Bootstrap’s own grid.
• Illustrations: Illustrations are aesthetically pleasing. We introduced them at FusionCharts to depict the product behavior and functionality visually by adding depth to them. We chose isometric illustrations, from many styles that evolve every day because of the geometric aspect of this style. Isometric illustrations also simplified our 3d sketches.
• Icons: We are strongly inspired by the well-balanced solid icons of material design because of well-implemented character cues in icons. (Characteristic cues are what users use to identify icons). We followed the material design’s grid structure for designing small scale icons to properly display characteristic cues inside a geometric shape.
• Logo and other large icons: The structure of a 10 x 10 grid worked rather than 8 x 8 for us for our brand logos.

*Grids in action

4. Spacing:

Both spacing and line-height(taken care of in typography part) are two such properties on the interface that can seriously influence the visual composition of the UI. Many times we nitpick between 80px or 100px to achieve the visual composition. This pixel-perfecting thing always slows us down in the process for nothing. Without a system, N amount of spacing values stacks up in our library, leading to inconsistencies across the websites.

We created a spacing system in our library to address the above issues.

The spacing system:

We wanted our sizing values to be simple and super easy to remember as we frequently use this property. Therefore, beginning with arbitrary values was never an alternative. Our base font-size value was 16px, and we wanted to play around it.

Why 16px, not any other font sizes? — 16px is a specified base variable in our SASS file (a pre-processor CSS for composing modular CSS) and a default font-size for our regular paragraph. It is easy to generate any values surrounding this number by using SASS operators. Hence in case, we want to change our entire spacing system in the future, we just need to manipulate one variable/one value.

The values packed together at the tiny end of the scale and gradually got more spaced apart as you get further up the scale. To note, we haven’t used a linear scale (the scaling factor) here as it didn’t work for us.

Setting up atoms, molecules, organisms, templates, and pages

Throughout this process, we have made sure every atom and molecule pass the following parameters.

• Accessibility
• Visual Hierarchy through type, color, and size
• Maintaining a figure-ground relationship through color, shapes, and shadows.

Atoms:

These are basic fundamental blocks of a user interface and are made up of instance of color, typography and basic shape.

E.g: Buttons, Input field, etc

Molecules:

Molecules are built using a group of atoms which are functioning together as a unit.

As frost says :

When combined, these abstract atoms suddenly have purpose. The label atom now defines the input atom. Clicking the button atom now submits the form. The result is a simple, portable, reusable component that can be dropped in anywhere search functionality is needed.

e.g Cards, Forms, etc

Organisms:

An organism is made up of a group of molecules/atoms.

e.g: Header, Footer

Templates and Pages:

Templates provide a great platform to design content structure through abstract atoms, molecules, and organism without having content in hand. Here we should address possible use cases for the content considering their dynamic nature.

In general, Templates are page skeleton without having real content at the place. Pages are a specific instance of the templates with real content in place.

Example of a page :

In parallel, We kept building our asset library.

Managing Design System

A DSM in Sketch though seems like an excellent idea, yet in managing several basic things, we sometimes felt the limitations of sketch symbols. For instance, it was much easier for us to create dynamic buttons using a sketch plugin, but it was a time-consuming process to manage them through symbols. We set up colors and type scales in our sketch environment only.

We really liked Invisons DSM, which currently acts like the GitHub repository for our designers. Anytime we can sync an element from our sketch environment, collaborate with fellow designers, can write down the use cases of the element including the code snippet.

How Design System helped us?

Design:

• Design handling has been super fast when new product feature requests were made. The system has been a great help for any other product release landing/individual pages.
• We use our resources to solve problems better than to worry about aesthetics and pixel perfecting.

Development:

• Developers make features live quickly. The CSS has been very modular at the same time.
• Any component can be changed/added/ removed at any time without affecting the product. The flexibility on the platform has been enhanced.

Then and now…FusionCharts

The previous version: http://web.archive.org/web/20170923130611/http://www.fusioncharts.com/

Now: https://www.fusioncharts.com/

Final Thoughts

Design System is a powerful modular and systematic approach in designing interface. It keeps both the design and development process streamlined maintaining consistency across the products. It let us think beyond pixels and allows us to focus more on real problems. It encourages the right rationals for taking design decisions from the visual perspective by removing subjectivity out of the equation.

Also, The predictability of the interface gets better with the modular structure of the Design System, which in turn directly reduces the learnability graph of the user on the interface. This enables users to focus more on completing their tasks than worrying about anything else.

Another point to the list, If time is precious than anything else, then Design System offers a lot of it.

Summary ( How to approach Design System at the workplace )

1. Find out the reasons behind implementing Design System
2. Define Objectives
3. Define Design Principles
4. Set up fundamental atoms i.e., color, typography, spacing, grids
5. Set up atoms: Forms, Buttons, Tooltip, cards, etc
6. Form molecules and organisms. Continuously test them on the interface
7. Build an Asset Library as you progress
8. Maintain a Repository for easy collaboration
9. Measure the success

Credits:

• To Nitish Vashistha for his continuous encouragement and necessary valuable feedbacks.
• Illustrations and Icons: G S Kannan, Undrawn.co, Bhaskar Bhanja

Resources:

• Atomic Design by Brad Frost

Thanks for being here 👋