NZXT Web

UI UX DESIGN
SYSTEMS DESIGN
VISUAL DESIGN

ENGINEERING SUPPORT
CREATIVE SUPPORT

NOV 2021 - PRESENT

WEBSITE LAUNCH 05/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

NZXT

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

Shared Design System

01/03

Atlas Design System

02/03

Prometheus Design System

03/03

The Very Beginning

We mapped 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.

Provide a main source of truth for teams across NZXT

Increase efficiency and scalability of building NZXT platforms

Unify design across all NZXT platforms

Maintain on-brand designs

Provide readily available resources for designers and engineers

As we were doing our research on how to best put together this design system, it occurred to us that because NZXT has a number of digital products, we needed to make sure that all our products had a cohesive NZXT branded look and feel but still maintain their individuality as each product has their own purpose and principles. We decided to break out the design system into 3 parts:

Foundational design system
(Shared)

Basic foundational elements of design that span across all NZXT products

 

Elements include:

  • Brand

  • Foundational Components

  • Component Atoms

  • Component Molecules

  • Copy

  • Content

  • Terminology

Atlas Design System (Local)

Dedicated to the DTC e-commerce site and custom BLD configurator

 

Elements include:

  • DS Overview 

  • Foundational Components

  • Component Atoms

  • Component Molecules

  • Component Organisms

  • Copy

  • Content & Assets

  • Design & Eng Tools

Prometheus Design System (Local)

Dedicated to NZXT Software including CAM and CREATE

Elements include:

  • DS Overview 

  • Foundational Components

  • Component Atoms

  • Component Molecules

  • Component Organisms

  • Copy

  • Content & Assets

  • Design & Eng Tools

01 / 03

Shared Design System

To ensure all our products felt “NZXT”, we wanted to include brand guidelines, industrial product DNA, components, and content direction in our shared elements to be used as minimum guidelines.

NZXT Brand & Industrial Product DNA

Purpose

Our purpose is to serve the PC gaming community.
We are relentless in making the experience achievable and seamless for everyone.

Design Principles

  • Blank Canvas

  • Start Light

  • Pure Silhouette

  • Celebrate Negative Space

  • Purposeful Pattern

  • Hidden Gems

Core Values

  • Every Voice Matters

  • Give A Sh*t

  • Do What You Say

  • Keep It Simple

  • Build Scalable Systems

  • Commit to Quality

  • Win Together

  • Learn and Grow

Goal User Experience

  • Systemic Harmony

  • Empowerment

  • Intuitive Design

Voice

Passionate & Authentic
 

Humble & Transparent

 

Knowledgeable

NZXT-design-principles2.gif

Foundational Components

#DBBDFE

100

#C290FE

200

#9B3EFE

300

400

#8A00FC

400

NZXT VOLT

cam-monitoring-light.png

Color

Primary Palette

Secondary Palette

Accents

Greys

Alphas

Alerts

Partners

Accessibility

Type Styles

Typeface
Base Font
Font Weights
Type Scale
Tailwind Resources
Colors

Icons


Regular - 1.5pt at 16x
Light - 1.5pt at 16x
Solid - filled in or 2pt at 16x

tailwind.config.js

module.exports = {          theme: {

        spacing: {

            '1': '8px',

            '2': '12px',

            '3': '16px',

            '4': '24px',

            '5': '32px',

            '6': '48px',

        }

    }

}

Spacing

Spacing Scale
Baseline Grid

Borders

Box Shadows

Accessibility

Microinteractions

Pictograms

Logos

#CEBDFE

100

#A06DFF

200

#8A00FC

300

NZXT VOLT

#5F0BCA

300

 

Component Atoms & Molecules

No Icon

Static

Hover

Active

Selected

Inactive

Focus

Icon Right

Icon Left

Test

Button Text
Button Text
Button Text

Buttons

Anatomy

Button Variants

Sizes

Colors & Emphasis

Shapes

States

Alignment (cards, forms, etc.)

Button Group

Button Label

_________

Include:

Dark Mode

Light Mode

Usage Guidelines

Tokens

Input Options_ General2.png

Form Elements

Anatomy

Labels

Input Styles (single-line, multi-line, icon)

Input States (default, active, disabled, etc.)

Dropdown

Checkbox

Radio Button

Range

Help Text

Validation (required, error, verified, etc.)

Password Toggle

_________

Include:

Dark Mode

Light Mode

Usage Guidelines

Tokens

Nav Patterns

 

Primary Navigation

Secondary Navigation

Navigation States

_________

Include:

Dark Mode

Light Mode

Usage Guidelines

Cards

Notifications

Accessibility

Tooltip

Modals

Toggles

Links

Content

What does it mean to have "good" content?

Copy

The role of copy

Brand Persona & Voice

Language & Style -> Clarity, Brevity, Context, Action, Authenticity

Grammar & Mechanics -> abbreviations, bold, capitalization, dashes, quotes, exclamation points, gender, oxnard comma, etc.

Inclusive Language -> words, phrases, tones

Accessibility -> Resources to accessibility sites/references

Localization -> Resources for translators / contractors / etc.

Illustrations

Illustration Principles

Do’s and Don’ts

Types of illustrations

Terminology

Terms and phrases used throughout the design system and their definitions

Imagery

The role of imagery

Individual shots

Group shots

Full-setup

Product shots

Partnership collab

Do’s and Don’ts

Visual Direction

(homey remote work office (ikea), eco-friendly wooden (grovemade), gaming-centric RGB, clean sleek minimal)

 

Types of images (consider: angles, close up, full setup, backgrounds, props, people, hands, etc.)

 

02 / 03

Atlas Design System

A dedicated, local design system to the NZXT ecommerce website and custom BLD configurator.

The Groundwork

Atlas needed to cater towards responsive web design, so we started with responsive foundational elements i.e. making sure our grid, content widths, breakpoints, type styles, and navigation were all responsive. We focused on components that could be used on the majority of our website and went from there.

 

Along with the components themselves, we also provided specs and guidelines to help engineers easily implement them into storybook and staging environments.

atlas-grid-example2.png

Website & Configurator Design

While we were working on Atlas components, we also kept in mind that a new component library meant a design overhaul for the existing NZXT website and configurator.

 

We focused first and foremost on our users and creating the most seamless user journey possible. We reworked our IA and focused on some high-level pain points.

After a few AB tests and feedback from our product and engineering teams, we were able to produce the pages and components we needed. Aside from working on the BLD configurator and permanent pages like homepage, collection pages, and product pages, we also produced designs for NZXT seasonal campaigns and partnership programs.

Knowing that a large percentage of our users viewed our website via mobile device, we made sure the UX in smaller screen sizes was a priority.

Website and configurator navigation was not intuitive

Tree testing and card sorting to align on user priorities and product requirements

Users were directed to two separate websites for prebuild products and custom build products

Remapping IA to include custom BLD configurator; combined platforms to one singular point of purchase

Product detail comparisons were not efficient for users to quickly intake information

Improving on the design, copy, and placement of comparison data

Pages contained a lot of information with little hierarchy making it difficult for users to consume only what they needed/wanted

Creating design hierarchy guidelines on a component level as well as a product priority level

nzxt-capsule-mobile2.png
nzxt-configurator-mobile2.png
nzxt-configurator-mobile.png
nzxt-product-page-mobile2.png
nzxt-comparison-table-mobile.png

Colors

Borders

Spacing

Icons

Microinteractions

Box Shadows

Accessibility

Logos

Type

Pictograms

Buttons

Form Elements

Modals

Notifications

Cards

Nav Patterns

Tooltip

Toggles

Accessibility

Links