What is the Apex M800?

This product is the ultimate combination of usability and coolness. Gamers like pretty lights - this is a fact known to those in the industry.  The Apex M800 Mechanical Keyboard was the first SteelSeries keyboard with an LED behind every keycap. The SteelSeries Engine 3 application allows gamers to highlight keys that are crucial to gameplay, and gives them a way to express themselves.


The skippable TL:DR story

The usability theory behind this product is: Each PC game has it's own set of default key bindings, sometimes many key bindings. Our app also gives gamers the ability to remap keys on their keyboards for ease of use. It's hard to remember every keybinding for every game. Another fact about gamers is they like to play in environments that simulate dark caves so that they get the best picture quality (and possibly because it makes them feel cool, but this is purely anecdotal evidence). It's hard to see your keyboard in the dark, unless it's backlit. Gamers don't really need to see all their keys though - just the ones that are important to their current game.

The product allows our users to set the color of any given key. This can be used as an aid - in UX parlance, it reduces the mental load - so with a quick glance, users can get a reminder of what keys do. For example, I can set my movement keys to one color and weapons switching to a different color. I can set spell keys to a color that somehow reminds me of their function, like blue for water spells or red for fire spells. If I choose to rebind a key to a specially homebrewed function, I can give that a color too, so I remember which key it was that I set.

Users of this keyboard can remap any key, change the color of any key, and add some cool lighting functions that enhance the experience even further. They can make their keyboard do pretty custom animated rainbows. On top of that, our engineers came up with a list of awesome specially programmed lighting effects we wanted to give to our users.

I was the design lead on this project. I had to figure out a way to pack all of these customization options into a UI and make the experience as intuitive as possible and make the experience fun and take responsibility for defining the UX / UI direction of the project, because management was busy and they trusted me to make good choices on their behalf. This was pretty standard for every design project I worked on, though.

</TL:DR>

  The Apex M800 Keyboard can be customized in an infinite number of ways.

The Apex M800 Keyboard can be customized in an infinite number of ways.


My responsiblities

I handled every aspect of the user interface except for code. I started with wireframes and flows, which I then tested to refine the usability of the interface. I broke the project down into small units to fit our Agile cadence, and documented every unit with detailed acceptance testing criteria. After that, I designed and documented the user interface, and produced graphical assets for the software engineers.

The user interface for the Apex M800 keyboard - click for full-view


Early iterations

I started out this project by exploring different ideas through many quick, rough sketches. I reviewed my work with the engineers on my team and iterated through new versions rapidly. After reaching some ideas I liked, I created quick, rough wireframes and documentation to facilitate discussions with my team.

Early sketches of different UI approaches (and some unrelated doodles)

A series of wireframes that illustrate alternative approaches


Design Challenges

Primary Interaction pattern

The team initially struggled to decide on a direction for the primary method of interaction. Through usability testing, I discovered that users intuitively clicked on keys to select them, and then customized them.

We came to this impasse early in the project. I only had barebones wireframes at the time, so I printed them and cut them out. I devised a usability test where I manipulated the pieces of paper for participants to try to emulate screen interactions. I enlisted the help of the firmware engineer, who was my main partner in this project, to note metrics and observations while I facilitated the test. I came up with some basic metrics to measure the prototype's performance. The data gathered during this test provided clear guidance on the most intuitive interaction pattern.

Testing artifacts - click for full-view

Testing artifacts - click for full-view

After testing was complete, I presented my data and observations to get buy-in from the team and stakeholders. Then I created detailed interaction documentation to review with developers, which they then used as a guide while working. I found that this kind of documentation was extremely valuable to my engineers, who used it as a reference while they worked. I gave many of these documents to engineers so they could develop the UI functionality while I worked on refining the visual design.

Page 1

Page 3

Page 2

Page 4

  Select a key, then change the color. This interaction pattern was the final result of usability testing.

Select a key, then change the color. This interaction pattern was the final result of usability testing.

 

Group edit Keys

It was tough to find an easy way to manage groups of keys with the same properties, but I arrived at a few different solutions. Each approach offers benefits for different editing actions.

  SHIFT + CLICK allows users to select multiple keys at once

SHIFT + CLICK allows users to select multiple keys at once

  The "area select" tool let users grab multiple keys by holding and dragging the cursor

The "area select" tool let users grab multiple keys by holding and dragging the cursor

  The "paint bucket" automatically applies effects to groups of keys

The "paint bucket" automatically applies effects to groups of keys

  The "magic wand" tool allows users to quickly select all keys that share the same effect

The "magic wand" tool allows users to quickly select all keys that share the same effect


ColorShift Customization

I designed multiple features to give users as much control as possible over their lighting patterns. This included a "gradient editor" and "wave editor."

  Set the origin point in the ColorShift Wave Editor

Set the origin point in the ColorShift Wave Editor

  ColorShift Gradient Editor

ColorShift Gradient Editor

  ColorShift in action: A wave effect based on preset patterns I designed.

ColorShift in action: A wave effect based on preset patterns I designed.

  ColorShift in action: My own special lighting preset uses a different ColorShift Wave on each row. Video from  LinusTechTips .

ColorShift in action: My own special lighting preset uses a different ColorShift Wave on each row. Video from LinusTechTips.


Conclusion

Over the course of three months, I produced dozens of sketches, over 250 files and assets, and over 20 Agile stories with extensive acceptance criteria. Transparency and collaboration between design and engineering were key to the success of the project. When the M800 Keyboard launched in spring of 2015, many reviewer praised the software's usability.

 

Wireframes and other design artifacts

If you are interested in seeing more of the artifacts I created while working on this project, such as wireframes or design specs, please contact me and I will be happy to run through them with you.

 

Praise for the 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