NZXT Design System
DESIGN SYSTEMS
PC hardware company dedicated to serving the PC gaming community by providing builds and parts designed with a balance of beauty and function.
↪ Drove the DS strategy based on existing product and team priorities as well as research done on other successful Design Systems.
↪ Led and actively contributed to foundational (shared) and dedicated (local) design systems MVP while managing and collaborating with one other designer on the Systems team.
↪ Organized and created efficient timelines and governance modals.
PROJECT GOAL
Creating a unified and efficient Design System that is utilized consistently across NZXT product and teams.
TIMELINE
NOV 2020 - JUNE 2022 (Continual work)
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
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
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.
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.
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.
NZXT SOFTWARE
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.