The Stratus XL is a wireless Bluetooth controller that gamers can pair with their Mac or PC. The SteelSeries Engine 3 app gives users the ability to precisely modify the performance of the wireless Stratus XL controller.

This was the first controller product added to our SteelSeries Engine 3 customization interface. The initial feature set for the project included: custom button bindings, joystick sensitivity, joystick deadzone area, invert x and / or y axis, and trigger deadzone area. I designed new settings widgets for users to adjust these properties. As with all other interfaces, I designed the widgets so that they could be reused for future controller customization screens with a minimum amount of design and engineering rework.

 

Sketching

After defining requirements for the project, I began exploring different possible treatments with pencil and paper. I kept the process quick and loose so I could move on to wireframes quickly. Sensitivity and deadzone are both somewhat abstract concepts, so I started thinking of visualizations to help users understand how they worked. A running theme with Engine 3 was to design controls that could describe their functions without words or tooltips. This was partially to reduce the user's mental load, but it also helped when it came time to localize the interface for other regions. Translated strings get long and break nice designs. 

Stratus XL sketches - click for full-view

 

Wireframes

Iteration 1

My first round of wireframes was extremely rough. I had a couple goals: One was simply to document all the controls that would be needed in the layout I thought would be close to the final product. With this, engineers could begin work while I continued with design. This documentation also helped me have a productive conversation with the engineering team about whether the ideas I had for the user experience would be possible from a technical standpoint. I prefer to have those conversations early so I can make changes or course corrections before I spend a lot of time working on my designs.

Joystick settings: I envisioned a map that would help visualize the size of the deadzone and the sensitivity of the controller. Moving the deadzone and sensitivity sliders would update the map accordingly.

Trigger settings: The trigger deadzone was tricky. When holding the controller, pulling back on the triggers made them angle in. I settled for a visualization that mimicked the angle. This isn't a perfect, realistic depiction of the physical trigger properties, but what mattered is that it gave users a clear picture of what they were changing.

Version 1 Wireframes - click for full-view

 

iteration 2

After working with engineers and stakeholders, we decided to add more controls and features to the project. I created new wireframes that incorporated these along with more detailed interaction notes. The most significant change is that separate X and Y axis sensitivity was added, so I incorporated separate visualizations for the axis accordingly.

Version 2 wireframes - click for full-view

 

iteration 3

After receiving another round of feedback and adding, even more features were added to the project. Now the maximum value of the X and Y input could also be changed. This stumped me at first, because it was a very abstract concept. Our use case was that it would be beneficial to gamers who played first-person shooter style games. Limiting motion on an axis would make it easier to control the camera and aim, thus improving game performance.

stratus-sketches-2.jpg
 

I devised a new visualization strategy for the joysticks. Heatmaps are a concept many people are familiar with, and for those who aren't, it's an intuitive concept. Here, blue represents slow camera / cursor movement, and red represents fast movement. Instead of plain sliders with a black background, I gave them a rainbow gradient that matched the heatmap, so there was a 1-1 relationship between the colors visible on the slider and on the heatmap.

 

Final design

This is the final design I handed off to engineers, along with detailed style documentation. The unique heatmap (the rainbow ring) changes as the user adjusts the sliders to visually demonstrate the changes to the feel of the joystick (see the animated gif below). Users can adjust the range, sensitivity and deadzone size with the sliders. If the controller is connected, the user can move the joystick and see the graphic representation on the interface move in sync.

Stratus XL final design -  click for full-view

 
  Stratus XL UI in action

Stratus XL UI in action