Hal Milton, Design Director; Pete King, Studio Art Director; Brandon Ulm, Game Designer; Tristan Burnside, UI Artist; and Matt Rowton, Art Lead — Pipeworks Studios
As the first Massive Interactive Live Event, or MILE, on Facebook, Rival Peak uses the Genvid SDK to enable the audience to interact directly with the show’s characters and environment via multiple interactive livestreams. In addition to a Home Stream there is a Character Stream for each of the twelve AI inhabitants – in effect, 13 different simultaneous live camera views. Each stream also includes an interactive overlay – a second set of controls, input methods, and data for viewers to access and activate to affect what they’re watching in real-time.
Rival Peak is a mobile-first experience – while many viewers will watch from desktop and laptop PCs, an even greater number are expected to tune in via the mobile Facebook app. But the interface needed to be identical in terms of viewer options and controls, and simple enough to be immediately understood by anyone tuning in.
Unlike a traditional game, Rival Peak is designed as a quasi-reality TV viewing experience with lots of ways for the audience to engage and interact. As such, the user interface design and implementation represented a unique challenge – how to give even first-time viewers instant impact on what they’re seeing in quick, easy ways that are intuitive, satisfying, and fun for a broad audience. This dictated that we create a minimalist interface design with the goal of providing just enough information that viewers 1) know what they’re looking at; 2) understand what their commitment options are; 3) find reasons to return. It’s a delicate balance between quickly showing viewers how they can engage beyond simply viewing, while being careful not to get in the way of the show itself.
As game developers, the UI design for Rival Peak was quite different from anything we at Pipeworks have ever done before. We set about designing a UI that would exist in a web-based environment, as an “instant game layer” added after the client render but before the combined layers are streamed as a single live, interactive broadcast on Facebook.
With a traditional video game, the UI is in the game, but in this case, the UI exists almost entirely in a separate layer of the video stream. So the ability to control and trigger events and update elements of the interface and the way data propagates to the UI are a bit more complex from a design and implementation standpoint. This is compounded by the fact that some of the UI is in the “game” stream, where the real-time rendering of the world and its inhabitants occurs. Further, because Rival Peak is Facebook-based, viewers will also have access to some of the Facebook UI, including chat and instant messaging, which we expect will be used in interesting ways by the audience as viewer factions organize on a character’s page to assist or sabotage them.
Normally, we design and build the UI in Unity or another game engine, but because Rival Peak is delivered within the Facebook environment by means of data transfer through a stream layer, the UI was built with a combination of HTML, CSS and Javascript, in order to speak with the Genvid SDK that enables viewer interactions to occur in-stream. This helps keep the entire thing light and easily deliverable to a wide range of devices and across virtually any kind of internet connection, but does present challenges in terms of the code and what’s possible. Less complex shapes are used for UI elements, visual effects related to those buttons and other elements are a bit more constrained because related animations have to be coded in HTML and so forth.
Originally, we designed and prototyped the Rival Peak UI for PC; once we knew it would appear as a Facebook Watch experience, we knew that most people would consume it via mobile devices. So we adjusted object resolutions and simplified icons further to ensure that even first time viewers would quickly grok the meaning and method of each, without requiring instruction. So even someone who’s never played a game, whose only point of reference may be watching Facebook videos on their phone, will be able to pick up Rival Peak instantly. For the same reason, we worked around the discovery method of hover states that is so common to PC-based interactive experiences; because hovering isn’t a thing on mobile devices, we crafted the UI to not rely on hovering at all.
The Home stream is essentially each viewer’s homepage in Rival Peak, showing quick live cuts of the twelve characters’ individual livestreams, and providing general controls and options such as news and updates, audio control, viewer leaderboard, and “welcome back” daily log-in bonus. It’s also where the historical information is stored, so viewers can do deep dives into the characters’ pasts, catch up on anything they’ve missed via the weekly recap show archives, and so forth. The twelve character streams, accessible from the Home stream, are dedicated to the dozen AI inhabitants of Rival Peak, and viewers can switch their camera view to any of these first-person perspectives at any time.
Each of the twelve character streams contain the same set of UI elements, which comprise the majority of viewer interaction options as well as information related to the character in question, such as their name, status, current goals and needs, your contribution to their score, and more. Character streams also include a leaderboard for that character, showing your contributions to that character, what percentile your contributions fall under, and the overall top supporting viewers for that character, as well as icons that link to the streams of the other eleven characters. In addition, there are tappable icons to access (text-based) conversations between the character you’re following and one or more of the other characters. These exchanges can be read at any time from within the Dialog menu.
The actions that you the viewer can take to directly affect the characters fall into three categories, called APEs (Audience Participation Events). These are described in detail in a separate essay found here. [“here” is hotlinked to separate ‘APEs of Rival Peak’ essay] Suffice to say that Challenge, Action, and Goal APEs are opportunities to influence the action in real-time, and are presented via various icons around the periphery of the screen. These events allow viewers to help contestants as well as determining their next goals.
Because Rival Peak is more like an interactive reality TV show than a traditional video game, another key reason for keeping the UI relatively simple is to ensure that viewers can engage and immerse themselves to whatever degree they prefer while still having an impact on the proceedings. Some people may enjoy Rival Peak almost as a hyper-detailed screen saver, while viewers at the other end of the engagement spectrum
It’s been fascinating to design, test and implement the Rival Peak UI, effectively building an experience that gives viewers of a dramatic, reality TV experience actual agency in the world they’re observing. As a team, we’re eager to see how audiences react to Rival Peak, and while we’re optimistic that we’ve gotten it right the first time, we’re prepared to modify the UI if/as necessary to maximize viewer’s enjoyment – and impact.
