For decades, brands have used design systems to help create an identity and unify separate solutions and messaging within a product portfolio. We can see it in everything from cars, product design and, of course, user interfaces. This blog post will walk through how we recently approached modernizing our design system to dramatically accelerate development while tackling the scaling challenges we encountered as our product portfolio expanded.
Design systems, or the collection of components, building blocks, and elements used to define the visual language and rules of engagement with a product, have matured significantly in recent years. Now, they offer a granular-level of detail for every element of the design–color, components, key screens, states, and more.
As a result, design system sticker sheets and style guides are often lengthy and overloaded with detail, causing multiple problems:
- design consistency is difficult to maintain as teams and product portfolios scale.
- designers spend too much time navigating documentation.
At Rubrik, we experienced these challenges firsthand and brought forth the question: how can designers create their design with minimum effort while also aligning with the design system?
To solve this problem, we decided to overhaul our entire design system and create an interactive working file. This working file embeds everything into the design tool (in our case Sketch), such as style, responsiveness, component state, hierarchy, and spacing. With this tool, a designer can literally use the components as building blocks that “snap” together to form a perfectly consistent page layout with the right spacings and, of course, the right design style! Pages that used to take 3-4 hours now take 10 minutes to create. So how did we do this? Let’s walk through the process.
Addressing the Problem: A New Approach to Our Design System
One of the main reasons we created the working files is that, previously, design was a bottleneck for R&D. We often had to push back deadlines and had a problem with trying to keep our designs consistent. In addition, we often didn’t find the end result fit with the original vision.
When building our new design system, we started from the goal: to become the gold standard for enterprise UI in terms of ease of use simplicity and consumer-grade look and feel.
Then came the building part. For the purpose of this article, we will keep this high level.
Our first step was mapping out the characteristics of Rubrik’s corporate identity. This included defining the values the company represents for employees and customers and determining how Rubrik’s role as a Cloud Data Management leader translates visually. More specifically, we explored how to represent data and make that part of our visual language.
Next, came the design part. We created a primary and secondary color pallet, font, a typography sticker sheet, icons, and illustration styles while also setting a clear UI philosophy.
The Design System Back End: Where The Magic Happens!
Now that our design pallet was laid out, it was time to focus on the back end. When designing this part of our system, these were the key objectives that guided us:
- Responsiveness: Creating a system that works in a 24 column grid to support responsiveness
- Accessibility: Ensuring the color pallet, text sizes, and components support Accessibility Standards and work perfectly for the 2 themes we designed (bright / dark)
- Scalability: Embedding symbols and components that span across every element of our UI and can grow easily.
- Faster Prototyping: Setting a clear hierarchy of text, components, elements, and themes so that a designer can easily find what they are looking for and protype fast.
For design tools, we used Sketch + Abstract, but any modern design tool like Figma can be used. Here’s a walkthrough of the new interactive working file:
End Result & Next steps
After all of these careful considerations, we were thrilled with the end result! Here’s a sneak peek of the UI created with this new design system:
With our new approach, we are able to be one step ahead of engineering and drastically cut down the time required to create new pages.
An interesting outcome we didn’t initially think about was that this approach mapped perfectly into the development mindset. It helped bridge the gap that has historically existed when working with engineering to translating a design system into implementation. The Rubrik engineering team incorporated a similar approach as ours when developing the component library, making the transition from design to development faster and more seamless.
This is our first stab at our new system, and we have adjusted and learned a lot through this process. We would love to hear from others who have experimented with similar approaches. If you have any thoughts, comments, or suggestions, please share by tweeting to @rubrikInc!
Thank you to everyone who helped with this project! Special shout-outs go to: Cat Utah, Mukul Bisht, Galit Bar Fuertes, Xiao Yu, Zhouxing Lu, Pengfei Wang, Saravana Prabhu, and Aryan Indraksh.
To learn more, check out Rubrik’s Product Design blog here.