Client: NCSU Live & NCSU Libraries

Role: UI/UX Designer

Direction: Shirley Rodgers

Project Type: Tablet Application

Hardware: AMX Tablet

OS: Android

When the James B. Hunt Library first opened its doors in 2012, it immediately established itself as a bastion of emerging technology and innovation in education. In the very center of the campus lies the Game Lab: a one-of-a-kind dream scenario for any fan of gaming and entertainment. The GameLab boasts a 16x9 MicroTile touch-screen wall with 4k resolution, access to almost every console on the market (including legacy gaming consoles), full streaming and multimedia integration, and a fully customizable space complete with varied mic inputs, theater surround sound, colored lighting, and self-tinting windows.

As part of the space's creation, my team was asked to create a touch-screen application that would act as a master remote for the Game Lab: providing students and patrons of the school the tools they needed to manipulate and configure the resources in the room as they saw fit.

The Challenge

Creating the Master Remote for the Ultimate Gamer Space

The heart of the project was that of agency: we needed users from every walk of life to feel like they had the means to control the space around them. The AMX remote for the GameLab was not meant to be something for only facilities or trained individuals to use: instead it was a tool designed to be available to every sleep-deprived freshman as much as every technical professional. Getting to style it to match the futuristic look of the rest of the space was an exceptional treat, though.

Going into the project, our core goals were:

1. Create an accessible, intuitive program that was attractive to novice users as much as experts.

2. Give users the ability to control input for video, audio, media, lighting, and the other slew of bells and whistles the GameLab offered.

3. Match the visual design of the GameLab’s space-age theme.

My Role

As part of a team of two designers and one developer, I co-created the GameLab application from start-to-finish with fellow UI/UX whiz Jordan Lang. The entire project was mapped, framed, mocked-up, styled, and tested by the two of us, and when it was finally implemented for the grand opening of the library, it was immediately put to the test with our graphics skinning the entire program. It performed brilliantly.

The GameLab UI has since found itself updated to match recent trends in design visuals and the library’s re-brand, but the entirety of its core functionality have remained consistent from our first vision.

Choosing a Design Direction

Employing the Power of 1:1 Interfaces

From the very beginning, we were poised with a unique set of constraints for GameLab. Given that the room itself’s main feature was the 16x9 pixel wall, we quickly assessed that the most frequently used function of the remote would be to change the input source and screen layout. This was also set to be the feature most often used by brand-new users, and quickly became the centerpiece of our user journey map.

The AMX control tablet afforded us a lot of screen real-estate, and beautifully mimicked the proportions of the pixel wall. Because of this, the final design settled on a 1:1 emulation of the screen that allowed students to drag-and-drop inputs into sources and manually control source outputs with the tap of a finger. To tie the entire metaphor together, we eventually designed the GameLab home ‘waiting’ screen to pulse and glow slightly, in sync with the Pixel Wall’s screensaver.

User Flows & Maps

Grouping & Organizing Key Interactions

Mapping the user interaction of the GameLab display early on allowed for quick communication with our programming team, and gave them a head-start on developing functionality before they thought they’d be able to. Based on student and faculty interviews, best-practices research, and analysis of similar applications, we generated a map that allowed for every aspect of the room’s control to branch off the main screen.

We prioritized the needs of users as the basis for our initial flows, eventually leading us down the path of mode-based presets with varying control options. We had two main points for the level of agency we provided in each pre-set:

1. Students and patrons were most likely to use GameLab for multimedia entertainment and more passive input, setting up either console gaming or videos. We grouped these pre-sets with the reasonable limits for audio and light modifications.

2. Tech-savvy power users were looking for a fully-customize set-up that they could tailor to their needs. We established full audio, light, speaker, and window control in this mode to give them the choices they were able to employ.

Creating for an AMX tablet meant we were able to play around with both tap and drag-and-drop touch interface options, and these further let us optimize the motions & ease with which the remote could be used. To accommodate for differently-abled users, we also designed the entire interface to work with other forms of input, including traditional mouse controls and hot keys.

Going Live

Power to the Gamers

The design for GameLab went through a number of changes to get production-ready, a number of them based off of visual and engineering changes to the room itself as it was being constructed. However, once implemented, the GameLab AMX control routed users towards their ideal set-up in the space, doing a lot of the work for them in order to reduce mistakes and create a quicker time between starting up and getting gaming.
The "master" input/output screen control for the GameLab is where the magic really happens. Audio and video input controls, lighting, and anything else can be manipulated with ease before applying to the room itself. This allows users to 'see' a demonstration on-screen of what the screen will look like before activating it. These previews were essential in making sure the room itself wasn’t disrupted by possible changes, and gave off the impression of a smooth set-up between changes in presentations or gaming sessions.

The GameLab rolled out with the rest of Hunt Library, and has since functioned as a haven for gamers across campus and across the triangle. It hosts game tests from local game industry professionals at Epic Games as much as it hosts students looking to unwind with a round of PUBG or streaming Netflix.