Digital Product Design Case Study

GMMK 3 Boardsmith

Boardsmith is a web-based custom keyboard builder on the Glorious online storefront. It empowers users to tailor every aspect of their mechanical keyboard, from cosmetic elements such as case color to technical details like the material of internal gasket mounts.This product design presented a challenge due to the sheer amount of available customization options and the need for the customizer to be approachable for everyone—not just keyboard enthusiasts.

• Learn More

Information Architecture Project

Spectre Divide Battlepass

The front-end screen for the Battlepass in Spectre Divide, a 3v3 tactical shooter video game, is built using many widgets each with many different states. I created logic flows to show when each widget state should appear and task flows to show what happens when each state is selected by a user.These flows help make up a 150+ page document detailing every aspect of how the battlepass appears and functions.

• Learn More

Glorious GMMK 3 Boardsmith Digital Product Design

"Designed by You. Made with Glorious."

Project

Custom mechanical keyboards are a rite of passage for both gamers and typists alike, but the barrier to entry has typically been quite high. Building a custom keyboard can involve buying expensive components from various manufacturers, ensuring that those parts will be compatible, and assembling those pieces into a working keyboard.With the release of the GMMK 3 keyboard, Glorious aimed to make a fully customizable mechanical keyboard that customers could create from the comfort of their desks. As a UX Designer, I aimed to create a “configurator” on our website where anyone could design their ideal keyboard in one place, without needing to worry about compatibility or assembly. I worked with the GMMK 3 product manager, marketing team, and design team."From form factor to finishing touches... Glorious Boardsmith is the custom keyboard equivalent of an RPG character creator, watching your baby come to life."
- Damien Mason for Club386

Challenges

Figuring out the logic underlying Boardsmith was a huge undertaking as this project involved over 200 product SKUs. Certain components depended on others, such as language informing available keycaps, meaning that I needed to ensure that users made some selections before others.Boardsmith needed to cater to keyboard enthusiasts and those without any experience customizing a keyboard. Some customizable aspects of the GMMK 3 were more technical, so I needed to ensure less knowledgeable users felt informed without causing enthusiasts to feel like they needed to slog through unneeded advice.

Process

My first step in designing Boardsmith was to meet with the product manager for the GMMK 3 project to understand both the plethora of components available to users interested in building their custom GMMK 3 and the dependencies of those components. I started by listing every component, sorting them by type, and noting the possible dependencies.

With this information, I determined four dependencies for the components within Boardsmith: the keyboard language, size, connectivity (wired/wireless), and type of keyboard switches. The circuit board, called the PCB, needed to be the base of each potential keyboard build as each combination of the four dependencies corresponded to one of thirty possible PCBs for each custom GMMK 3.I opted to ask users for their preferences across the four dependencies in the first step of Boardsmith. This allowed us to pinpoint their ideal PCB without overwhelming them with choosing between 30 similar-looking options.With the first step determined, I created an initial flow of the keyboard component selections arranged in the order in which the user would need the components if they were physically building the keyboard.

At this point, I started conversations with the UI designers. We looked at product customizers on various websites. We especially liked the way Converse displayed their product while customizing and took some inspiration from that. However, unlike their configurator, we had to think about adding images for components that would be hidden in a normal view and how to present the selections that weren’t purely visual.I reviewed the flow I had created with the product marketing team prior to wireframing. They noted that the order of components in the flow put the more technical components first, which might intimidate some customers. I rearranged the flow to have more approachable cosmetic options at the beginning of the Boardsmith and the more technical aspects toward the end. I also wrote out the logic that needed to be applied at each step to display the correct options in order to provide more clarity for future development.

With the order of the screens determined, I began ideating low-fidelity wireframes to explore design ideas. I created more than one screen for many of the components to visualize different ways that options could be shown to the user.

I received feedback on that initial wireframe and resolved the visual direction. I added tooltips to the more technical customization steps, such as gasket module material. A keyboard enthusiast would be able to breeze through these options, but the average customer would need a little help selecting the right option for them. Adding tooltips made this information readily available for those who needed it.“If you’re not in the hobby, you probably don’t know why you’d even want to customize the gasket module on your keyboard - I certainly didn’t… Luckily I didn’t need to, because the GMMK 3’s ordering process does a great job of walking you through each part and explaining how the choices will impact the feel and performance of the keyboard in the end.”
- Eric Switzer for TheGamerI then created an annotated wireframe for handoff to the UI designers and development team. I additionally created a list of all of the products that could potentially be shown on each screen, along with the conditions for showing certain options. This provided developers with a reference for every possible variant of each screen.

From here, the UI designers created the final look and interactions for Boardsmith utilizing my designed architecture.

Result

The GMMK 3 keyboard launched on Sept 10, 2024 and was available in nine pre-built variations or to customize via Boardsmith. Over the first 30 days, 947 keyboards were built and sold via Boardsmith for a total of $89k in net sales. In that same period, only 277 of the pre-built variations were sold. While a personalized keyboard is inherently more appealing than a pre-built model, the high number of completed sales indicates that the process was easy to navigate and offered a delightful experience to customers.“Going through Boardsmith to create your very own personalised device is a joy, and I’ve yet to see any other configurator pay so much attention to the typing feel. This is all the more impressive when considering how intangible typing feel is to describe, yet through a combination of switch, gasket module, and plate material choices and onomatopoeia, Glorious conveyed to me exactly what I needed before clicking that purchase button.”
- Damien Mason for Club386📍The GMMK 3 Boardsmith is currently live on gloriousgaming.com! See it for yourself →

• Home

Mountaintop Studios' Spectre Divide Battlepass Component States and Flows

"Welcome to Breakwater."

Project

When it comes to free-to-play video games, battlepasses are a familiar sight; players can purchase a battlepass and progress through the tiers to earn rewards such as cosmetics or in-game currency. In this way, the studio behind the game can make money, but players aren’t forced to spend anything to simply play the game.As a UX designer, I worked with the UI/UX lead and live service product owner to create flows that connected the UI designs with the product requirements in a specification document. This document was handed off to UI technicians, platform and system engineers, and QA testers.

Process

The UI/UX lead and I identified "widgets" within the battlepass screens that would need to display different states depending on multiple pieces of logic. Each widget would require documentation of all possible states, as well as what logic or interactions would inform those display states.

Below are selected pages from the specification document to outline the logic flow work done for the CTA buttons on the right side of the screen.

Result

Along with the UI Specifications, these flows and component state matrices made up a 150+ specification document that was handed off to developers for implementation.Spectre Divide Season 1: Flashpoint launched on Feb 26, 2024.

• Home