Ubisoft Toronto NEXT 2020 Competition

Overview		Challenge		Role
This project was an exploration into game UI design and also applying what I’ve learned in my courses into this competition. This competition was to modernize a UI from an existing Ubisoft IP, which followed a brief and criteria on what the judges were looking for. The final deliverables were given in a form of a UI style guide, UI mock-ups, and also UI animations. The overall project was placed 2nd place in the competition.		UI can be challenging especially in video games as it provides the user with something to interact with and to read information from. Although, older games follow old design practices and are often not up to speed with modern design practices. With this in mind, how might we modernize a UI from a game that was developed in 2013, while keeping in mind accessibility and design?		This project was a individiual competition (no teams allowed). I worked on all aspects of the UI from start to finish, in addition to the animations in After Effects. A total of 3-4 months were given to complete the piece of submission, which included a mid-competition review from the judges.

Designing a game UI from scratch?!

One word that can describe this entire project/challenge is, passion. I love video games and pay a lot of attention to the UI/UX. The aspiration of working in UI/UX at a top AAA studio like Ubisoft is a dream and a career goal. This challenge was centered around creating a UI style guide and mock-ups of a specific game from Ubisoft Toronto. Two were given, Splinter Cell: Blacklist and FarCry 4. I chose Splinter Cell as my strengths were in that area of genre. At first, I thought it would be easy, but I had to pay attention to a few things:



Accessibility, making it legible for colour blindness and near-sightedness		Readability, easy to follow and navigate the menu		Design, ensuring that the type, layout, and visuals are in-line with branding

I had to balance this with my school and club work, so it was fun balancing all of that and taking the time to work on this. I was excited and raving to work on it during the weekends and whenever I had the time.

The obstacles

This challenge was insanely tough but one thing that got me through the various challenges was iteration and taking that step back to think about the overall player UX and design. Without a doubt, I encountered two major challenging things:



	Balancing accessibility with design		UX and information hierarchy

Those challenges made me think how players can interact with a menu or HUD. I went with a typographic and simplistic look, to not overload the player’s mind so that they can get into the menu and instantly know how to use it. Keeping it simple was the core concept and one of the major pillars for my design, as I see it as a trend for next gen game UI.

Final HUD Mockup

Accessibility was a critical thing for me to take into consideration (not only it was in the brief), as it was something important to me as a designer and to show that I understand how to design something that is accessible. To combat this, I implemented into my designs:



Type with icons, to enable those who are colour blind to understand layers of information without colour		Large text (more than 18px), such as headers to ensure that players can quickly read the menu from a distance		Using contrast to make text and icons be clear to those who are visually impaired

I constantly referred to the Association of Registered Graphic Designer’s guide to accessibility practices, which was a great resource to refer to when designing my mocks.

The Menu UI with simulated protanopia type colour blindness

The iterations… So many of them

At first, my initial designs were a bit bold in design and use a grid system. I was heavily inspired by how The Division 2 organized its information and the overall design. As I thought more and more about the overall theme of Splinter Cell: Blacklist, I instantly knew that it will not work. It is not a looter-shooter, it is a stealth action-adventure game.

Version 1 of menu UI

Version 1 of HUD

Version 2 of menu UI

The constant going back and taking a step back to think about the player and the overall picture, really helped me to visualize how it would be used in an actual environment. I looked deeper into current and older titles like Astral Chain, Division 2, Death Stranding, Star Wars Jedi: Fallen Order, Control, Horizon Zero Dawn, and The Last of Us. I realized that as a gamer, complex menus are not fun, something that is intuitive and easy to navigate is the key.

Version 3 of menu UI

I went through different fonts; my initial picks were display fonts that were geometric because I wanted to show a technical feel. I eventually gravitated to san-serif fonts as it was more modern and in-line with next-gen games. I believed that using san-serif fonts were better from an accessibility standpoint as display fonts can be often hard to read, depending on the person. I used two different fonts: FS Industrie and DIN Pro, these two fonts were perfect as they were clean and geometric.

Final version of menu UI

The final product

The final design was a huge departure from what I initially sketched out on paper. As time went on and taking the feedback from the mid-point review, I instantly applied it and changed directions. The result was something that I truly felt was my best work. An UI that is modern, fresh, and easily understood by anyone and everyone. An UI that can be taken for a remaster of a Splinter Cell game in 2020.

My sketches/initial concepts…

Final mocks (HUD + Menu):

Motion concepts:

The takeaways

Balancing with my school and club work, I felt that this challenge was a test of my abilities and it really was. I enjoyed every second of idealizing and creating my mocks. The realization that working in UI/UX in games was beginning to come true. Throughout the process, I learned a lot from the industry, the judges, and myself. From this challenge, my take aways were:

Accessibility is important!

This challenge taught me the importance of designing an UI to be accessible. I didn’t realize how much factors that I needed to take into consideration, from colour to contrast to even the type. It gave me an insight to how a game designer would think to make their UI or game more accessible and gives me a large appreciation for game developers who take the time and effort to implement such options (looking at you Ubisoft and Naughty Dog).

Motion is king

I learned that motion is key in my mock-ups, even though my motion concepts were rather weak in scope. It can be pushed further, and it was not something I focused too much of due to my lack of skill in After Effects. Using motion to enforce certain feedback like purchasing or equipping provides the player a visual way of understanding “hey you got this new shiny weapon.”

Believing in my strengths as a designer

My strengths as a designer are typography and minimalism - I’m quite proud of what I designed for my mockups and I strongly believed that they were critical to the challenge. Although, I learned that it wasn’t enough. Visuals are just as important. Motion too. Initially, I wasn’t confident that I’ll make it to the finals but as I remembered back to my roots as a designer - I utilized those strengths as my advantage.