Praise For the Apex M800 User Experience
“I didn't think I'd ever hear myself say this, but SteelSeries has finally nailed it. It's the easiest customization interface I've personally used for a keyboard and they’ve managed to do it without hamstringing the functionality. Good job.”
— Linus Sebastian, LinusTechTips
“Their software really sets things apart with more lighting control that I could ever imagine. You can really do anything you want with the backlighting to make the M800 match your style.”
— Lanoc Reviews
“Overall, the software is a lot easier to use than its counterparts from Razer and Corsair packed with features that will please almost anyone.”
— Ian Miles Cheong, Gameranx
“Overall the software for the Apex M800 was easy to use and had everything you need to fine tune your keyboard with multiple Macros and fantastic lighting. I had many hours of fun going through all the lighting templates and creating my own lighting patterns and colours.”
— Iain, pcgameware.co.uk
“[You] can get extremely creative with the incredibly deep color customization process afforded by SteelSeries Engine 3.”
— Jeff Benjamin, 9-5mac.com
“Big props to SteelSeries for making the software extremely easy and simple to use for the consumers.”
- @randomfrankp, YouTube Personality + Tech Reviewer
Case Study: A Rainbow Keyboard
The Apex M800 Mechanical Backlit Keyboard is the ultimate combination of usability and coolness. It is well known among the gaming community that gamers love to customize their gaming set up with shiny gear (shiny being a relative term, as personal preferences vary widely). The Apex M800 Mechanical Keyboard was the first SteelSeries keyboard designed with an LED behind every keycap. The SteelSeries Engine 3 application allows gamers to customize the color of every LED and create unique dynamic lighting effects.
Caption: A video of the M800 keyboard rapidly cycling through a series of rainbow gradients.
Infinitely Customizable Lighting
A key feature of SteelSeries Products is the ability to create multiple customization profiles - a set of properties for any device that could be modified via our software, SteelSeries Engine. Any key or button on a SteelSeries product can be individually customized to perform a chosen action. On a mouse, which has relatively few keys, it's easy to remember which button triggers which action. As you can probably imagine, if you're using a device with as many keys as a keyboard, it might start getting tricky to remember which keys do what while you're in the middle of a critical, high-octane situation. We wanted to create a more user friendly experience by allowing users to identify key mappings with the assistance of color coding.
If you're totally lost by now, try imaging this: You are sitting in your dark, cozy little gaming cave, illuminated dimly by the light of your PC monitor and the rainbow glow of your brand new SteelSeries M800. You've recently gotten into a retro-style 2d platformer, say, the kind that's strongly reminiscent of a pixelated Super Nintendo game. You want to do some customization that is automatically activated when your game loads. After you open SteelSeries Engine, you select all the keys on the on-screen representation of your keyboard, and disable illumination. Now, the keys are invisible in the darkness. Using your mouse, you select the arrow keys, and use the color picker to change their color to neon yellow. Bam, now you can see just your movement keys. You select WASD - the standard action bindings for most platformers of this kind - and change their color to neon blue. Are you starting to see where this is going? Cool: Moving on.
As the design lead, I had to figure out how to pack all of these customization options into a UI. It had to be intuitive and fun, too.
Caption: An animated gif showing the on-screen representation of the M800 Keyboard. It's cycling through a variety of presets, each with it's own unique lighting pattern. Some are purely decorative, but others lean utilitarian.
Early Sketches
I like to start a challenging new project by sketching, usually the old-fashioned way - with pen and paper. This allows me to brainstorm, and then get input on my ideas before anyone spends a significant amount of time working on it, myself included. (Like my tokidoki journal pages?)
Caption: Three pages from my work journal showing my ideation process. There are several roughly sketched wireframes alongside notes about the user experience.
Wireframes
After collecting feedback on my sketches, I start building out wireframes. For interaction heavy projects like this, I create multiple wireflows that describe user interactions in meticulous detail. They're useful in presentations to stakeholders, and also serve as a crucial memory aid for developers while they build out complex new features over the course of several days, or sometimes weeks.
I intentionally make my wireframes as barebones as possible - even adding ugly red Xs over the irrelevant parts of the interface - so that everyone knows what parts are relevant to a particular discussion.
Caption: An excerpt from a wireflow I created for the M800 key customization experience. When working on complex projects, this strategy helps keep my team focused on one specific aspect of the user experience at a time.
Usability Testing
We figured there were more than a few ways to customize a key's color, and it was hard to say which might be best. We decided to conduct an exploratory investigation where we would give users minimal instructions and observe their interactions with our paper prototype. A paper prototype was a particularly good choice for this investigation, because it was easy to adapt as to a users' choices. A similar point-and-click digital prototype would have been labor intensive to create.
Surprisingly, all users demonstrated a remarkably similar interaction pattern. After a brief discussion of the results, we decided to follow their lead without further ado.
Gallery - Final Product
