Supercell: Clash Royale
Clash Royale is a freemium mobile tower rush video game
Problem Statement
Creating the in-app 'inbox' marketing platform within the Clash Royale game.
Role: UX Design Lead
Team: Strategist, UX Design Lead, Designer, Front end Developer and Back end Developer.
Overview
Clash Royale is a freemium mobile tower rush video game developed and published by Supercell. The game combines elements from collectible card games, tower defense, and multiplayer online battle arenas. There were two main components to this project. First, we had to define and develop what content would appear on the feed and how it would be grouped. Secondly, we had to create a structure that was easy to understand for the user, worked across different media needs (large and small images, video, articles), and was easy for developers to create and replicate.
Content Categories
The content categories the client needed included:
- News - for game specific updates such as introducing new characters
- Release Notes - changes and tweaks in the game like abilities of characters
- Community - podcasts and comments from the users
- Strategy - How To’s
- Fan Art
- Radio Royale - podcasts from in-house
- TV Royale - video content
We found that "Radio Royale” and “TV Royale" were types of content formats (audio and video) and not specific content types and were therefore removed as categories.
Content Formats
In terms of technical requirements, we had to create a news hub that could house four different types of content formats: Article, Video, Image, and external Links. After much deliberation, we decided to create a newsfeed that would allow the user to scroll through 'content modules'.
Base Element
Working with the developers, we defined the smallest amount of content users needed in any content module and defined that as a "small module" or the "base element." The base element for each tile creates specific content requirements which leads to consistency across all tiles and pages. This streamlines the visuals in the feed to create less contrast and noise, allowing for easier consumption.
Modular Tile Framework
Each module will have the same fundamental elements to create the building blocks of the newsfeed. This creates consistency across tiles, while still surfacing key differentiators for various content types.
Media Module
Media content plays on the newsfeed but does not direct to a detail page. It consists of the base requirements and a larger media image.
Main Tile
The main tile will display for any content requiring a detail page (i.e. News, Release Notes, Community and Strategy).
The News Feed
The feed provides an in-app source of information for Clash Royale players that communicates chronological bits of information, prioritizing recency. The main tiles provide previews of the content, and all related content is grouped and displayed in the detail page. For example, all content pertaining to a specific new card release is grouped on one main tile and one detail page
Detail Page
The detail page is where the main body of content lives. Information is more modular, allowing various pieces of information to accrue in one spot. This allows for all related content to be grouped.
Conclusion
Updating and optimizing Clash Royale's "News Royale" is an ongoing project to organize diverse pieces of content and make them easily scannable and digestible. With over 128 million people using the inboxes to learn about updates and new information in the game, it is important to have an optimized news feed.