Engaging a Community to Solve a Mystery

Client

Riot Games

Agency

BOND

Services

Creative Direction
UX/UI
Motion

Goals

Get UGC Submissions from Wild Rift Players: Encourage players to share their own user-generated content (UGC) celebrating the past three years of game play.
Encourage Viewing of Submissions Through a Gallery: Create an engaging platform for users to view and interact with the submissions.
Tell the Story of Detective Ekko and Thresh: Use narrative elements to enhance engagement and create a cohesive storyline.

Challenges

Unifying Diverse UGC: Ensuring a cohesive visual experience while incorporating a wide variety of user-generated content with different design styles.
Driving Engagement: Motivating users to submit their content and interact with the gallery, keeping them invested in the storyline.
Mobile Optimization: Ensuring a seamless user experience on both desktop and mobile devices.

How to construct this dream world?

We explored many different ways to create this experience and landed on a gallery feed which would contain all content (both UGC submissions and game lore and content). This way users would be encouraged to view as much of the UGC as possible and finding the lore elements would become gamified. We discovered along the way though that users needed the ability to sort through the case files to make sure that content was found if needed instantly so we iterated and added an optional sort feature.

Approaches

Strong Branding to Keep the Experience Cohesive

To address the challenge of unifying diverse UGC, we developed a strong and consistent brand that could tie all elements together. This involved:

Consistent Visual Motifs and Color Palette: We used bold visual elements and colors rather than a more simple UI, ensuring a unified look and feel across the site to keep the experience cohesive regardless of UGC styling.
Narrative Integration: The site’s design and functionality were deeply tied to the narrative of Detective Ekko and Thresh, creating a cohesive storytelling experience.

Encouraging Submissions Through Narrative and a Progress Bar

We brought the narrative of Detective Ekko vs Thresh to life through various interactive elements:

Site Takeover and Visual Elements: The narrative was integrated into the site by using Ekko’s skin at the beginning of the campaign. Once Thresh steals the dreams, his skin takes over the site. It’s up to the community to fight back against Thresh and once he was defeated, the site returned to Ekko’s skin.
Progress Bar: A progress bar, always visible at the bottom of the site, showed users how their contributions were helping to defeat Thresh. This bar encouraged continuous participation and interaction.

Implementation

Understanding the Game's Lore and Target Audience

We began by immersing ourselves in the game’s lore and understanding the target audience. This deep dive informed our design choices and ensured alignment with the game’s storyline and themes.

Interactive Detective

The site experience mimicked the game’s dream world and storyline. Key features included:

Scrolling Gallery: A gallery showcasing community UGC submissions was central to the site. We created a photo frame to hold each submission to separate the art from the background. The gallery was a vertical scroll so you could swipe up through it easily on mobile, almost like a social app, and scroll on desktop.
Case Files: Scattered throughout the feed, these case files provided additional narrative context through text, clue videos, and an interactive detective’s desk.
Easter Eggs: Users could explore Detective Ekko’s desk and discover hidden elements using a flashlight controlled via mouse on desktop and finger on mobile, enhancing engagement and immersion. We took the client’s Easter Egg illustrations and illustrated a desk for them to live on, developing several different desks to explore, with corresponding hot spots that could be found when exploring with the flashlight.

Together we can restore the memories

To drive submissions and interaction:

Gamification: The progress bar visualized the community’s efforts to defeat Thresh, with more submissions and engagement leading to progression. Once filled, a celebration animation marked the victory over Thresh, and the site reverted to its original Detective Ekko theme.
Interactive Elements: The interactive detective’s desk and case files encouraged users to spend more time on the site, exploring and uncovering clues.

Results

The campaign was an incredible success, far surpassing the desired submission rate. The combination of gamification, narrative integration, and strong visual branding helped engage the community effectively. Users were motivated to participate and interact with the site, ultimately defeating Thresh and restoring the stolen memories.