UI/UX

I joined Blackout Games in 2017 as the studio geared up to build a cross-platform multiplayer rugby management game.

I was responsible for almost all in-game graphics, UX, and UI layouts and worked closely with the programming team on implementation. I led a small team of artists towards the end of Blackout Rugby and Blackout Football's development.

Visual Identity

I joined the project in its infancy so my initial responsibilities included establishing the basic visual style of the game.

This took the form of a lot of mood boards, concepts, discussions with stakeholders, and mock-ups.

We started with a short list of potential screens and the main menu to provide a fairly complete vertical slice of all the types of graphic and presentation we expected to need.

I also prototyped out the general flow and UX of the game, first on paper and then directly in Unity.

Multiplatform Support

One of the core goals of Blackout Rugby was to make the game playable in both landscape and portrait view, as well as on desktops, tablets, and smartphones.

Another was that the game experience couldn't substantially change between platforms and orientations.

These two goals came into conflict frequently, and managing the compromises between them was one of my largest ongoing responsibilities.

Good wireframes and strict control over feature-creep were musts.

Iconography

I created a great number of icons and similar graphics. Some were designed to be the visual anchor for a whole screen or section of the game, but the vast bulk were created to help represent the myriad mechanics specific to the management and sports genres.

This was a highly collaborative challenge. We had to balance usability and readability constraints against a question we asked one another frequently: "Does this look rugby-y enough?" 

Customisation

I created many of the graphics for Club Customisation. From the beginning we knew that we wanted users to be able to create their own club logos, but we needed a way to keep them consistent with one another and grounded in our UI. This was also an area ripe for monetisation options and future expansion.

Early versions more directly branched off our core UI, but we began to experiment with other styles as time went on.

Rewards

I created a lot of trophy variants, with different flavours for each of the the competition types. 

As with our Club Shields, we diverged further from the original design over time and as more competitions were added.

Blackout Football

We learned a lot from rugby and it was exciting to apply all that knowledge to football.

Football shares a lot in common with rugby—it's a team sport, the teams are reasonably similar sizes, competition formats are similar, the club management structure is the same—so we were able to leave a lot untouched.

The heart of the game had to be built from scratch though. For Football we needed to do a dozen new things that had no equivalent in Blackout Rugby.

I don't want to get too far into the weeds on this, but a good example of the divergence is in the Lineup and Game Plan screens.

Whereas in Rugby they had been completely independent, they were extremely dependent on one another here. Much of the strategic variety in football comes from mixing-and-matching the building blocks of players, formations, and tactics. Each of these subsystems were deeply linked and interdependent, but we still needed users to be able to interact with them separately.

It took a lot of iteration and collaboration between myself, the frontend team, and the game designers to find ways to do this that satisfied everyone. Especially with the cross-platform requirements still in place.

I joined Mecha Weka in early 2023 to help with long-term support for the sidescrolling RTS game Battlecruisers (available now on Android and iOS!), and the creation of the game's new multiplayer mode.

I took on a lot of responsibility for several areas of the project, including non user-facing features like cloud save, platform-specific account authentication, and backwards compatibility. I also contributed a lot of art and design.

Post Game Overhaul

The game's post-victory "destruction" screen was previously very static and didn't match the energy of winning. It had existed purely to show some post game stats, which it did, but the unexpected and sudden change in pace felt like a letdown from a user perspective. It was affecting the experience and needed to change.

I handled the process from Figma prototype all the way through to final implementation.

I rebuilt the screen to have a greater sense of forward momentum, and animation was used to draw the eye across the screen and liven up the stats. I was able to introduce a bunch of new elements such as time, score and rewards; all of which we could then use elsewhere in the game as part of monetisation and retention strategies. 

I wrote the underlying code to handle interpolating values and animating elements of the screen, as well as score calculation and reward distribution.

I also rebuilt the level-up system and added special UI and animation logic for each time a player reaches a milestone.

I had the opportunity to add to Battlecruisers' collection of in-universe ads. These are an important part of the game's humour and have proven to be a much less frustrating alternative to the usual ad-supported model common to mobile games.

Tiberian Odyssey Logo

An elaborate fan game based on Westwood's classic RTS, Command and Conquer: Tiberian Sun. I joined the project as a teenager and have been contributing to it on and off for a decade and a half across all visual disciplines. I occasionally lead the project too. The name is very appropriate, it has been quite the journey.

Sidebar Overhaul

Empowered by work to reverse engineer and rewrite the 1999 Tiberian Sun engine, I worked on rebuilding all in-game UI with a greater emphasis on modern quality of life:





Cursors

Sometimes it seems like as a society we don't do fun looking cursors so much anymore.

I wish we did, a good cursor can make interacting with things feel so much more responsive and satisfying.

Loading Screen Art

In addition to changes to sidebars and core UI, I am leading an effort to modernise elements like loading, briefing, and post-game score screens.

"Modernise" is a relative term here of course, since the game revels in the clunky, chunky, skeuomorphic style of games past.

Main Menus

Another challenge for this project was the main menu, and all its related UI chrome.

The game has two factions with very well fleshed out aesthetics, but we didn't want the UI outside the game to lean too hard on either of them. Outside a match should be visually neutral ground.

I created a unique colour palette and shape language to make these screens distinct from the game proper.

This was also an opportunity to revisit the excellent work of other contributors.

I remixed, recreated, or heavily referenced other people's work from elsewhere in the game, so that those stylistic threads could all start from the very first thing the player sees.

I like messing around with ideas. Just about anything that I see will leave me wanting to make stuff; whether I'm inspired or frustrated by it.

Obviously most of these ideas terminate pretty quickly once I've satisfied my curiosity. I'm still proud of some of it and I often tell myself I'll get riiiight back to it.

Deck Builder

Prototype UI elements for a deck builder game. My goal here was to implement some of the more complex features of collectable card games. Features such as cards that modify other cards, that accrue tokens, or which otherwise break the pattern of being played and immediately removed from the board.

At the same time I wanted to build something approachable, possibly fitting into the roguelike mould.

I also took the opportunity to experiment with pixel art in Unity, both since this felt appropriate to the roguelike genre and because I hadn't done it before. Unity is pretty weird with pixel-perfect stuff, so it was educational (annoying).

Some icons for various damage types, card types, and general navigation
Interface for tracking cards which have been played to the board
Interface for units and attachments
A reliable classic, the hand

Fantastical UI

Some UI experiments from a fantasy strategy prompt. I wanted to push myself away from the science-fiction aesthetics that I had been using as a crutch, and see how much variety I could get out of Unity's UI framework.

Panels are made of a 9-sliced ink-blotch background, with additional inky segments applied along the sides to add a greater amount of variety and visual interest.

I built all of this with the style of fade-in below in mind. I put together a shader to handle the the opacity transition and keyframed everything else by hand.

Animated UI shader over top of some simple move and stretch in Unity's animation toolset

More to come.