In 2021, Aurora Solar rebranded with beautiful work with HelloMonday. However, Aurora needed help translating that vision into a usable design system before launching the rebrand live.

That’s when Pixelfat Design worked with Aurora to develop a north star vision for the product’s future: the Borealis Design System.

I began to work on the project after the Pixelfat’s initial audit phase to build out the Figma library and to work hand in hand with the developer to flush out and build the system.

Building the system

We started with foundational styles including color, typography, spacing and eventually moved our way to more complicated patterns navigation, tables, drawers etc.. Each style and component was documented, cross referenced and validated with existing product designs and approved by engineering.

2 improvements that the new DS provided were that it was fully responsive components and fully light/dark mode.

Documentation

We created robust and flexible documentation needed to ensure the consistency and specificity that designers and engineers would need for implementation.

We also designed a custom website to centralize the documentation. This website not only helped to align designers and engineers but served as an inspiration for Aurora’s brand, vision and overall mission.

Implementation

But the question remained, how do we implement all of this new snazzy modern components into an enterprise company with 9 years of legacy code within the tight timeline tied to the brand launch?

The in-house dedicated DS engineer and I created an implementation strategy and we had to pitch it internally upstream to get company buy in.

Our plan was to create and waterfall the new (modernly coded) components into production by creating style-agnostic components and create 2 themes: a very basic V1 existing styles theme; and the new rebrand V2 Borealis theme. We would layer the 2 themes on top of the style-agnostic components, so engineers could implement Borealis and the theme switch would launch on the same day as the company rebrand announcement.

This was serious business of a pitch. After a bit of back and forth, we eventually got buy-in and the full team rallied behind it and got support to organize going forward.

Global navigation

Previously, Aurora’s product was stitched over time which led to a confusing and inconsistent navigation experience.

In trying to create the global navigation, I collaborated with the core team create a systematic navigation across all features. I worked on UI and support the core team with UX feedback and improvements.

With the new DS components, we were able to effortlessly create several hi-fidelity responsive global navigation prototypes, validate them w/ customer feedback and iterate. Eventually, we landed on a responsive pattern based navigation UX using the new design system components and styles. This global navigation work was a huge company win and was completed so quickly in design due to the new DS.

A full enterprise redesign

I created an end-to-end prototype with the global navigation and DS compliant key screens to fully let the Borealis Design system shine.

After nearly a year, we were able to translate Aurora’s vision into a reality. Not only did Aurora’s product industry compliant, user friendly and modernized look, it also had a sophisticated design system under the hood.

With access to the updated design system library, designer’s day-to-day design processes were significantly faster with shorter turn-around times. Meanwhile robust documentation helped align designers and engineers for a smoother handoff process.