An Overview
Instead of a single case study, I wanted to create an overview to showcase some of my responsibilities and contributions while at NZXT.
As a senior member of the Interactive Design team, I oversaw the end-to-end design of NZXT.com, led the design and implementation of all custom components, and established and maintained our design system. Additionally, I served as the lead designer for all product configurators, spanning PC, keyboard, mouse, and monitor categories.
Our Design Process
Our design team utilized our own version of the Double Diamond Design Process. Here's a simplified explanation of the steps in our process:
Discover: In the first stage, we explore the problem or opportunity and gather as much information as possible. This is the time to ask questions, do research, and gather insights. The goal is to create a broad understanding of the problem space, so that we can identify the right challenge to focus on.
Define: In this stage, the goal is to narrow down the focus to a specific problem or opportunity. This involves analyzing and synthesizing the information gathered in the Discover phase, and defining a clear problem statement. This is important to ensure that everyone on the team is aligned on which problem needs to be solved.
Design: Once we have a clear problem statement, the third stage involves generating a wide range of possible solutions. This is the time to brainstorm, ideate, and experiment through wireframes and user flows.
Validate: In the final stage, the goal is to converge on a specific solution and execute it. This is where we evaluate and refine the potential solutions generated in the Develop stage, and create a final product, service, or solution that meets the needs of the user and solves the problem.
Graphic by David Artoumian
Overall, the double diamond design process emphasizes the importance of exploration, experimentation, and iteration. By following this process, we could create solutions that are grounded in user needs, and ensure that the end result is both effective and efficient.
Page Layout & Design
One of our team’s primary responsibilities was defining and designing all page types across our website. Regardless of content, the majority of our pages were defined as a Category Page, Collection Page, or Product Description Page (PDP). There were only a few exceptions that fell outside of this structure.
Graphic by David Artoumian
A page’s content structure shifted for each page type based on what part of the funnel it served. Our goal was to educate the user throughout their journey down the funnel, so that each page enabled users to go one layer deeper in their decision-making process.
To create this content structure our team would lead a wireframe working session with project leads from the Product, Marketing, and Copy teams. We would work in FigJam to ensure we didn’t get bogged down in the details. We had prepared lo-fi wireframe elements to represent all existing components within our website. The goal was to leave the meeting with the content order blocked out and the beginnings of some rough wireframes. We found these working sessions to be extremely powerful and collaborative.
The process from messaging, to wireframes, to production.
Our next steps were to take what we learned in that meeting and build out the rest of the wireframe. We would gather feedback through check-in meetings or Slack channels for asynchronous reviews. We would also partner with the Copy team to bring real copy into our wireframes whenever possible. Using real content always improves the design process. It also allowed stakeholders to review copy at the same time as wireframes.
Once wireframes were approved, we worked with our Creative team to craft hi-res assets for the page. This included icons, product renders, animations, video, and key visuals from marketing campaigns. In addition to creating the final assets, our team also assisted with scaffolding and staging pages in our CMS, Dato.
A small sample of a few page designs I led while at NZXT.
Components
Our team was also responsible for both enhancing existing components and designing new ones when necessary. Whenever we designed a new page or experience, we aimed to utilize existing components as much as possible to streamline the design process without burdening our Product or Engineering teams with additional work. If a new component was necessary, it was our job to ensure that it met the acceptance criteria.
Grid Component
When we first launched our website redesign, we employed a few different components that allowed us to align content into two columns, with copy on one side and an asset on the other. We leaned pretty heavily on these components for most of our collection pages. Each component accomplished the same two layouts, but with a few different options. The bigger problem was that our pages were feeling visually repetitive and bland. We needed something that gave us more options for arranging content, and less constraints in terms of visual design.
I proposed a flexible grid component to solve these problems. I worked with my team to prepare a number of example use cases to present to our Director of Product and VP of Software. We were able to showcase how the new grid could not only replace the redundant components mentioned earlier, but could also greatly expand capabilities for layout and design across all pages.
After the grid component passed the acceptance criteria, my team worked closely with Product and Engineering to create design requirements, and define authoring capabilities in the CMS. Our process was simple–design, test, iterate. Being able to see the component in a live staging environment allowed us to test different use cases, viewport sizes, assets, and understand authoring capabilities.
I partnered with another senior designer and two of our Engineering leads to form a design system strike team. We worked together to break down existing components and styles into an atomic system. Here are some examples of how we divided design elements into these categories:
Foundational Styles
Color
Spacing
Typography
Accessibility
Iconography
Atoms
Buttons
Copy / Icon Groups
Notifications
Color Selector
Form Elements
Molecules
Product Cards
Hero Component
Image Carousel
Forms
Organisms
Modals
Navbar
Product Card Grid
Templates
Homepage
Category Page
Collection Page
Product Description Page
We agreed to build our system from the bottom up by taking the existing foundational styles and updating them to meet the needs of both our website and software products. We leveraged Figma Libraries to organize and implement all new styles and components as we worked our way up through each section of our design system. This enabled us to build new pages and experiences faster and with more consistency in Figma.
Examples of some of our foundational styles in the new design system.
This case study is a work in progress. More coming soon!