The Vision
NZXT is known for its Custom PC Configurator (BLD) that lets users hand-select each part for their new computer. So, naturally we wanted to extend that level of customization to new product lines. Our team had a vision for a future family of configurators. A fully connected experience where a user could customize an entire desk of products, moving seamlessly between each configurator. We even built some rough wireframes and prototypes to bring this vision to life. This was used as our North Star when building each new configurator.
Keyboard & Mouse Configurator
Although customizing a keyboard is very different from customizing a PC, we could still leverage user data and feedback from our existing PC configurator. This would allow us to incorporate any learnings from PC into our new custom keyboard experience.
User Research
We partnered with our Research team to create a survey for users who purchased a custom PC using our current configurator experience. Our goals for this survey were to:
Measure overall level of customer satisfaction
Identify customer pain points in the PC Building experience
Identify features and functionality gaps (opportunities)
We received nearly 500 survey responses. The survey gave us extremely valuable insights into what features were most important to our users, what pain points we needed to address, and what opportunities existed to improve the user experience.
Comparative Analysis
Our next step was comparative analysis and market research. Initially, we focused on other keyboard configurators, but quickly expanded that research into ALL configurators. Including products like cars, headphones, office chairs, knives, and guitars to name a few. This research, paired with data from our existing PC configurator, was pivotal in helping our team gain a clearer picture of how users customize any number of products.
User Flows & Wireframes
We partnered with the Product team to synthesize all our new research into user stories and various other artifacts. Our tool of choice was FigJam for its simplicity and quick collaboration. Creating user flows helped us define entry points, reduce friction, and visualize how the user would complete tasks.
Example of a flow that helped us decide whether the configurator would function as a modal or a stand-alone experience.
Example of a flow that visualizes where upsell/cross-sell opportunities should be introduced to the user.
We then built out wireframes and worked closely with our Product and Engineering teams to iterate early and often. This consistent feedback loop kept us flexible as requirements changed and scope fluctuated.
Example of a flow that visualizes where upsell/cross-sell opportunities should be introduced to the user.
Prototypes
My favorite part of the process was getting the opportunity to create some high quality prototypes for proof of concept and testing. I used Figma to craft many interactive prototypes of the keyboard configurator experience for both desktop and mobile. These were invaluable when it came to understanding interaction at different viewport sizes. We could quickly see what would and wouldn’t work. They also helped our Interactive team communicate specific interactions or animations to Engineering.
One of the first hi-fidelity interactive prototypes I created for the Keyboard Configurator. This iteration exchanged the primary navigation for product configuration steps. It also showcases a more immersive experience for accessories and add-ons.
Above is an example of one of the dozens of prototypes I made for testing purposes. Using Figma allowed us to rapidly prototype and get quick feedback across all teams. This example is at roughly the midpoint of the project. You can see just how much has changed from this point to production.
Figma Prototype for Mobile
This mobile example is much closer to production than the previous prototype. But you can still see elements that were left out due to time or technical constraints. Discerning which features are critical and which ones can be removed or added later is a valuable skill to learn.
BLD Hub
If our goal was to unify these multiple product configurators into a single experience, we needed a home base for the user to return to. I recommended the addition of a BLD Hub to tie it all together. This would not only act as a starting point for all customizable products, it would also offer the user info on the status of their in-progress or saved builds.
Again, we built IA diagrams, and user flows to visualize how a user could navigate seamlessly between each product.
The BLD Hub went through quite a lot of evolution.
Early BLD Hub Figma Prototype
I even built out several working prototypes for the various BLD Hub explorations, including a revamped PC Configurator to match the new visual direction.
We ultimately settled on a more subtle direction that leaned into the dark mode aesthetic. This felt more visually aligned with our brand, but it also helps declutter the UI and directs the user toward clear CTAs for starting a build or resuming a saved build.
Handoff & Launch
A crucial part of the process is handing off approved designs to Engineering. Even though we'd been working in lockstep for months, preparing files for handoff ensures that design requirements are met for all of the many new components introduced in such a large project. I was responsible for providing specs regarding spacing, typography, viewports, and more.
Figma makes handoff easy. Redlines to show size, spacing, and type breakdown for all new components.
After many months of research, design, testing, and iteration, we launched the BLD Hub and Keyboard Configurator experience alongside our new keyboard and mouse products lines. The final product is the result of months of intense collaboration between our Design, Product, and Engineering teams. We made it possible for users to build their custom NZXT keyboard, and laid the groundwork for the next evolution of our BLD service. I’m proud to have led the design for such a key experience on our website.