Clash Royale

UX/UI Website Design.

Information

Supercell reached out with a vision to create a unique website concept for their game, Clash Royale, allowing users to learn about the game and its characters. Together with their team, I designed a website for the online experience transforming all its content in a seamless integration between desktop, tablet & mobile devices with a focus on educating the visitor on how to play the game as well as showing off all the amazing artwork, arenas and the characters. The result was an experience designed with a thread taking the user through a beautiful story, scene by scene!

Assignment

To design a website for the game that shows off all the features, characters and levels in a fresh, innovative and intuitive UI that helps users understand how to play the game.

Objective

To create an online experience to promote the game itself but first and foremost serve as an educational tool to educate users on how to play and experience the game.

Project Includes

Design Ideation
Design Direction
Concept Design
Final Design
Design Prototype

Year

2017

Responsive down to mobile

The website was designed to respond to mobile screens seamlessly. All scenes, characters and video were carefully cropped for maximum impact on various mobile devices and all interactive components such as carousels and other media galleries were converted down to a piece by piece modular format to achieve the best viewing experience possible.

Getting to know characters

A big part of the game is to understand all the characters featured throughout all the different levels. All the Clash Royale characters come with different strengths and features and the website was designed to feature all the attributes within fluid templates using video, galleries and other interactive components. Users could choose to dive deeper in to specific information and stats but also purchase specific products from their favorite characters as the individual character pages provided an e-commerce component with selected content.