A mobile app that keeps you updated with the lastest game news, events, and more.
Jeff - Product Designer
Senior Project (Undergrad)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
MHCID Capstone ProjectCapstone Project
Effects of COVID-19 on Remote WorkSynthesis Paper
STEAM Redesign ConceptUI Design
National Geographic AppProduct Design
Interactive Election Map & MoreProduct Design
ABC News Election 2020Product Design
Article Transmission ProjectProduct Design
R6 SiegeMobile App Design
PlantrMobile App Design