Borderlands 3

BL3-Keyart.png
 

About

I joined Gearbox in October 2016 as a UI Designer, shortly after the project had made the switch to UE4. I worked with the rest of the UI team which at the time consisted of Ghent Bailey, Pat Guarino, Trisha DeSalvo, and grew to include Julien van Putten and Heather Staimpel. We began with UMG for our earliest explorations and but transitioned back to Scaleform during production. Below are some examples of work that range from early explorations to final concepts that made their way in to the game throughout the course of development as the project evolved and took shape.

 

Role

UI Designer

Tools

Adobe Photoshop
Adobe Animate
Adobe After Effects
Unreal Engine 4 | Scaleform

Dates

2016-2019


HUD

UI_KeeganChua_HUDRevision_4.png

The HUD received a large portion of my attention later in production, because of my experience working on the Vehicle HUD I eventually became the stakeholder for most things HUD related including the Player HUD and the Iron Bear HUD. Ghent Bailey set the initial look of the Player HUD, which the team added various widgets to throughout development. Late in 2018 I expressed interest in redesigning the HUD, which I was allowed to do. Taking the reigns of the redesign, I wanted to do my best to stay true to the initial style set by Ghent early on with the widgets in the bottom corners of the HUD, while adding my own spin and toning back the use of pure blacks in the overall palette.

This is a notification animation I made and incorporated that helped set the style for the rest of the various center screen HUD notifications.

It was decided during development that the HUD needed an initialization animation that would be shown in the game’s first reveal. The request was to have the launch date buried as an easter egg in the textfield, and that it not stray too far from the look of the BL2 HUD initialization.

Early on I mostly contributed to concepts for the Iron Bear HUD interface, as it was primarily worked on by Trisha DeSalvo who had handled initial implementation and the designs for Iron Bear specific widgets. I resumed work on Iron Bear after my redesign of the Player HUD for overall consistency.

 

Inventory

The Inventory spent a lot of time being worked on by Pat Guarino, who was the original stakeholder. After handling various revisions he passed this menu off to me to finish arting up and implementing.

 

Guardian Rank

As an update to BL2’s “Badass Rank” system, I wanted to take a stab at cleaning up the information being presented to the player. The Badass Rank screen felt fairly dense, and was not exactly the most user friendly. Differing from BL2, Guardian Ranks added the concept of wanting a sort of “skill tree” that unlocked as you spent tokens on stat boosts, reinforcing your specific playstyle, so the need to display such a large amount of information at once was a fun challenge to solve.

 

Map

The first theme that I explored for the Galaxy level of the Map screen came after a conversation with Ghent Bailey where he talked about it maybe being a pop-up book. That really inspired me and I did a concept pass with illustrated planets that would have transitioned to renders with landmark pop-ups when focused. While I was really excited by the idea, it eventually got nixed because of how heavy handed it was and it would have presented a lot of challenges for DLCs that would likely add new destinations to travel to.

The final look of the lists was influenced by Pat Guarino. He and I passed this menu back and forth throughout production. He worked on various iterations that honed in the style of the UI and helped guide the final UX as feature requests were made that dictated more sub-menus be added to the Map.

A lot of the flow was dictated a little by these planet dioramas and the Zone Map that Ryan Smith made in a prototype early on in production. They were visually really striking, and I did my best to try and reserve most of the screen real estate for that 3D art.

While I was on the strike team that pushed the final look and flow of the map, we decided it would be really cool to have the flow between locations be from Galaxy > Orbit > Zone with the visuals look like you’re “zooming” in through a telescope to focus in on more detailed layers as you dialed in on individual planets.

UI_KeeganChua_MapZoneRevFinal_3.png
 

Catch-A-Ride

Something I came up with during explorations for the CAR menu was to use the ECHO device as a projector that would show you a 3D stand in of your vehicle and would change/update as you dialed in to different part options.

 

Iconography

Ghent Bailey helped set the style for the action skill icon illustrations with Moze’s Iron Bear, which I took and expanded on for the rest of the player character action skills.

UI_KeeganChua_IconWeapons.png
 

Joke EULA

UI_KeeganChua_JokeEulaConcepts.png
 

Thanks for looking, hope you check out the game!