NI Design System III
Role
Project Type
How we got here
During my time at NI, there were previous steps to get to this point in our design system. This is the third stage towards improving our design system.
If you haven’t already, you can read about the previous steps at:
NI Design System Part I
NI Design System Part II
From the previous work and additional evangelism, the company had committed to invest a team to create a design system that, initially, supports our web products and incorporates our recently rebranded visual identity.
We were in the midst of establishing a new PaaS (Platform as a Service) called ‘Stratus’ and the various applications that were included needed to be updated and aligned. The products were created and maintained by separate groups around the globe. We needed to support as many as possible.
Responsibilities
As the Product Owner, it was my responsibility to guide a team of 12 designers and developers in the production of our system. The simple version could be summed up as, “Make the system better, get folks to use it.” A little more detail would be tasks that achieve the following:
- Establish and maintain the design system roadmap and manage the activities to fulfill it.
- Collaborate with users as a partner to define the future priorities of our system.
- Evangelize the use, impact, value and needs of the design system with users, clients and senior leadership.
- Increase adoption and other metrics aligned with company objectives.
Approach
To succeed in this role, there were a few key principles I adopted and promoted as part of our design system culture.
Transparency
Our work and all other parts of our progress must be open, easily accessible, and available for feedback and input.
Enablement over Governance
Our team and our system must be enablers as opposed to governors. We can build consistency into the system but using the system has to be perceived as the “path of least resistance” to be successfully adopted.
Proactive Awareness
Continually be on the look out for new projects or other opportunities to introduce the concepts and resources of the design system. Don’t hesitate to reach out the lead of a project and give them a pitch for something that can save them time and money…they usually like that.
Support and Collaboration…Listening
Make sure all users have an easy path to reach out to us for questions and guidance. Always be talking to clients to gain insights to what they need next or what needs to be better.
The System
As previously mentioned, ‘enablement’ is core part of our system and it’s purpose. As such, it took the lead in our mission statement. This is how we presented and communicated our system and what it hoped to provide to NI.
Mission Statement
”Enable efficient creation of high-quality, consistent software for NI.”
Pieces of our system
- UI Components
The code components of our system. We provide components for multiple frameworks like Angular and Blazor. We also provide native web components if the client is using a different framework like Reach, Vue, Svelte, etc. - Design Tokens
While most of our tokens are baked into our components, we also provide our primitive tokens for new components or other customizations that our client needs. - Theme Provider
The theme provider is called out as a core component due to how crucial it is to providing a modern, inclusive experience for the end users of our products. It provides functionality like light/dark mode, but also includes functionality for detecting and reacting to user settings for UI scaling, contrast modes, motion settings, etc. This allows to adapt our products to conform to a user’s accessibility settings from their OS. - Design Assets
We also provide libraries for our designers using Adobe XD and Figma. These assets are provided for our designers to quickly and easily integrate the design system into their work. - Documentation
A set of guidelines that provides awareness to what is provided from the system, how to use from an implementation perspective, and guidelines on when to use each part. - Tools and Utilities
This includes a number of tools from automated visual “diff-ing” and token generation to linting tools and other small utilities to scrub code to measure adoption and identify new needs.
Some Key Contributions
Moving to open source
To provide the easiest access to our system and us, I pushed to provide it in a public repository and make it open source. This made our system easier to access internally as it didn’t require account setup of permissions management. It also allowed our system to be seen or built on by our user community.
Pitch Decks and Onboarding Materials
To get teams aware and started as quickly as possible, I created content such as videos and slides to make people aware of what our system is, its goals, and how to use it.
Evangelism Content
As part of being proactively communicating progress and value, I provided information targeted at updating senior leadership of our status and roadmap and created easily consumable and shareable short-form video for more frequent updates for the entire organization.