Intro
I don't know if you're into video games, but I love Sid Meier's Civilization 6. It's basically a turn-based strategy game that takes you through human history and lets you rewrite it by leading your civilization to glory. You can play against the AI of course, but the fun multiplies when you play with or against other humans (and with "other humans", I am talking about my brother).
We noticed that the immersion and fun increase even more if we add some kind of personal touch to our game by renaming the cities of our empires. By default, we'd have standard city names depending on the civilization that we picked, e.g. Boston, New York and Philly for the United States or Aachen, Mainz and Trier for Germany, but let's be honest, that's kinda boring. If we rewrite history anyways, why not with custom cities like Miketown? (OK this one isn't funny but you get the idea)
The problem
Doing this renaming thing all game long demands a lot of creativity, and if you're like me or my brother, you constantly try to think of the funniest name possible for your next city. After a while, it's getting really hard to come up with new funny sh*t without taking forever to think about it. A regular game on standard speed is already taking several hours, so we didn't want to unnecessarily stretch it even more. There had to be a more efficient solution than to rely on our brains each time we founded a new city, right?
The idea
Damn right. As you can see in the sketch below, I had the idea of using a second screen device (my phone) while playing. A super basic app would randomly generate city names for me. This would save me time and brain work, I suspected.
The idea: Having an app on our phones to generate random city names
The design
So, how should the app look like? Because of its extreme simplicity of functionality, it's definitely not the biggest and most exciting UX/UI project I've worked on, but still I had to take a few things into consideration. The app has only one screen where I would place a button, which would then trigger the algorithm to return a random city name.
Shazam (left, © apple.com) and my lo-fi wireframe (right)
When I think about very basic and simple apps, Shazam comes to my mind. All you need is the big button in the middle of the screen that will start listening to the song in your surroundings. This is the app's only purpose and therefore, the UI is being kept very simple. I aimed to do the same with my name generator app. However, I decided to place the button closer to the bottom edge of the screen, as this would make it easier for my thumb to hit it while holding my phone one-handed. Ergonomic design? Check.
Now I was wondering how the button itself could look like. I mean, it's the single most important UI element on the screen, so I thought leaving it with a default device-specific appearance might be too boring. Furthermore, I wanted to visually connect the UI somehow to the game itself, so I looked at Civilization's interface for inspiration.
Civilization's skeuomorphic "next turn" button
In the bottom right corner of the screen sits the primary button of Civilization's UI. It shows an arrow to the right and will end your turn when pushed. You need it to advance through the game. I wanted to make my app's button look similar, so users would recognise this element. However, skeuomorphism isn't very popular anymore on mobile, so I created my own, flat version of the button which can be seen on the wireframes below.
Design iterations for both dark and light mode
When I worked on the final UI design, I tried to keep it really simple. First, I wanted to include very few basic colors that already appeared in the game itself, but then I decided to go with only black and white. The UI should reflect the simplicity of the app's functionality, and the fact that there are not many elements on the screen goes well with this decision. In a more complex UI with more elements, a unique color for primary actions would've been a no-brainer, but sticking with black and white here creates an elegant appearance which implies functionalism.
The label in the middle of the screen would change everytime the user hits the button and show the current generated name. I added a big Roman number "VI" for aesthetic reasons, which also serves as the app's logo and fills out at least some of the white space of the screen.
Bringing the idea to life
Yeah, this is usually where UX/UI portfolio projects end, because a designer is not necessarily a programmer. But in this specific case, stopping after the design phase wouldn't make much sense. I mean, I had a real world problem to solve for me and my brother!
Java code for my very first command line prototype
When I began my studies at university 10 years ago, I didn't have any idea of programming. I had the hardest time ever learning Java and developing a programmer's mindset and way of thinking. But I still remember that a book called "Head First Java" helped me understand coding a little better with some easy exercises. One of them was a phrase generator, that would take random words out of different arrays and combine them randomly. Exactly what I needed for my first approach to bringing the app to life!
I quickly wrote the very basic algorithm that would combine random elements out of two arrays and merge them into a city name. It worked perfectly on the command line of my MacBook, but this was no final solution. I had to turn this into an iOS app.
Bringing the app alive with Xcode
Luckily, we have the internet. There are many tutorials out there for all kinds of things, so it was quite easy to find a beginner's guide to Xcode and Swift. I specifically enjoyed Coding with Chris, as it's super easy to understand for newbies like myself. I picked out the parts that I needed, googled solutions for my problems and finally turned my initial idea into something real. My app is called "CityGen" and supports both light and dark mode. However, it's not available anywhere, as I believe it only fills the very specific needs and suits the very specific humour of me and my brother.
We use it everytime we play Civilization 6 and it really adds value to our experience. The initial problems and challenges are gone! Ok, sometimes the generated names don't fit together 100%, but you can always tap the button again for a new name. And everytime we find a new funny word, we add it to the array.
This is how it looks like. Just don't pay attention to the silly names :)
Thanks a lot for watching!
richter-michael.com
contact: michaelrichter.ui@gmail.com
