R6:Siege — Mobile App Concept

A mobile app that keeps you updated with the lastest game news, events, and more.

Process

Product Design
Visual Design

Team

Jeff - Product Designer

Tools

Adobe XD
Photoshop
AfterEffects

Duration

Senior Project (Undergrad)
Two months

Project Overview.

Rainbow Six Siege is a tactical shooter video game under Tom Clancy’s title. It was developed and published by Ubisoft for PC, PlayStation 4 and Xbox One. Two years after launching, the game had reached 25 million registered players.

The game was growing tremendously and there was zero news of any upcoming mobile app. To solve this problem, I designed a mobile app for the game that allows users to check their profile, news, and even make in-game purchases at their convenience and on the go.

Concept — Style Guide

I started off by gathering the color palette of the game. The colors chosen were from the game overlay, navigation, and general layout. These colors were chosen to keep consistency and familiarity with the users. 

As for the fonts, I selected a couple of common fonts. I decided to go with fonts that were already similar to the games. The font choices should add legibility to the mobile app.

The Challenge — Purpose

Without an existing mobile app, it was a challenge to conceptualize a design that would fit the mold of the game but at the same time allow users to be able to follow along with what's happening.

Design — Wireframes

Figuring out a way to keep the identity of R6 (Rainbow Six) in the app so that it is still recognizable to the game itself. This allows the user to easily navigate through the app without being confused. 

With the game being a massive 75GB of data and counting (2017), I wanted to incorporate most of the functionalities of the game into the app without making the app too crowded.

Design — Visual Prototypes

Below are the screens based on the wireframe. Each screen was designed to incorporate some type of feature that the game originally had. It also included new features such as news and maps.

Login screen
Simple startup screen asking for the user's email and password. It allows the user to check the "remember me" box to save the email for the next login.

The screen lets users know to use their existing uPlay account with Ubisoft to log in, otherwise, new users can create a new account. 

After clicking the login button, the R6 loading icon shows while verifying the account info.

Home 
Users can scroll on the home page for daily news, updates, events. This allows users to continuously be up to date with information about the game.

Articles 
An example article page on what displays after the user clicks into daily news & update. Icon image expanded to full width and type hierarchy to allow the user to easily read through the articles.

Profile
Users are able to check their own stats from the game. The profile will display username and avatar, in-game amount of currency, level and rank, PvP (player vs player) and PvE (player vs everyone) stats, and finally player's top three most played operators.

Profile
This page allows users to see what's available in the game store. Users can directly purchase from the app without needing to get onto the game.

Operators (In-game playable characters)
In this operator's screen, the main section will display both "Attackers" and "Defenders" and their corresponding icons on a scrollable page. Clicking on each operator will navigate the user to the profile page of each operator.

Attackers & Defenders 
These pages will display the character model, operator icon, operator codename, specialty, stats, primary weapons, secondary weapons, available gadgets, and background.

Maps (In-game playable maps)
This screen will display all playable maps. Clicking on each map will take the user to the map overview page.

Map overview 
This page will display multiple images of the selected map, map name, and the description of the location. At the bottom, users are able to scroll through to access other maps.

Final Thoughts

Reflection
This was the first mobile app that I designed. I worked on this project for my final semester at undergrad. 

I learned quite a lot while working on this project and enjoyed exploring the different functionalities that can go into a mobile app. 

What I learned and would change 
A couple of things that I would change:

For example, learning about user research and being able to reach out to the player community and interviewing what they would like to see in the app. 

Taking a more minimalistic approach to the app rather than designing the app so close to the game. 

Looking back, one thing I would add is an in-app chat feature!