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
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
Foundational Components
#DBBDFE
100
#C290FE
200
#9B3EFE
300
400
#8A00FC
400
NZXT VOLT
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
Icon Right
Icon Left
Static
Hover
Active
Selected
Test
Inactive
Focus
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
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.
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.