Years ago I was asked what the difference was between an interaction designer and a visual designer. My answer was a simple, “they figure out how it works; I figure out what it looks like.” While that was obviously over-simplified, I do still think there’s a lot of truth to it.
The wireframes above were supplied to me by the interaction designer I was paired with. We always had an agreement that wireframes should not be taken as art direction. Still, they are a very valuable tool for visualizing the hierarchy of elements on the page.
My job is to respect that hierarchy, along with any functionality or behavior described in the behavioral spec, and either identify the correct components from the HIG, or invent new components, to make those requirements come to life.
In order to help our users find new games they might be interested in playing, we needed to find out what kind of information they’re interested in when shopping for a new game to play. We conducted research to see how gamers find new games, what really grabs their attention, and what they had no interest in.
To take things a step further, we then created a series of protoypes based on our findings. If simply seeing an appealing piece of box art was not enough to convince a user to try a new game, what could we do on hover to help them make their decision?
We tried 3 different hover states:
1. Very minimal, box art still visible, light scrim on top, just a few icons to hint at game features, and the content rating
2. The opposite of minimal, game art is replaced by robust info panel that includes title, publisher or studio, iconography, content rating, description, etc. as well as a link to more details
3. Minimal overlay, similar to option 1, but here we replaced the box art with video of gameplay footage
When all was said and done, option 3 was the clear winner. Our test subjects agreed that real gameplay footage was the best way to help them make a decision as whether a game is worth checking out.
We wanted users to be able to differentiate the games they owned from those they didn’t, quickly and easily, without having to read too much. To that end, we explored the idea of using shape language to help convey the difference.
For games you don’t own, we would show you box (portrait) art. The metaphor being that it’s like shopping for games in a brick and mortar store. The box art is the first thing you see on the shelf, the thing that grabs your attention.
Taking this a step further, as you’ll see below, we also looked at a hover state that shows information not unlike what you would find on the back of a box. The box art catches your eye, and when you want more info, you flip the box over and read the description on the back.
For games you already own, we would show you 16:9 (landscape) art. Why? Because you already own the game, so you don’t really need to look at the box anymore. Now you’re looking at what’s inside the box.
The team went back and forth for quite some time on whether the new GFN should have a fixed layout grid or a responsive one. Responsive certainly seems to be the way of the future, but there were a lot of solid arguments made in favor of a fixed grid due to the huge amount of content we had to deliver and the dynamic nature of the interface we were designing.
I did a lot of good, old-fashioned math along the way, trying to find the magic formula that would make a responsive layout work like a charm.
NVIDIA’s UX team went to great lengths to produce a human interface guideline (HIG), the purpose of which is to provide “a collection of pre-designed components designers and engineers can leverage as they create new user interfaces, so they are not wasting time ‘reinventing the wheel’ for things that have been previously designed. The HIG provides conceptual guard rails to designers, to help focus design direction as it relates to metaphor, layout, navigation, style, and communication.”
As the lead visual designer on GFN, it was my reponsibility to ensure that my design were HIG-compliant. If ever a visual design problem could not be solved using existing HIG components, it was up to me to prove that and come up with a solution that could then be incorporated into the HIG.
Samples from NVIDIA’s Human Interface Guidelines
Just a few of the post-it notes that sacrificed themselves for the sake of a responsive layout
Our target audience consists of a wide variety of users from casual console gamers to long-time PC gaming enthusiasts. As a streaming gaming service, GeForce NOW is aimed at people who enjoy the act of playing big, immersive, AAA titles but who don’t necessarily have interest in building their own high-end gaming rigs.
We chose not to design for extreme, hardcore, or professional gamers who typically would demand a much higher level of performance from their gaming rigs than a streaming service could offer.
Personas referenced for GeForce NOW redesign
“We want all gamers to ingest a large game catalog without experiencing cognitive fatigue. With clear metaphors and content rules, we are building a behavioral model that is easily scannable, rich, and contextual. We are making content easily digestible while reducing cognitive load.”
• Flatten hierarchy; reduce confusion for users and reduce the levels of information that must be traversed
• Organize content according to the user's interests and playing habits
• Leverage the NVIDIA Human Interface Guideline (HIG) to reduce the cost of building cross-platform apps
• Encourage users to engage with the content they own while reducing engagement with content they cannot play
⁃ Reduce operating costs by reducing launches of unowned games
• Accommodate varying levels of publisher cooperation
For over a year, I served as the visual design lead on the project. I was partnered with another visual designer for a short while, but for the majority of my time on the project I was the sole visual design resource.
I worked closely with the UX team art director, the project lead, and 2 interaction designers who, among other things, provided many of the wireframes I worked from and built upon as I explored the new look and feel.
Screen capture of current GeForce NOW app
Complete redesign of the product’s look and feel to coincide with updated functionality and introduction of new features, and to align with company-wide rebranding efforts.
NVIDIA GeForce NOW