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.
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.
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.
A series of wireframes that illustrate alternative approaches
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.
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.
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.
I designed multiple features to give users as much control as possible over their lighting patterns. This included a "gradient editor" and "wave editor."
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.”
“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