• Brett McCartney
• On April 21, 2016

Written by Laura Cosham – Graphic Artist

This retrospective turned out to be difficult to write, though not from a lack of anything to say. When you’ve spent two years digesting and pulling apart every element of a finished design, it’s hard to know where to begin, or even what tone to strike. I’m very proud of what we accomplished in TGC. I’m also eager to strip the UI down and see what I can do with it now. So, in the end I’ve settled for summing up how things got to where they are, outlining a few of the problems that I’ve found, and to sketch an outline of my plans going forward.

I was also going to write a short haiku expressing my feelings on our front end font Exo, but I’m still on my first cup of coffee. Apologies!

Front End

The thought behind the front end at the earliest phase of its development was ‘three clicks’. In three clicks (or less) from the main menu you could create a course or play a game. Wording was to be minimal, iconography was to be the king, and in the background the whole time you would be treated to the lovely, rolling vista of the last course you had played. Which sounds great, right up until the frame rate has slowed to a crawl because the last course you rage quit was “DEERPOCALYPSE!!!!!1″.

So back to the drawing board. The heavy emphasis on iconography gradually fell by the wayside in favor of more explicit labeling. As the main menu branched off into more and more paths, we began to play with colour to act as a way-finding marker to help differentiate similar screens (course select/tournament select etc.). After some trial and error we landed on the tiled interface that you’re familiar with today. It has its advantages and drawbacks, but ultimately it gave us a consistent framework to work with. If I had to change one thing about it in retrospect, I would have made it larger in order to use the available screen space more effectively. At the time we were still married to the roving backdrop idea and wanted to keep it visible at least in the peripherals. Looking at it now, it wasn’t worth the trade-off we ended up having to make with overall readability. Implementation was also a time sink; while a few of the pages conformed to templates, most screens deviate in some way and required special assets. As the game expanded, the situation only got worse, with every screen requiring a new design and new assets. Eventually, the Front End outgrew itself.

I think I’d known this intuitively, but I couldn’t pin it down into words until I was discussing user flows with a few of the devs one day: space on the main menu had become precious, and I was throwing around the idea of consolidating the different user flows into three new ‘cores’. As I began to really dig into this idea, I realized how many problems could be fixed by tearing down the Front End and redesigning the UI around these re-consolidated flows. It goes without saying that it’s no small undertaking, but would allow for more content on screens that are out of space (I’m looking at you, Course Details). It would also allow us to better surface features that ended up becoming buried in the current UI, like adding live friends and alternate game modes.

I could go on, but my main points moving forward are:

– More efficient use of screen space
– More room for information
– Greater readability
– More consistency between layouts
– Less competition between backgrounds, layout, and content
– Transition away from the omni-present ticker
– A new presentation for statistics

HUD

Based on sheer volume of mock-ups and iterations, the HUD has probably gone through the most drastic range of changes. It’s where I started work on the project, and I’ve continued to iterate on and tweak it in my own time, on my own machine. It’s been bigger, uglier, more colourful, more chrome, more impractical – you name it. In addition to that, each individual element has had something in the neighborhood of 5-15 iterations a piece. Out of all of that, only two versions have made it into the game: a very gold one, and the current black and red. Both shared the same underlying structure, since most changes are only cosmetic after the SE’s go to work.

One of my big concerns in designing any part of the UI is that should always feel part of a cohesive unit. In the HUD’s case, I carried over the use of tiled displays from the front end. The black and red motif is a bit of branding, but is also functional in keeping the white text from getting lost against clouds and other blown out colours. We don’t have the luxury of determining what areas of the screen will be light and dark, with lighting and layout being placed in the hands of the course designer, so it plays the safe game, which I’ll be the first to admit isn’t the most minimal. We’ve had to make some compensations in the name of legibility for users with poorer eye sight. Other things have no compensation except my bitter bitter tears (To anyone using the German localization: I’m so sorry).

Looking at the HUD from a year on, I agree with the community that it’s overbuilt, though it displays all of the information necessary. Contextual fading and allowing elements to be turned on and off will solve most of that, and both are solutions that I want to see implemented. As I mentioned above, I’ve continued to put in time refining the look of it in Photoshop mocks, and I’ve gotten it to a place that I think the community will be very satisfied with. When I can finally get these changes into the game, coupled with the fading, you’ll hardly know that it’s there.

Course Creator

The Course Creator has had extensive experimentation with the idea of radial menus and the like. Because I was spending most of my time on the front end, Paul or Jim would have to add in new elements of the interface; more often than not my only contribution was adding set dressing. Every once in a while I might attempt some adjustments to try and make things more cohesive, but the changes that I can make to the current structure are limited.

In the end, with all the extra work we have a something that works well in parts, but from a UI perspective, it’s lacking in the overall. Going forward, my primary concern is with uniting the elements of the interface and streamlining the user flows. Removing the ticker, swapping out the carousel for the selection grid, updating the sliders, and an overall cosmetic pass are all on my list. I would also love to look into some custom menus that can be populated by the user to let you keep your favorite tools at your fingertips, rather than having to stop and root through menus to find them.

So here’s the call to action: Those of you who spend hours in the course creator, I would love to hear from you. You’re the ones who put the hours in, and you guys know all the little quirks and hang-ups for the serious designer better than anyone. The Course Creator is one of the more difficult areas to make changes to, but the more I know about how you use it and where your hang-ups are with the interface, the stronger a case I have to be able to investigate and make those changes.

Final Thoughts

If I’ve got two buzzwords going forward, they are simplicity and flexibility. Simplicity, because creating and maintaining content is too time-consuming with the current status quo. Flexibility, because if we’re going to continue to build, improve and expand on TGC, the UI has to be able to accommodate this. As for the rest, well…
You’ll know it when you see it.

-Laura