NZXT Design System

DESIGN SYSTEMS

HSL Colors

UI UX DESIGN
SYSTEMS DESIGN
VISUAL DESIGN

ENGINEERING SUPPORT
CREATIVE SUPPORT

NOV 2020 - PRESENT

WEBSITE LAUNCH: MAY 2021
SOFTWARE: TBD

WEB
4 DESIGNERS | 1 DESIGN LEAD | 4 ENGINEERS | 1 ENGINEER LEAD | 2 PRODUCT MANAGERS

SOFTWARE
5 DESIGNERS | 1 DESIGN LEAD | 10 ENGINEERS | 2 ENGINEER LEADS | 2 PRODUCT MANAGERS

PC hardware company dedicated to serving the PC gaming community by providing builds and parts designed with a balance of beauty and function

Goals

Create a unified and efficient Design System that is implemented consistently across NZXT products and teams

tl;dr

Olympus

Atlas

Prometheus

CHALLENGE

Unifying NZXT product design

Over the years, each NZXT product has had various looks and feels which was natural for us considering each had a different purpose as well as taking into account the general evolution of design.

That said, it was important for us to bring all products under both e-commerce and software together in brand and general design language. Although we kept in mind that they would never look exactly the same, the goal was to have products that users could easily identify as NZXT.

From an internal point view, it would also be much more efficient for our teams to grab from the same pool of resources and guidelines. Furthermore if our teams could easily refer back to standard practices across all products, it would give back a lot of time to focus on larger, more complex problems or even just fun explorations.

We came to the conclusion that we needed a design system that could span across all NZXT products and teams. This way, everyone could have one source of truth and we would achieve the unity we're looking for between all products.

RESEARCH & STRATEGY

Delving into research and strategy

As we were thinking about how to best approach this design system, we needed to make sure all our products had a cohesive NZXT look and feel, but still maintain their individuality as each product had their own purpose and principles.

We did some research on a number of successful systems that other companies were creating when we eventually found a way of organizing ours that made sense to us. Inspired by Spotify Encore, we decided to break out the design system into one foundational design system and two local design systems.

Atlassian Design System

GitHub Primer

Spotify Encore

Shopify Polaris

Microsoft Fluent

Salesforce Lightning

Olympus Design System (Shared)

Basic elements of design that span across all NZXT products

BRAND

FOUNDATIONAL STYLES

COMPONENT ATOMS

COMPONENT MOLECULES

COPY GUIDELINES

CONTENT GUIDELINES

TERMINOLOGY

Atlas Design System (Local)

Dedicated to the DTC retail and e-commerce products

DS OVERVIEW

ATLAS FOUNDATIONAL STYLES

COMPONENT ATOMS

COMPONENT MOLECULES

COMPONENT ORGANISMS

COPY GUIDELINES

ASSETS

DESIGN & ENG TOOLS

Prometheus Design System (Local)

Dedicated to the NZXT software products

DS OVERVIEW

PROMETHEUS FOUNDATIONAL STYLES

COMPONENT ATOMS

COMPONENT MOLECULES

COMPONENT ORGANISMS

COPY GUIDELINES

ASSETS

DESIGN & ENG TOOLS

Our next steps were mapping out our goals and requirements before outlining a tentative timeline in order to keep track of what our cross-functional teams could achieve by our deadline. We did not have a dedicated team working on design systems only which meant all teams would have to work on building this design system while simultaneously working on their respective tasks on e-commerce and software products.

One Source Of Truth

Increase Efficiency & Scalability

Unify Language & Design

Maintain On-brand Design

Readily Available Resources

SHARED DESIGN SYSTEM

Olympus

Olympus is a design system containing all foundational elements that span across every NZXT product. We included brand, components, and content to be used as minimum guidelines. The goal of sharing these elements is so all products are easily identifiable as "NZXT."

NZXT At A Glance

NZXT is complex in that there isn't only one goal within the company. We are as passionate about e-commerce and business as we are community and software as we are PCs and technology. It was important that we include all of this within our brand so we made sure to align with the leaders of our three design pillars: Creative, Industrial, and Interactive.

 NZXT Brand

Purpose

Core Values

Voice

Product DNA

Goal UX

Aligning on Styles

We mapped out a list of styles that would be implemented the same across all products. In doing this, all designers and engineers would be able to pull from the same resources thus accomplishing more efficient implementation and the "NZXT" look. 

In creating this list, we made sure to include at least 1 representative from each team on each product so we could align with what was plausible moving forward.

Colors

Icons

Spacing

Logos

Type

