timeline
Nov 2020 - June 2022
project type
Design Systems
project overview
NZXT is a PC hardware company dedicated to serving the gaming community. Our team's goal was to unify the design language across all NZXT products and improve process efficiency.
contribution summary
Drove overall design system strategy
Co-led and created design systems and accessibility guidelines
Collaborated to organize and visualize timelines and governance models
problem space
As we were working on improving the NZXT e-commerce experience, we found that we needed a design system to help unify all NZXT products. The main question we asked was how might we achieve this given each product had their own purpose and principles?
approach
We did a deep dive into several successful design systems before deciding on the best approach for our use case:
Atlassian Design System
Github Primer
Spotify Encore
Shopify Polaris
Microsoft Fluent
We decided to create one shared design system that could span across all NZXT products, and then create dedicated design systems for specific products. This way, we would have a foundational source of truth and also maintain each product's priorities and personality. Our team worked on the design systems while simultaneously accomplishing our respective tasks on e-commerce and software products.
📣
Unified design and one source of truth
📈
Increase efficiency and scalability
🌟
Maintain on-brand design
🧩
Readily available resources
olympus
Olympus is a shared design system containing all foundational elements that span across every NZXT product. The goal of sharing these elements is so all products are easily identifiable as 'NZXT' and to help improve team efficiency.
What this looks like:
Brand elements, styles, components, content guidelines, governance model
atlas
Atlas is a dedicated design system supporting the cross-functional e-commerce (DTC) teams at NZXT, meaning its focus would be on all things e-commerce, partnerships, and campaigns. We prioritized responsive design and reusable components first, but also alloted time for net-new and custom components where needed. We also created specs and guidelines for more efficient design and implementation within Storybook and staging environments.
What this looks like:
Responsive grid, components, type scales, navigation, design and component guidelines
Take a deeper dive into NZXT DTC where Atlas is utilized.
prometheus
Prometheus is a dedicated design system supporting the cross-functional software teams at NZXT. Since NZXT software products up to this point functioned as responsive desktop applications, our design system needed to fit those expectations. The Prometheus components needed to be reusable, scalable, and needed to cater towards providing a specific value to users depending on the product.
What this looks like:
Responsive grid, components, type scales, navigation, data visualization, design and component guidenlines
learnings
It has been an exciting and challenging experience working on such complex design systems. One of the biggest challenges for me was figuring out how to navigate around designing scalable components and pages for very different products with very different needs. Being a part of every step of our system creation including design, research, content, and process, I learned how crucial over-communicating is this type of working situation. The goal was to never have a 'surprise' presentation because it meant that everyone was aware of updates throughout the process. Once we got the hang of things, meetings became more about confirmation and alignment which helped us move forward more quickly.
With a solid start to our 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.