— My Role
UX Design
UI Design
Visual Design
Concepting
— Credits
Additional UX & Visual Design:
Uriah Shadle
Prototyping & Particle Effects:
Max McKinney
— Acknowledgement
2018 American Graphic Design Award
Nov 2018 | Graphic Design USA
In January of 2017, I was asked to help Dell re-imagine the famous Alienware Command Center software that ships on all Allienware gaming computers. I had been the principal visual designer for the previous software release back in 2012 and was involved in a slew of other Alienware projects over the years – so I enthusiastically jumped at the opportunity.
Partnering with EDG’s, Uriah Shadle and Max McKinney, we set out on an ambitious path to introduce a bold new visual design language that would end up influencing several other aspects of the Alienware ecosystem, including product packaging as well as the industrial design language for that generation of gaming laptops and desktops.
(above) Over the course of several months, Uriah Shadel and I produced thousands of wireframes detailing every moment of the user experience.
SIMPLIFIED UX
One of the things I knew would be a game changer (pun intended) for this re-design would be to destroy the premise that PC gamers, by nature, were somehow more technically inclined than the average computer user, and thereby preferred complex controls to maximize their system performance.
While it is true that many pro-gamers build, modify, and tune their systems themselves… I had a hunch that this same group of users would welcome less cumbersome software experiences so they could spend less time tweaking and more time gaming.
Internal research uncovered that this was hunch was correct and the more we pulled on this thread the more exciting our software offering became.
Using this information as a guiding principle, we rapidly produced individual user journeys, testing the results, and collaborating with our engineering team to strike the perfect balance between complex configuration and simple, graceful interactions.
NON-FLAT
DESIGN LANGUAGE
From the start, we knew we wanted to pay homage to the skeuomorphic design elements I introduced back in 2012, but I was determined to bring a serious level of sophistication and elevated style to the new design language.
Experimenting with subtle gradations, translucent glass UI panels, micro animations, and light / shadow techniques that help establish a clear visual hierarchy… the final design could be categorized somewhere between skeuomorphic and neumorphic (a few years before this term was popularized).
Creating a design language that looked incredible in both dark and light mode was challenging, as was making all of these visual elements possible programmatically, with the aim of trying to make the smallest internal asset library possible. The result was a stunning collection of gorgeous elements that feel less like a configuration tool and more like an immersive part of the gaming experience.
Above: Dark Mode & Light Mode
DARK & LIGHT MODE
A full three years before iOS made switching between dark mode and light mode famous, we introduced this control to Alienware users. I’d been flirting with the juxtaposition of dark and light UI for several years, and had previously introduced the idea in one of my concepts for the 2012 alienware.com re-design.
While Google, Apple and Microsoft were simultaneously wrestling with the benefits of introducing Dark Mode to their software experiences, Alienware software had historically always been dark… so I was toying with how to bring depth and textural quality to a light interface in a way that felt as visually interesting as dark interfaces do with less effort.
For more than just aesthetic reasons though, dark and light mode made incredible sense for the new Command Center as one of our design tenets was to create a software experience that could be tailored to compliment a variety of user profiles, room scenarios, and unique gaming personalities.
REFLECTIVE UI
This was a core element that I dreamed up as a way to better forge a relational experience from user to user.
With so much customization being done to the exterior device itself and peripheral hardware through RGB lighting, I wanted to introduce a method of color configuration that could offer a more immersive and personal relationship to the internal software experiences.
How the Reflective UI works is that the individual UI elements and controls dynamically reflect colors that relate back to a user's personal choices., like system settings, RGB configurations, game preferences, and settings.
The result creates a unique UI presentation for each individual user, making some of the more complex user interactions feel instantaneously familiar.
Above: Alienware Command Center Teaser Video (created by Alienware team)