Mini Metro: When Less is More

[Music] despite my incredibly and descriptive title glad you come so my name's Jamie and I'm a game artist from New Zealand and I'm going to talk about my design work on the UI of mini Metro so I've been in the game development industry for over 15 years and I started out as a 3d artist and became a lead artist at a small medium-sized studio in New Zealand and now I do more contract work and in between that I work on my own titles so mini Metro first I'll talk a bit about the experience we were shooting for and how this impacted on the UI content and then why we made certain decisions and then how we wrap that content into the package that you see today

but first I'll introduce the game and how I came to work on it and for the uninitiated I'll just show a quick app preview video of the game [Music] okay so mini Metro was the brainchild of Robert and Peter curry they started development on the game back in 2013 for eluded our a game jam and they made this you know brilliant little prototype and it showed a lot of

promise so they kind of went off to develop and we gained further I'm at the time at that time I was creating the game design and art for a turn-based bar brawling game with beers called beer knuckle but I was going through a lot of design problems and hitting a few roadblocks so I was pretty receptive to any distractions so when I got this email I was pretty excited to open it and I said hey Jamie and I replied and said hey Pete and they went on like this for quite some time and then eventually Pete said hey do you know anyone on anyone who wants to work on the UI of mini Metro I said yep I can do that it will probably take about two weeks and then game development being game development of things dragged on for quite some time and two years later we

end up here in this place so over that time it's been a finalist for quite a few awards and at one excellence in audio at the IGF and 2016 - the brilliant work of rich Freeland and Pete and probably more importantly it was the finalists for excellence in art and then at the end of 2016 it was chosen you know for the best of AppStore promotion and so that was you know a great reward for a lot of hard work so over those two years just to give you an idea of the volume of visual iteration that went into the game I somehow managed to spit out over 4,000 images 112 previous videos and 12 gigs of data so in terms of sales the game has

shifted 800,000 units to date that's across all platforms Steam Mac and mobile Android and iOS and so far its grossed over three million u.s. dollars and it has a 96% overwhelming positive steam rating okay so those two weeks that turned into two years how exactly did we get here you could probably say the design process looked a little bit like that image and variably the design process starts with understanding your subject matter and in this case that's understanding a game that's halfway through development so it can be a bit of a shifting target but you can start with a simple question and their question is what is the game about what

is the experience exactly that you're designing for so you might come up with a list that looks a little bit like this the game is about building efficient networks minimalism score chasing city planning but this list you know kind of feels a little bit surface-level and it doesn't quite get to the root of the nature of the game so if we dig a little bit deeper and go back to the very original inspiration of the game which is the London Tube map and if we go right back to where to the birth of the game to where you know the original inspiration came from and as I understand that that came from robbed standing in the London Underground trying to work out how to get from point A to point B so you can say that the origins of the game is more in

interpreting Maps and the core idea of the game is possibly more about observing reading those different shapes and lines and colors and trying to work out how they all work together so maybe you could say the game is more about observing decoding experimenting discovery and by extension learning so at this point I should probably point out that it's a lot easier to come up with a sort of list in hindsight at the time you I'm probably operating more on an intuitive understanding of the game and that was based on playing the prototype and and you know kind of with

the prototype it was extremely bare-bones it was just some shapes and you'd connect them and try and figure out how it all works yourself so that process you know it was incredibly rewarding and that's the experience though which we tried to imbue in the game through the UI design and the UX so how do we build a UI UX that encourages and supports us the UI content and the UI flow can set the tone and expectation of the player and even by the things you choose to admit you can change this tone and experience at the player house so there's three main areas of the UI design where I was particularly conscious about setting the right tone and the first one being when you use a flow or the tutorial so this is a quick time lapse of the new user flow so you can see this really strokes back the

game to its very bare components and only exposes the player to one thing at a time and so by breaking things down into components and staging them very slowly you can teach incredibly complex things to players and some things to keep in mind with this approach is that it does require a lot of testing and and you need to get the pacing correct for all sorts of different types of players and that's probably something we needed to do better our mini Metro in terms of pacing out how that tutorial wind and don't necessarily feel the need to over explain things to the player for there's two reasons for that one new players don't necessarily need to know everything about the game straight away and secondly it leaves the door open for