Box Shadows

Accessibility

Pictograms

Microinteractions

HSL Colors
Typography

Aligning on Foundational Components

Along with styles, we also worked on a foundational component library to further unify all NZXT products. We limited the components to a small number to start with as we wanted to be realistic with our deadlines. Since all our design systems would be on-going we fully intend to continue adding new components and improving on past ones where necessary.

Buttons

Links

Modals

Notifications

Cards

Nav Patterns

Tooltip

Toggles

Form Elements

Slider

Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Button Text
Form Elements
Navigation Pattern
Navigation Pattern
Navigation Pattern
Navigation Pattern

Aligning on Content

A big goal our team had outside of building an efficient component library was revisiting our content guidelines and processes which included copy, imagery, illustration, and terminology. We wanted to make sure our design system covered as much as we could provide to every team at NZXT.

Copy translations
copy guidelines
copy guidelines
web copy

Governance Model

 

LOCAL DESIGN SYSTEM

Atlas

Although our goal was to unify all products to look and feel "NZXT," it was still important that each product was focused on their respective purpose and function.

Atlas was created as a dedicated design system to support the cross-functional web (DTC) teams at NZXT, meaning its focus would be on all things e-commerce, partnerships, and campaigns. 

Atlas Groundwork

Because Atlas is focused on NZXT web, it was a must to ensure it catered towards responsive web design. We started with responsive foundational elements i.e. making sure our grid, content widths, breakpoints, type styles, and navigation were all responsive.

Atlas Components

When we created the Atlas components, we focused on the most reusable components first. Because we had mapped out our IA, we knew the types of pages we were designing for and the general content that would be in them. Along with the components themselves, we also provided specs and guidelines to help engineers easily implement them into Storybook and staging environments.

Website & Configurator Design

While we were working on Atlas, we were also working a design overhaul for the existing NZXT website and configurator. We focused first and foremost on our user feedback and were able to improve some high-level pain points.

Take a deeper dive into the  NZXT Web  experience.

The Assets

Our teams worked diligently on our CMS platform in order to understand the best ways to set up our websites assets. We put together documentation that would allow designers to easily create and export assets for our content creators. This way, our assets would always be consistent and intentional throughout the site. 

asset documetation
product page assets
 
 

LOCAL DESIGN SYSTEM

Prometheus

Focusing on software products, Prometheus was created as a dedicated design system to support the cross-functional software teams at NZXT.

 

Although NZXT has one main software product currently (CAM), we are planning on expanding more ideas starting with our very own streaming platform (CREATE). The idea is that Prometheus would be able to cover any and all products we may come up with in the future.

Prometheus Groundwork

Since NZXT software products up to this point functioned as desktop applications, our guidelines needed to fit those expectations. We started by establishing basic foundational elements like grid and content spacing, as well as setting rules to breakpoints and navigation. Much like Atlas, we provided all design specs for efficient implementation.

Prometheus Components

Deciding on our components for Prometheus was challenging because they needed to be reusable and scalable, but they also needed to cater towards providing a specific value to users depending on the product. We decided to start on data visualization as it would appear in a lot in our products and continued from there. The conversation of whether Prometheus should be dedicated to only monitoring-type software is still in the works as we begin design explorations for streaming.

CAM 5.0 Designs

When I joined the CAM design team, they had done a good amount of research and had started work on the overall updated design. We continued to work with the user feedback and designed CAM pages with the intention of creating the most seamless intake of hardware data for even the newest of gamers and users.

Take a deeper dive into the  NZXT Software  experience.

Learnings

It has been an exciting and challenging experience working on such a large design system. I fully enjoyed working with my amazing design team and cross-functional teams to figure out some of the biggest challenges in navigating around scalable components and pages for an array of products. Furthermore, it was a good learning experience for me having had a hand in every part of our system outside of component libraries including research, content, and process.

Something I learned through this entire process is how crucial over-communicating is in creating a design system. The goal was to never have "surprise" design presentations in meetings because it meant that everyone was aware of any updates throughout the process. Once we got the hang of it, meetings became more about confirmation and alignment which helped us move forward more quickly.

With a solid start to our design system, the hope is that this on-going process will keep developing into an evermore efficient and scalable means to building the best experience for NZXT customers and community.

More Work

DOCTORS WITHOUT BORDERS

WEB | MOBILE WEB | COMPONENT LIBRARY

DWB_Slide1.2020-02-21 15_02_27.gif

YAHOO

DESIGN SYSTEM | INTERNAL PLATFORM

mb_yahoo_02.0.jpg