Nutanix Design
Published in

Nutanix Design

Nutanix Design System 2.0

Back in 2014 when I joined Nutanix, we were a very small team of just 4 designers with Jeremy, John, and Paul. Keeping things consistent was relatively easy since we would always share the design, whether it’s an entire feature or the background color of a small badge. Three years passed by, we grew into a 30-designer team and are now handling a wide line of products with the collaboration of team members across three continents. We started to face the inevitable challenge of how we can keep our design language consistent by not only having a unified look and but also a fundamental familiar experience. That, is the beginning of the story of what we call the Nutanix Design System 2.0.

Various components in the Nutanix Design System

Why call it Design System “2.0”

Design System as a concept isn’t new. You might have heard about Google’s Material Design System or other similar approaches from Facebook, Atlassian, etc. You see the pattern here: Design System is typically made for big teams so that designers can work together more efficiently and products will have a consistent experience.

But why call it 2.0?

Well, technically we had a “1.0” version long ago around when the team started to work on multiple features, which was in the shape of some Photoshop cloud libraries that include color palettes, layer styles, and some frequently used components. But it’s hardly organized and it’s mostly created for ease of grab. Many aspects are missing: When to use which gray? How do I use components in conjunction? What are the standard navigation models? What about content strategy? None of these were there. There was also a lack of collaboration model where designers can create their own components and contribute to the system.

In short, the “1.0 system” was more of a component library, which was a good starting point, but the next step would be to complete the offering so the system on its own can support a whole team of designers.

In 2.0, we created multiple channels to improve collaboration experience from a request form to a wiki-style guideline website.

Exploring different ways of organizing components

Step one, we wanted to have a better structure for the components that we already had as well as the ones that we are going to build. Originally, components were grouped by use cases. Someone worked on popups so he would add those popup related components into one library. The strength of this approach is that it’s context-based so it’s fast. However, if a component doesn’t fully meet the needs of a project and the designer wants to explore other options, he needs to go through all the other context libraries to find an alternative option. We then tried organizing the components by their purposes which turned out to be a lot easier to discover and experiment with different components that have similar use cases.

Components are categorized by their purposes.
We also revamped the Sketch file to reflect the new structure.

Defining a visual direction

One of the biggest challenges of building a design system for a large team is to unify the visual style. Designers have different taste and even sometimes different design philosophies. In 2.0, not only we updated the visual style but also made sure it’s communicated to the entire team that the choice of the visual direction was not based on the taste of individuals but a shared decision that focuses on the company’s brand identity.

Style cohesiveness from topography to iconography, illustration, and even voice & tones.

Resolving Historical UX Issues

Nutanix UI isn’t perfect. But the challenge is not to acknowledge those issues but to resolve them because the code base is just gigantic. Some of the issues like small text sizes and accessibility are so fundamental that it’s very painful to change while the return usually takes time, which makes them de-prioritized forever. The 2.0 project was identified as the perfect opportunity to finally address these issues since we are making many directional changes to the UI design. Writing about this makes me want to shout out to all the engineers that have been involved in fixing the countless bugs all over the places after the UI revamp. You guys are the heroes!

Improving Productivity and Collaboration

Nutanix Design System 2.0 is designed to be a living, breathing, ever-evolving system. To achieve that, we need contribution from all designers. We created a new workflow for designers to request and contribute components to the system, as well as Slack channels for communication. We also send out a monthly newsletter to communicate the latest changes to the system and tips and tricks that many new designers aren’t familiar with.

Improving Implementation Quality

In our old UI, there has been a lot of misalignment between design and implementation which is partially caused by how components are created by separate product teams. With 2.0, we also put together a dedicated UI engineer team to create high-quality components for other product teams to focus on building the UI. Every component is carefully taken care of and reviewed by both engineers and designers before they are officially published.

What’s Next

Nutanix Design System 2.0 has been launched internally since late 2017 and got a lot of positive echoes from designers, engineers, and leadership. It’s more structured, polished and collaborative. Currently, we are still focusing on adding more components and variations. Soon we will start working on visualization components which is going to be super exciting. We plan to share with you guys more once we have them updated.

Special thanks to Pascal Gärtner who’s the master behind the beautifully structured new Sketch file and Sketch libraries.

To visit the design system website, please go to http://nutanix.design/2.0