players to discover new features later on on their own accord and this is something we're actively trying to incentivize in the game is that sense of experimentation and discovery and the other thing is we didn't use any text so for a lot of people this is frustrating and this was you know primarily motivated motivated by our desire for minimalism but it also serves another purpose of encouraging players to observe the game symbols and game Lang visual language rather than reading often you can maybe think of this like a game of charades where if someone starts speaking in the middle of the game of charades it kind of ruins the game it's more efficient and it's quicker and it's faster but it also just undercuts the whole game

the next area is the in-game UI the best way I can explain our my approach to the HUD is this idea of a toy train set so a toy train set is strongly entwined with the idea of observing experimenting and discovery and it's a very consequence-free environment where you just play around with tracks rebuild them lay them out pick trains up put them down and that kind of explains our approach in mini Metro where there's no in the default game mode there's no penalty for relaying our tracks and taking your time to do so you can pause time relay out everything you like and just play around and experiment for the game so one thing has very conscious of us to not build a shell over this game

and to have a HUD which takes functionality off the tracks itself and one thing that became obvious is that the HUD was most beautiful when it wasn't there at all so for example this is a really old had mock-up where we were toying with the idea of shifting functions onto the head and here's a later mock-up for mobile we can see that had expands and retracts to stay out of the way so some other ingame UI things to keep in mind we're possible simplify rules that I had to communicate initially we had a lot of complicated rules in the game which were causing a lot of frustration and I was blinging up errors all over the place and a lot of people

you know just couldn't understand them so rather than try and design our way out of a hole visually you go we can go back to the game design and change the game design itself I've shown an example of that later on and one kind of idea to operate by with this sort of thing is to be the world's worst magician magicians operate on the idea of misdirection where they created distraction and you know present a trick and that's the complete opposite approach you need to take with just laying errors in game so always you know be aware of where the player's attention is and display your errors at that point and lastly for the end game visuals we were very well I was very conscious to avoid adding in any extraneous visual rewards and this could possibly be

summarized as the desert golf approach absolutely love this game and it kind of became a bit of a touchstone during development so if anyone hasn't played it this is the game where you can hit a hole-in-one and absolutely nothing happens but at the same time you still feel quite rewarded for having done so so that was a very similar approach to mini Metro so this is again some early era era previs and you can see I've got was incredibly bad I've got errors displaying in two different locations so you're obviously a person's attention can't be split into two different areas and then this is a another example where we changed the errors to occur at the point of mouse interaction so we know the person's already looking there and it's it's

going to come through and this is when we had no line crossing rule in the game and that was an example of an error that we took out of the game just to simplify communication the last area is UI flow and so one thing we took out of the UI flow was the leader boards and the easiest way to explain this is that for us leader boards were kind of an extrinsic motivator and we wanted to keep the motivations to the game inside the game orange change.you intrinsic to the game and the other thing is we didn't want to hammer new players with leaderboards and point out how poorly they were doing all the time and there's a lot of different reasons people play mini Metro and it's not

always to do with competition so we took the leaderboards and kind of reduce them to a button but we took it even further and reduce it to a non-standard button for the US this is breaking our UI convention and then we kind of just nestled it sort of headed out of the main UI flow and the city select screen and so instead of showing leaderboards we show your personal bests so that you know that's important for you to establish whether you're experimentation and progress in the game was occurring it was to see how well you're doing and lastly we avoided any meta structures to the game so we avoid any of these structures that are intrinsic to the game like collectibles unlockables and

any sort of currency we do have unlockable cities just to limit the player choice when they enter the game but even for some people this can become a means to an end means to an end where they just play through the game I'm locking all the cities and then when they've unlocked the cities they call it quits so we try and you know avoid those sorts of situations so we've talked about some of the ideas that gave form and structure to the UI now kind of talked a little bit about how we gave it a look so I might go without saying that the game itself is hugely inspired by Harry Beck the designer of the Tube map and one of the challenges was bringing this to life so there was a lot of previous to do with spawning stations

how that might look and this is a a really bad idea of a stations form come thanks like it's giving birth and then even when as far as designing how the passengers overflow out of stations and how they bounce around and then as to kind of how the track handles layout so that they're all accessible and under dense conditions and then exploring station permutations and how the corner radio nests together and then you know evens stuff like platform switching where each each station has three platform inputs from each angle so when designing the front in this particular

this particular book became a huge source of inspiration and this is designed by Vignelli and Bob Nordo and these guys spent two years making an immaculate design document for the subway signage system in New York so she you know this was a big inspiration and it's absolutely perfect almost perfect but at the same time it's kind of demoralizing looking at it but you know they spent two years doing it and if we tried to hit this kind of perfection it would take us probably four years so I took a lot of color samples from this including the paper and the ink which comes through into the white and the blacks in the game and we adopted some of the kerning we have textures kind of shoved into the top left corner of the boxes and yeah and the way the signs are

