mobile game ui
Rainbow Six Mobile
Company
Company
Ubisoft
Ubisoft
Year
Year
2022—2026
2022—2026
Work
Work
game ui
game ui
The work I did for Rainbow Six Mobile covered a large portion of the UI/UX process, ranging from early UI concepts, low fidelity wireframes, simple prototypes in Figma, final asset creation, high fidelity mock-ups, integrating UI in the Unity game engine, to bug fixing if it was considered within a UI artist’s scope.
Below is a sampling of the work I've done and can share.
The work I did for Rainbow Six Mobile covered a large portion of the UI/UX process, ranging from early UI concepts, low fidelity wireframes, simple prototypes in Figma, final asset creation, high fidelity mock-ups, integrating UI in the Unity game engine, to bug fixing if it was considered within a UI artist’s scope.
Below is a sampling of the work I've done and can share.
Operator ability icons
Operator ability icons
Icons designed for each operator to represent their unique gadget or ability. The main use is to be shown to players on the HUD as a button to activate the operator's specific unique gadget or ability.
Icons designed for each operator to represent their unique gadget or ability. The main use is to be shown to players on the HUD as a button to activate the operator's specific unique gadget or ability.
Released operator icons that I had a hand in designing.
Art guidelines for the ability icons, which were proposed by associate art director.
Screenshots of places the operator ability icons appear in-game.
Game mode icons
Game mode icons
Icon concepts for visually representing different game modes. Main use case was to be shown alongside other information on the game mode/playlist selection screen.
Icon concepts for visually representing different game modes. Main use case was to be shown alongside other information on the game mode/playlist selection screen.
Approved final icons.
Some unused icons made during concept exploration.
Game mode icons on the game mode selection screen, and when loading into a map.
Top view maps
Top view maps
Top view maps made from overhead renders of the gameplay environment, which were provided by the Maps team. Used in marketing to showcase new maps, as well as by e-sports teams to talk strategy.
Top view maps made from overhead renders of the gameplay environment, which were provided by the Maps team. Used in marketing to showcase new maps, as well as by e-sports teams to talk strategy.
First floor of building on Border map.
Second floor of building on Border map.
Zoomed out view showing all of the exterior of the Border map, and showing where Attackers can spawn.
Top view maps on social media for promotion.
Inbox redesign
Inbox redesign
The previous inbox existing in-game was quite barebones, and lacked some functionality in the backend for sending messages and items to players. A game designer went over his initial Feature Sign Off document, and together we collaborated with the programmer working on this feature to get the best experience we could within the tech and time constraints we had. A quick Figma prototype of this feature can be found at this link.
The previous inbox existing in-game was quite barebones, and lacked some functionality in the backend for sending messages and items to players. A game designer went over his initial Feature Sign Off document, and together we collaborated with the programmer working on this feature to get the best experience we could within the tech and time constraints we had. A quick Figma prototype of this feature can be found at this link.
Inbox GENERAL tab.
Rather than having one long list, and needing to tap on a message and have a pop-up appear with the contents of the message, the inbox was designed to look more like a traditional e-mail inbox. The READ and UNREAD tabs were also combined into one GENERAL tab, which became unnecessary with new visual states to better distinguish if a message has already been read.
Rather than having one long list, and needing to tap on a message and have a pop-up appear with the contents of the message, the inbox was designed to look more like a traditional e-mail inbox. The READ and UNREAD tabs were also combined into one GENERAL tab, which became unnecessary with new visual states to better distinguish if a message has already been read.
UNCLAIMED REWARDS tab.
Unclaimed rewards behave differently than the messages in the GENERAL tab, so they still needed their own tab. They never expire, and disappear once the reward is claimed.
Unclaimed rewards behave differently than the messages in the GENERAL tab, so they still needed their own tab. They never expire, and disappear once the reward is claimed.
Linking Account message comparison.
Message state icons.
The unread/read message icons were pre-existing, and I created the unclaimed/claimed items icons to match them and create a small icon set.
The unread/read message icons were pre-existing, and I created the unclaimed/claimed items icons to match them and create a small icon set.
Premium pass purchase screen redesign
Premium pass purchase screen redesign
To encourage more purchases of the Premium Pass, a redesign was done to better show the value of the Premium Pass and what is included, as well as making it easy to re-skin each season with new assets. Wireframes were made by a UX designer, and I created the high fidelity mock-ups based on them. I also assisted in integration, working with another UI artist and UI programmer.
To encourage more purchases of the Premium Pass, a redesign was done to better show the value of the Premium Pass and what is included, as well as making it easy to re-skin each season with new assets. Wireframes were made by a UX designer, and I created the high fidelity mock-ups based on them. I also assisted in integration, working with another UI artist and UI programmer.
Mock-up of the main Premium Pass purchase screen.
The main purchase screen allows you easily see what is included in the Premium Pass, and what is added when purchasing the Premium Pass Elite. There is a list of what is included for both that can be seen and compared side-by-side. When integrating the ui, the new operator, exclusive skin, and background images were set up as individual assets that can be swapped easily. Designers set-up in the back-end what rewards are included in the two passes, and that populates the two lists. Tapping on the titles above the lists brings you to a 3D item showcase screen to preview the rewards.
The main purchase screen allows you easily see what is included in the Premium Pass, and what is added when purchasing the Premium Pass Elite. There is a list of what is included for both that can be seen and compared side-by-side. When integrating the ui, the new operator, exclusive skin, and background images were set up as individual assets that can be swapped easily. Designers set-up in the back-end what rewards are included in the two passes, and that populates the two lists. Tapping on the titles above the lists brings you to a 3D item showcase screen to preview the rewards.
Mock-ups of the item showcase screens.
To more closely view the items included, we repurposed our 3D item showcase screen. Players tap on the item thumbnail to see a 3D model and some details on the reward. There are separate screens for the Premium Pass and Premium Pass Elite, with each having slightly different styling.
To more closely view the items included, we repurposed our 3D item showcase screen. Players tap on the item thumbnail to see a 3D model and some details on the reward. There are separate screens for the Premium Pass and Premium Pass Elite, with each having slightly different styling.
In-game screenshots of the Premium Pass purchase screens when the Chain Reaction was live.
There have been minor changes to the screens since they were initially redesigned, but the original concept is still there and being re-skinned for each season.
There have been minor changes to the screens since they were initially redesigned, but the original concept is still there and being re-skinned for each season.
Premium pass item thumbnail concept
Premium pass item thumbnail concept
Below are the concepts and final idea made for a generic thumbnail image that would be shown to players when they purchased the Premium Pass in our Coda Shop, an external website outside the game, where they can purchase the Premium pass or in-game currency. The original idea was that the image would be generic so it could be used for every season and stay evergreen.
Below are the concepts and final idea made for a generic thumbnail image that would be shown to players when they purchased the Premium Pass in our Coda Shop, an external website outside the game, where they can purchase the Premium pass or in-game currency. The original idea was that the image would be generic so it could be used for every season and stay evergreen.
The three concept images.
There were three concepts I came up with for this thumbnail image, a season badge, a coin/token (proposed by the associate art director), and a ticket to represent the Premium Pass.
There were three concepts I came up with for this thumbnail image, a season badge, a coin/token (proposed by the associate art director), and a ticket to represent the Premium Pass.
Season badge concept process.
I started with a vector version of the season badge in Illustrator, brought it into PhotoShop and used a parametric filter to make it look like an embroidered badge, then brought the image back into Illustrator and used the basic 3D tools to give it perspective and depth.
I started with a vector version of the season badge in Illustrator, brought it into PhotoShop and used a parametric filter to make it look like an embroidered badge, then brought the image back into Illustrator and used the basic 3D tools to give it perspective and depth.
Screenshot of the coin/token in Blender.
I went into Blender and made a quick and dirty model of the coin/token. I exported some of the design from the season badge concept to stamp on a design. I then brought it into PhotoShop and added a background along with some other slight editing.
I went into Blender and made a quick and dirty model of the coin/token. I exported some of the design from the season badge concept to stamp on a design. I then brought it into PhotoShop and added a background along with some other slight editing.
Flat image version of ticket concept.
There was some previous unused work for a ticket design done by another UI artist, so I went into their file and made a premium pass themed version of their design. I then took another file of theirs to do the final mock-up of the ticket.
There was some previous unused work for a ticket design done by another UI artist, so I went into their file and made a premium pass themed version of their design. I then took another file of theirs to do the final mock-up of the ticket.
Chosen season badge concept after changes.
The chosen concept was the generic season badge, but more golden to feel more premium. In the end they decided they would make a new asset each season and this concept was scrapped.
The chosen concept was the generic season badge, but more golden to feel more premium. In the end they decided they would make a new asset each season and this concept was scrapped.
Other miscellaneous work
Other miscellaneous work
Some other smaller things I worked on for Rainbow Six Mobile.
Some other smaller things I worked on for Rainbow Six Mobile.
A few concepts for the hacked camera overlay.
A few of the concepts created for the overlay that appears when using a camera hacked by the operator Dokkaebi. In the end, none of the concepts were used, and instead the same image that Rainbow Six Siege uses for the overlay was chosen to maintain consistency between the two games.
A few of the concepts created for the overlay that appears when using a camera hacked by the operator Dokkaebi. In the end, none of the concepts were used, and instead the same image that Rainbow Six Siege uses for the overlay was chosen to maintain consistency between the two games.
Edge tap and double tap zones being shown on the HUD customization screen.
We wanted to show the areas on the HUD customization screen where the double tap and edge tap zones are located, so players can keep this in mind when customizing their layout. We landed on this as the approved visual for the zones, but the gradients and lines were taken out once it was integrated, since they didn't slice well, were tricky to make responsive for different screen sizes, and large image assets weren't desired from an optimization point of view.
We wanted to show the areas on the HUD customization screen where the double tap and edge tap zones are located, so players can keep this in mind when customizing their layout. We landed on this as the approved visual for the zones, but the gradients and lines were taken out once it was integrated, since they didn't slice well, were tricky to make responsive for different screen sizes, and large image assets weren't desired from an optimization point of view.
Sledge's breaching hammer crosshair in-game.
The crosshair that appears when Sledge brings out his breaching hammer. The crosshair changes to be red if the ability is unable to be used or the surface cannot be destroyed.
The crosshair that appears when Sledge brings out his breaching hammer. The crosshair changes to be red if the ability is unable to be used or the surface cannot be destroyed.
Various icons that I've designed that can be found in the game.
Various icons that I've designed that can be found in the game.
An assortment of icons I've made that appear in the game.
Concepts made while designing the approved icons that appear in-game.
© Jackie Markiewicz.