Riot Mobile

Revamping Riot Mobile to create a smoother, more user-friendly experience, while tackling challenges tied to current and potential features.

Timeline

Aug - Sept 2023

Tools

Figma
Miro
Adobe Illustrator

Role

Product Designer

Context

"Riot Mobile" is Riot Games' mobile platform, extending gaming experiences to mobile devices. It offers access to various gaming features and services, expanding the reach of popular titles like League of Legends and Valorant.

Over the course of a two-week design sprint, I reimagined Riot's mobile app, centering the redesign around Valorant and staying aligned with Riot's player-first philosophy. The goal was to create a more seamless and engaging experience for users. Highlights of the redesign include introducing mobile Two-Factor Authentication, streamlining access to in-game information, and offering new ways for players to personalize their profiles.

VALORANT

LEAGUE OF LEGENDS

Problem

Falling Short in Usability and Features

Falling Short in Usability and Features

Although Riot is a well-known gaming company, Riot Mobile struggles with usability issues, lacking crucial features that third-party apps and websites already provide, such as in-game stats, match history, and access to other in-game features. This pushes users toward other platforms, highlighting the urgency for Riot Mobile to improve its offerings and align more closely with player needs.

Research

Review Analysis

Review Analysis

To begin, I visited the Google Play Store to dive into the reviews, aiming to understand the reasons behind users' dissatisfaction with Riot Mobile. Here are a few examples of reviews where users expressed that the app felt pointless or lacked meaningful functionality:

Surveys

Surveys

In order to gain a deeper understanding of the usability of Riot's mobile app for Valorant, I conducted surveys involving a diverse pool of 20 participants, ranging from casual gamers to professionals. The primary aim was to pinpoint any challenges or concerns encountered by these users during their interactions with the app.

95%

of the 20 Valorant players surveyed
said they don’t use the Riot Mobile App.
of the 20 Valorant players surveyed
said they don’t use the Riot Mobile App.
Out of the surveyed participants, only 5% reported using the app, and even they admitted to using it infrequently, citing the superior resources offered by third-party applications and websites. When asked to provide reasons for not using the app, the following pain points were recorded:
"No benefits from using the app and other sites provide more information."
"No benefits from using the app and other sites provide more information."
"I usually get news and updates from twitter"
"I usually get news and updates from twitter"
"There are other apps that provide more features so it's a no brainer to use those."
"There are other apps that provide more features so it's a no brainer to use those."

Competitive Analysis

Competitive Analysis

To identify successful features, I conducted a thorough comparative analysis of Steam, Ubisoft, and Blizzard, pinpointing recurring feature patterns that enhance user experience and addressing issues in Riot Mobile.
Research Conclusion ── Currently, the app only offers basic information and features, and falls short of providing new and active users with enough compelling features to utilize the app consistently to its full potential.

Ideation

Solutions for a Better Experience

Solutions for a Better Experience

After thoroughly analyzing prior research and synthesizing key insights, I developed a set of targeted solutions to tackle the core issues plaguing Riot Mobile. These solutions aim to enhance usability, functionality, and overall user satisfaction.

🔒

Two Factor Authentication

Two Factor Authentication

Two Factor Authentication

This feature leverages the 2FA credentials stored on your phone, providing a secure way to verify your identity through your mobile device when accessing Riot Mobile. It adds an extra layer of security while simplifying the login process.
This feature leverages the 2FA credentials stored on your phone, providing a secure way to verify your identity through your mobile device when accessing Riot Mobile. It adds an extra layer of security while simplifying the login process.

📱

Access to In-game Features

Access to In-game Features

Access to In-game Features

By enabling users to access in-game features directly from their mobile devices, this solution offers unparalleled convenience. Players can track their stats, make in-game purchases, and stay updated on the latest news—all while on the go.
By enabling users to access in-game features directly from their mobile devices, this solution offers unparalleled convenience. Players can track their stats, make in-game purchases, and stay updated on the latest news—all while on the go.

👨‍🦱

Profile Customization

Profile Customization

Profile Customization

This feature empowers users to personalize their profiles, showcasing their achievements and status across Riot’s games. Whether it’s displaying your highest ranks or letting friends know you’re online, profile customization fosters a stronger sense of identity and community within the platform.
This feature empowers users to personalize their profiles, showcasing their achievements and status across Riot’s games. Whether it’s displaying your highest ranks or letting friends know you’re online, profile customization fosters a stronger sense of identity and community within the platform.

Early Design

Wireframes

Wireframes

I brought the vision to life with lo-fi design concepts, crafting each page to address user needs and enhance usability.

Final Design

Riot Mobile ── Players First

This redesign of Riot Mobile was crafted with Riot's core philosophy in mind: "We Are Player First—everything we do is in service of players." This guiding principle drives the creation of meaningful and lasting experiences, and every feature in this redesign reflects that commitment. By prioritizing accessibility, enjoyment, and usability, the app aims to make the gaming experience smoother and more intuitive for players.

From seamless Two-Factor Authentication (2FA) to easy access to in-game stats and personalized profile options, each element is designed to empower users and enhance their connection to Riot's games. This concept not only makes the app more convenient for players but also sets the stage for improved usability and engagement in the future, ensuring Riot Mobile becomes a go-to platform for gamers everywhere.

Reflection

I'm amazed at how much I learned while creating this mobile app from scratch. From coming up with the brand identity to perfecting the final product, this project was incredibly rewarding.

One thing that really stands out is how much I improved at using Figma. Prior to this project, I possessed only fundamental knowledge of Figma, having acquired basic skills from previous UI/UX projects. But diving into Figma's advanced features like auto layout, constraints, and components during this project was eye-opening.

This experience showed me how important it is to keep learning and adapting as a designer. Trying out new tools and techniques not only makes you better at what you do but also sparks new ideas. Looking back on this project, I see the value in always being open to learning and growing as a designer.
The Riot Mobile project was my first dive into the challenge of improving an existing app, and it was both exciting and eye-opening. As I worked within the constraints of an established design system, I found myself constantly brainstorming new features and creative solutions to elevate the experience. Over time, I developed a deeper understanding of what users truly needed—their frustrations, goals, and desires. This insight became the foundation for transforming Riot Mobile into a more intuitive and engaging platform, one that felt fresh yet familiar to its loyal users.
One of the toughest parts of the project was recreating Riot Mobile's assets from scratch. It required a lot of attention to detail—I spent hours comparing my designs with existing screenshots to make sure every element aligned perfectly with Riot's brand guidelines. Despite the challenges, I loved every moment of it. This project taught me that refining an existing app can be just as thrilling as building one from the ground up. It’s a different kind of creativity, one that balances innovation with respect for what already works. In the end, I walked away with not just a polished design, but a wealth of new skills and a deeper appreciation for the art of iteration.
Let's chat...
about design, gaming, and traveling!
designed with love by alvin hu ©
Let's chat... about design, gaming, and traveling!
designed with love by alvin hu ©