Rolling out Rubrik's UI Themes

Designing the first time user experience introducing the bright and dark themes for Rubrik's UI

Design Systems

UX Design

6 min read

Background

Rubrik’s bright and dark UI themes were originally previewed at Rubrik’s data security conference, Forward, in 2020. Since the first announcement, a lot of design and development work went into mapping the UI in the new themes. Up until the end of 2021, the look and feel that all customers had was what is now called the Classic theme.

In September 2021, I worked on the FTUX designs to introduce the new themes to our customers. The project scope included designing an announcement flow, a theme preferences page, and a menu shortcut to toggle between the new themes.

Role

Product Designer, Visual Design Team at Rubrik

Stakeholders

Design Manager, UI Engineers, Engineering Manager

Timeline

September – October 2021

Requirements

Maintain the Classic theme as an option

To ensure the engineering stability of the feature, themes could not be made available for all product areas at once. There would be gradual beta releases to different sets of customers. Therefore, we still needed to support the Classic theme in net-new designs.

Even for customers that would be getting themes, we wanted to give them the option to keep using the Classic theme, in case they weren’t yet ready to switch to an entirely different look and feel.

Include Auto as an option

Like other products that support dark mode, we want to include an optional setting to have the Rubrik UI follow the setting of the user's computer’s OS.

Allow the user to preview the themes

Without seeing what each theme looks like, it may be hard to decide which theme to select. We want to have the UI change into the new theme once the user clicks on the option, without having to hit Save.

problem statement

How can we design a first time user experience for the release of UI themes, so that customers are informed of how to enable themes and what the impact is on their current user experience?

Research

A lot of people in the product org were excited about the beta release of our themes. Product and engineering managers shared interesting UI examples announcing dark mode to our team for inspiration. This was also around the time Google rolled out the dark mode for Google search, so I referenced that design as well.

Sentry AI (full-page interaction)

The most elaborate UI example was Sentry AI’s full-page interactive experience. As you scroll, the animated illustrations show the natural scenery from sunset to nightfall. This approach is quite creative and reminiscent of a movie trailer.

Google (banner above search results)

Google decided to use a banner on the search results page, after the user has entered a search. In this banner, they allowed the user to directly try out dark mode with a button, and informed the user where the permanent setting was located.

Github (popover pointing at top bar)

Github had a simpler approach, and used a popover that pointed at the user profile icon in the top navigation bar. There was no functionality to turn on dark mode within the popover, but the message listed the location of the setting.

Design Iterations

I designed 3 variations for the themes rollout FTUX flow, each with a different level of user guidance. This list goes in order from the most user guidance to the least.

1. Multi-Step Modal

After the user logs in, a modal appears on top of the dashboard announcing the release of themes.

In the next step, the user can select a theme directly in the modal, and the UI will change instantaneously with the selection. After the user closes this modal, a popover is shown on the dashboard screen showing the user where they can edit the theme in the future.

2. Single-Step Modal

This iteration is similar to the previous, except that the modal appears on a solid background fill, rather than on top of the dashboard page, and the modal is reduced to only the illustration page. The CTA button takes the user directly to the User Preferences page to select their theme. A help popover appears pointing at the options with explanation text.

3. Announcement Popover

In this simplest iteration, there is no modal, but just a popover pointing at the user icon in the global header, when the user arrives at their dashboard after login. The user is directed to click on the user icon, and go to the User Preferences page from the menu.

Feedback

I created Figma prototypes for each of these iterations, and demonstrated them in a meeting with my design manager, the UI engineer, and their engineering manager. The interactive prototypes were useful to show a clear comparison between the 3 options, and we were able to identify pros and cons for each:

1. Multi-Step Modal

Pros:

Users are shown the themes announcement before the dashboard page which prevents them from getting distracted by entering their regular workflow
Giving the user a preview of each theme directly in the modal means they don’t have to click extra steps to start viewing the different themes

Cons:

Previewing the themes in the modal doesn’t give much of a preview of how components actually look in each theme since the modal sits on top of a background blur. As well, there is no difference between the look of the modals in both the bright and dark theme.
Giving the user the theme selection in the modal prevents the user from learning where the permanent theme selection is in the User Preferences.

2. Single-Step Modal

Pros:

User is directed to the place where they can go back and select themes later on.

Cons:

Users that are in a rush will dismiss this modal and miss this onboarding experience.

3. Announcement Popover

Pros:

Very little new implementation needed.
Allows the user to decide whether they want to select a theme now or go about their normal workflow without a full-page interruption.

Cons:

Less delightful design as the other two options.
There are quite a few clicks for the user to actually arrive at the User Preferences page.

Final Designs

The stakeholders took into consideration the pros and cons of each option, and decided to move forward with the second option of the single-step modal, for the first release.

User Preferences page

I created mocks of this flow in all three themes: classic, bright, and dark. Here’s a look at the design of the Appearances tab in the User Preferences page in each theme:

New icons

For this project, I also created two new icons to represent the bright and dark theme. These were used in the quick theme toggle in the User Menu.

Here's a snapshot of the final designs in the FTUX flow:

Retrospective

As a designer on the visual design team, this end-to-end project gave me some exposure to the workflow of UX designers on feature teams. I experienced how product marketing and management requirements can impact design and engineering decisions, and how design iterations of varying complexity can better align stakeholders to make decisions. This was also the first project after our team adopted Figma as the design tool, so I was able to leverage Figma’s prototyping tool for demonstrating my work in design reviews.

For future global FTUX projects such as this one, I would make sure to consider 3 things:

Is the amount of disruption to the user’s regular flow justified by the importance of the announcement?
Does the user have a way to revert back to their current setting?
Where can the user find this information again if they dismissed the initial notification?

Check out my other work

The Great Migration from Sketch to Figma

5 key differences between Sketch and Figma design system libraries

The Need for Low Fidelity

Developing a wireframe library for better design discussions with stakeholders

Refactoring Filters

Improving the usability and usefulness of table filter components