NZXT Web
WEB | MOBILE WEB | 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.
↪ Actively contributed to IA strategy based on user insights and business priorities.
↪ Designed reusable components for MVP launch and led the creation of the NZXT Design System.
↪ Collaborated with Design, Eng, Product, and Research partners to redesign the NZXT e-commerce website and custom product configurator in web and mobile web.
↪ Supported Creative and Marketing partners to produce successful product campaigns.
PROJECT GOAL
Reimagining the NZXT e-commerce experience from the ground up by redesigning the NZXT website and custom product configurator.
TIMELINE
NOV 2020 - MAY 2021 (MAY 2021 Launch)
CHALLENGE
Reimagining the NZXT
e-commerce experience
NZXT DTC products make up to 60% of our revenue. As we continued to grow as a company and a brand, it was important that we prioritized improving our e-commerce platforms while still maintaining our regular business needs, campaigns, product launches, and partnership programs.
We focused on four high-level improvements:
1. User experience
2. Internal implementation (back and front end)
3. Visual design and consistency
4. Reusable and scalable design
User Experience
Internal implementation
Visual Design and Consistency
Reusable and Scalable Design
RESEARCH & STRATEGY
Delving into insights and strategy
We started by gathering insights on what was impactful to customers in their user journey on the NZXT website. We worked with our UX Research team and narrowed down a few high-level pain points to prioritize first.
FPS Gamer
High Res Gamer
Casual Gamer
Social Gamer
Hardware Enthusiast
Pain Point #1
Two separate websites for custom builds and individual PC parts
Pain Point #2
Website and configurator navigation is not intuitive
Pain Point #3
Design language is not consistent throughout all platforms and pages
Pain Point #4
Pages contain a lot of information with little hierarchy
Pain Point #5
Product detail comparisons and information are not efficient for quick intake
Pain Point #6
Mobile screens are not prioritized
PAIN POINT #1 AND #2
Revisiting the website IA
Finding a solution for pain point #1 and #2 meant we had to make some foundational updates to the NZXT website. We did some user journey research, card sorting, and revisited our IA.
Two separate websites for custom builds and individual PC parts
Remapping IA to combine platforms to one singular point of purchase
Website and configurator navigation is not intuitive
Tree testing and card sorting to align on user priorities
Future Product Enhancement
We are planning on adding future product enhancements to serve as even more of a connection between individual parts, custom configurator, and prebuilds on the NZXT e-commerce website.
"Work Bench" which offers product suggestions and acts as a quick way to find and add related products
Configurator updates that include other customizable products in addition to being able to find those products in retail
PAIN POINT #3 AND #4
Atlas Design System
Our solution for pain point #3 and #4 was to build a dedicated design system created to support the cross-functional web (DTC) teams at NZXT.
This way we could guarantee consistent UI, UX, and visual design throughout the website and configurator. By using reusable and scalable components, we are also allowing for maximum efficiency amongst our design and engineering teams which is always a +1.
Design language is not consistent throughout all platforms and pages
Pages contain a lot of information with little hierarchy
Creating a dedicated design system which contains design guidelines, content guidelines, component library, and tooling information
REUSABLE
Hero Component
Both video and static background capabilities
REUSABLE
Product card Directing customers to detailed PDPs
UNIQUE
Scrolljack
Dynamically animating text while scolling
REUSABLE
Media Object
Flexible layout and composition
Olympus Design System
Atlas is one of two "local" design systems under our foundational design system, Olympus. Take a deeper dive into Atlas or Olympus with the link below!
PAIN POINT #5
Improving how we show product information
There were four main reasons it was challenging for users to absorb the product comparison information:
1) there was to much information at once, sometimes repeated
2) the design of the comparison tables were not user friendly
3) there was no consistency on the placement of the tables
4) the comparison tables were not mobile friendly
Our solution was pretty straight-forward. We worked with content, engineering, and product to improve upon the copy, design, and placement of this component.
Product detail comparisons and information are not efficient for quick intake
Improving on the design, copy, and placement of comparison data
Future Component Enhancement
Although we are all proud of how far we've come in the iteration of this component and so many others, we also understand that it's not perfect and there are always opportunities to improve. We're currently in the works to better what we have today and make this comparison table even more mobile friendly.
PAIN POINT #6
Improving mobile screen sizes
The previous NZXT website and configurator were built mostly focusing on desktop sizes. After the desktop designs were approved, they were then restructured to fit smaller screen sizes. We had gathered data indicating that 43% of our users were accessing the NZXT website using their phones. Although the site was functional as it was, we wanted to improve the mobile experience as much as possible.
As we were designing the site from the ground up, we made sure to focus on all screen sizes although emphasizing desktop and mobile.
Mobile screens are not prioritized
Focusing on components and designs that work well in all screen sizes
PRODUCT LAUNCH
Continuing design and implementation for launch
Our team continued working on the Atlas Design System and the NZXT website and configurator. After some user testing and a lot of collaborative effort between cross-functional teams, we successfully launched the NZXT website and configurator while balancing our business-as-usual needs.
BUSINESS IMPACT
Post-Launch Success
We kept in mind that as an e-commerce business, it would not be unusual to see fluctuation in data depending on the time of year. That said, since the launch of the new NZXT website and configurator, we were excited to see that all our hard work paid off. We also felt grateful for our community and customers for giving us constructive feedback for the future.
19.3%
average increase in Prebuild conversion rate
15.5%
average increase in Custom conversion rate
600k
increased qualified shoppers by the end of 2021
63%
in revenue
DTC 2020 Revenue: 163,013,500
DTC 2021 Revenue: 265,920,976
NEXT STEPS
Global Expansion
NZXT currently provides products and services to countries in North America, Europe, and Oceania. We have plans in the near future to expand further into the Americas as well as Asia.
With that in mind, our team's work will continue to progress and grow in order to provide the best user experience and accessibility to people all over the world.
Learnings
It's been an exciting experience for me to work so extensively on this global e-commerce platform. Because this was a ground-up project not only for design but also engineering, creative, and copy, there was a lot of cross-team collaboration which I really enjoyed and feel like I gained a lot of insight from.
Something I learned is how important process and timeline is for such a major project especially having to juggle designing something new while maintaining regular business needs. I also think practicing designing your MVP (or MUP) and improving upon that is really important. We know that not everything we have live today is perfect, but it's an on-going process and understanding that these designs can and will change is important.
I am so proud of everyone on my team(s) for accomplishing what we have so far and as we look forward, the goal is to continue improving on what we've started.