built in a square and modular fashion and so that comes through into the menu as well so that's you can kind of see that influence coming through into the menu design there another big aspect of the game were the arrows and transitions so anywhere where we have a transition in the game we have a big black arrow with the exception of the leaderboards which we were demoting so this is some early previous of the endgame transitions so a big a big design goal of the UI was to have no cuts and the game whatsoever so everything kind of freed flowly through from menu to game and back out and that included the game over screen where

we're kind of transitions smoothly well that's the only one which was a bit more rough but ya get the idea and that's just showing a transition Billy previous transition to endgame so all of these is done using I did a lot of these and after-effects so but I had to dig a little bit further and look at things like subway maps which see their influence in the city select screen and even road signage imagery which is used around the in-game icons so this is a bunch of previs for the city select screen where you can kind of see that influence come through and there's also a lot of a lot of the city screen is based on tube map line or line maps or

subway systems so that's basically all I've got today but I'll just run through some takeaways and then hopefully take some questions if there are any questions so the mini Metro takeaways would be understand your gang the design process starts with understanding what you are designing for and this can be intuitive to you or it can be explicit and if you're in a team a place to keep an open discussion going throughout the project on the nature of your game find ways to encourage and support this through your UI content be mindful of what your UI is a emphasizing to the player as important and omitting some things can become you know just as powerful as what you choose to include

give people some credit don't be too scared to let them figure things out on their own you don't have to over explain everything with text prompts and if you include enough visual cues and introduce elements introduce elements to people at the right pace they can learn you know incredibly complex game mechanics and then find you a visual key and build a visual language around using inspiration that means something to your game and if you can make it relatable so when people look at your game you know they immediately have a connection to it and then the last thing is iterate iterate a lot cool that's all you can find me on Twitter or you can give me an email if you want if you have any questions cool thank you [Applause] [Music]

cool yeah hi oh hey I have a question about your testing you were saying that you did a lot of player testing and I was wondering what you know where you found your players how often you were testing etc yeah so the Christian is about how often we did testing and where we got our players to test from well we did a lot of we did quite a few trade shows so a lot of that was just on the spot watching how people play and whether they can pick up the game at the right

space speed and then you can also watch youtubers play the game for the very first time and see how they react to what they're playing and then there's also streamers but we didn't actually do too much in house testing thanks obviously mini Metro has a very unorthodox minimalist UI and that's not generally what you see in an iPhone games even personally when I do minimalist you guys people have an immediate assumption like oh you need to add pictures or you need to do something more polished or you know 3d is or whatever how'd you how'd you stick with the unorthodox UI and when you did you receive that kind of feedback and how did you overcome it or incorporate it or did you tell him just go away

so how did we you know stay on the path of minimalism yeah in in lieu of going with the standard iOS app look and there were times where we went to minimal and we had some player revolt and steam early access forms so we did cut back on on going to minimal but I don't know I don't know there was a big it was a lot of talk about adding more text into the game but we because the game was built on minimalism it was easy to discard it using that as an excuse yeah that's cancer Thanks thank you yes hey what are your biggest influencers on minimalism to be honest one of my biggest influences on minimalism as probably what I showed you

and and the in the presentation the New York City Transit Authority design manual was probably my biggest influence in that regard by than that I just I really loved minimalism so I find it easy to just cut stuff out as much as possible okay thank you thanks one of the things I loved about mini Metro was the sound design and how cohesive the sound and animation is I was wondering if there was collaboration in that department or is it more that the sound was done to match the animation how yeah collaboration between the sound and the visuals yeah a lot of that was handled by Pete a programmer and rich Freeland and there was so there was a large amount of collaboration there with changing the timing of the game so that it matched up

with Rich's musical needs mm-hmm cool thank you very much thank you I see that the game is not free-to-play can you spend a little more into what kind of decision because I'm I'm pretty sure you this goes about the possibility yes so why wasn't the game free to play yeah we talked about that you know for months and to make her free-to-play we would have to gut the game too much because it came out on PC first as a premium title yes so like adding advertising into it it's a big no-no because it would just destroy the look of the game yeah and adding and systems for rewards like currencies just wasn't part of the

philosophy of the game yeah thanks thank you cool thanks it round [Applause] you