NZXT Web

WEB | MOBILE WEB | DESIGN SYSTEM

Hero.jpg

UI UX DESIGN
SYSTEMS DESIGN
VISUAL DESIGN

ENGINEERING SUPPORT
CREATIVE SUPPORT

NOV 2020 - PRESENT
WEBSITE LAUNCH: MAY 2021

4 DESIGNERS | 1 DESIGN LEAD | 4 ENGINEERS | 1 ENGINEER LEAD | 2 PRODUCT MANAGERS

PC hardware company dedicated to serving the PC gaming community by providing builds and parts designed with a balance of beauty and function

Goals

Redesigning the NZXT e-commerce and custom BLD configurator platforms from the ground up 

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

smiley.png

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

IA tree testing
NZXT new IA

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

Work Bench mock-up
smiley.png

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

NZXT Capsule Page

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!

smiley.png

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

NZXT page
NZXT mobile page

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.

smiley.png

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.

Check out the NZXT website

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.

More Work

NZXT SOFTWARE

DESKTOP APPLICATIONS | DESIGN SYSTEM

cam-monitoring-dark.png

NZXT DESIGN SYSTEM

DESIGN SYSTEMS

HSL-Colors.png