Welcome to Monthly Makeover, a new content series for the blog. Once a month, I'll reveal a design I've been working on behind the scenes. I'll be picking print, digital, and interactive designs to completely re-design for usability, aesthetics, or both — designs and experiences I interact with frequently and think could use a push in one direction or another. Thanks for joining me on this journey, and I'm excited to unveil my inaugural Monthly Makeover design: The Interface for the WWE Network.
If you know me, you know how much I love professional wrestling. (And if you don't know me, try out my handy new contact page and let's become friends.)
WWE is a brand always on the forefront of everything (not just pro wrestling), and 2014's launch of the WWE Network cemented their status as an innovative yet accessible worldwide media brand. I am a subscriber to the network and have been since its launch. It has thousands of hours of current and vintage content, and at least two nights a week, it's all we watch.
Using the app is always a bit of a rocky user experience for me. Even after almost three years, I have trouble finding my active place within the app due to the UX of multiple navigation bars and a confusing hierarchy between current, rollover, and visited states. This is the main issue I set out to solve with my makeover, and I made some aesthetic updates, as well.
The platform can be accessed through streaming devices like Amazon FireTV Stick, Apple TV, or PlayStation, which is the user interface I chose for these designs. I created a more uniform navigation system that uses color changes and simple graphic treatments like underlines to allow the user to not only clearly see where their active "cursor" is, but also to easily be able to re-trace their steps through the platform.
This solves the problem I've had with the current layout, which uses red as both the "active" and the "visited" state treatment. I find that the use of red in the original design promotes these visited states upwards, rather than downwards in the UX hierarchy, often making me lose my place and wonder where I am on the page. In the makeover, red is solely reserved for showing where the user currently is on the page, with visited states now treated with a simple, white underline.
I've also updated the universal backgrounds and navigation to be monochromatic, which is a two-fold decision — 1) Reserving full-color imagery and text solely for the elements the user is currently interacting with limits the confusion of "Where am I?" and draws the eye to the active state. 2) WWE is a brand all about legacy and history, and the brand uses this platform as its vault of treasures. (The brand's current bumper slogan is "Then. Now. Forever.") Using this black and white imagery inspires this feeling of nostalgia, even when used with present-day images.
Most elements within the new interface design are dark with bursts of bright color, reminiscent of a WWE live event. When the lights go down in the arena, it's electric. And within moments, you're met with a fully lit jumbotron introducing one of your favorite Superstars or with a July-4th-worthy spectacle of bright, booming pyrotechnics. (Need proof? Scroll back up to that SummerSlam '16 thumbnail. Wowzers.)
All in all, the current state of the platform doesn't have a huge usability curve. I'm a frequent user and a huge fan of it, so this re-design is just as much an ode to its successful features as it is an attempt to improve its UX. (And any chance I can get to dip my design toes into the waters of my favorite brand, I'll take it. So I did!)
Thanks for joining me for this month's Makeover. I'll see you next month.