NI Design System

Introduction

See the system: Fuse Design System↗

Over the course of a few years, National Instruments had rebuilt its portfolio of products and created a new platform. This platform could be used to share code and controls across multiple products to make development faster and provide architectural consistency across them.

Among many benefits, this allowed development and design to have a shared set of components to create. However, this shared set of components hadn’t been documented which led to some items still being recreated just because they weren’t aware it already existed. The solution was pretty straightforward. We needed a catalog. One that not only documented our UI components but guidance on how they should be put together to create a better experience for our users…aka, a design system.

The design system is a shared language that enables the creation of products in an efficient and consistent manner. Every language needs a dictionary and ours is no different. The design system is both the components of the system and the instructions on how to use it.

My Role

For the documentation of this design system, my role was to collect and curate our current guidance for using our design system, design and develop the initial website for documentation, publish new content that hadn’t been written down and train others on how to contribute content to this documentation.

The Users

The users of this design system are, in order of priority:

1. Internal developers
2. Internal designers
3. External developers
4. External designers

Our platform is used internally by ourselves and externally by our partners who build add-ons, extensions and companion products. We wanted to provide them with the same resources we have to build consistent experiences.

Goals

1. It will let the simple problems have simple solutions.
2. We will be able to design and develop faster.
3. It will allow us to focus on the interesting problems.
4. It will allow our products to evolve in a unified way.

The Creation

Step 1: Remember how to build website

While I commonly find opportunities to learn a bit more about development, it had been a while since I had ramped up on the latest and greatest in web development. For this product, I needed something that could be easily created and easily maintained. I also needed something that didn’t require much web development experience. I used Jekyll since it creates a simple set of static, HTML pages and doesn’t require a contributor to fully learn HTML syntax. No databases to manage, no complex scripting to handle…just simple Markdown that is a little more accessible and very well documented.

Step 2: Collect all the things

I reached out to developers who could help catalog every control used in our platform and identify which controls need to be included. I also scoured through previous design specs to find any existing documentation for shared controls and other elements.

This included finding everything we had on:

• Typography
• Color
• Iconography
• Other style elements, like text capitalization.
• Controls

Step 3: Assemble it all

Over the course of the next several weeks, I assembled all this existing information, created the visual assets for publishing, and generated the pages of content needed for an initial release.

The Living System

Not every single control was able to be documented and there is still work to do for improving the content and continuing to refine, evolve and extend our system. However, we now have a source of truth and a catalog of elements for ourselves and our partners to create delightful experiences for our users in a consistent and efficient way