RiotGames

ProjectFocus

Entertainment+Gaming
Software+Technology

Riot Games

/ Overview

riotgames.com — A digital destination for the world’s most passionate gamers.

Experience Strategy
Content Strategy
Content Guidelines
Creative Direction
UI/UX Design
Art Direction
Accessibility + SEO
Style Guide
Prototyping
Technical Consulting

Challenge

Riot Games has faced challenges with brand equity. Players have not yet established the same familiarity with the brand that they have with their flagship game League of Legends. Additionally, Riot’s current digital presence lacks a cohesive narrative and does not reflect the brand’s vibrant culture or polished maturity.

These pain points were exacerbated by an outdated design, lack of responsive capability and localization, as well as general technical issues. This led to inconsistent editorial standards across their content ecosystem.

Approach

We set out to craft a digital narrative that highlights who the Riot team is, what they do, how they work, and what they believe in. Through this, the goal is to help turn gamers into passionate Rioters. We wanted to create a flexible digital platform that allows the brand to produce meaningful content across the platform. In doing so, we created brand equity and deeper connections with brand fans and potential Rioters around the globe.

BASIC/DEPT®

/ UX Strategy

DIGITAL STRATEGY

We collaborated with various departments at Riot to identify a set of strategic pillars and considerations. After gathering insights, we crafted an overarching digital strategy to properly speak with specific audience archetypes in the right context.

All of this ultimately informed our site experience and architecture. To obtain stakeholder buy-in, we mapped out a vision for the entire experience with wireframes and prototypes.

BASIC/DEPT®

/ Identity Design

DIGITAL BRANDING

With our strategy in place, we worked with Riot to determine visual pillars. These would dictate our design decisions, allowing us to explore multiple iterations across different touchpoints.

The goal of our visual studies was to help us narrow our focus and define standards and attributes of how the brand could come to life in the digital space.

01/10

DragDragDrag

Defining art direction and design language attributes.

Through our explorations, a few key visual characteristics emerged that were tied together by the central concept of handcrafted elements and analog processes, giving an iterative and behind-the-scenes feel to our visual aesthetic.

Typography and colors.

As part of our art direction, we helped the Riot team select a new font family and system as well as brand colors.

Handcrafted elements.

To align with our hand-done and process-oriented concept, we created organic containers and background textures to give the brand an ownable canvas for its content to live in.

Characters and easter eggs.

The site replicates the physical presence of walking through Riot’s office, with large character statues near page routing modules.

BASIC/DEPT®

/ UX Design

EXPERIENCE DESIGN

Our experience strategy paired our visual language with our information architecture strategy to articulate Riot Games’ rich narrative. Combining hand-drawn character sketches, organic photo containers, vibrant photography, and bold headlines, we established a focused and bucketed homepage that guides users to relevant sections of the site.

We worked closely with Riot’s internal UX, design, content, and communications teams to create a modular and flexible framework, enabling them to improve the platform as the business evolves.

Reinforcing the brand throughout the journey.

We centralized and highlighted branded content and media in a way that saliently portrays Riot’s unique culture, story, and point of view throughout the site. By amplifying our global reach, we are able to convey the legitimacy and maturity of the brand and its values.

Building an inherently responsive framework.

While a majority of Riot’s audience is made up of desktop-based PC users, we built the site to adapt across form factors. Our system is highly flexible and leverages animation to deliver personality as well as expertise across the site.

Illuminating careers to attract Rioters.

Working at Riot means being part of a global operation. We communicated this by highlighting regional offices on dedicated career pages. The careers category is divided into different disciplines and office pages to show the company’s diversity of culture and talent.

Sharing recent happenings in the brand hub.

We centralized Riot’s content hub to feature branded content and media, portraying Riot’s culture, story and unique point of view with salience. By providing a section of the site that allows our audience to intuitively discover stories, perspectives, industry insights, and behind-the-scenes content, we indulge the emotional connection and brand transparency that they seek.