6 iterations of an iOS math game. Making game is so hard!

Kien Tran

Follow

Published in

The Startup

6 min readOct 31, 2015

--

I’m an iOS developer deeply in love with making niche apps. However my problem is: I can’t design stuff.

I mean seriously, I can’t draw things properly at all since I was born. I can sketch ideas, wireframes; but to draw an object, well almost impossible. When you’re a mobile developer and always want to make something, the fact that you can’t design really hurts. It means no matter what you do, eventually you’d definitely need a designer. Now if this sounds familiar to you, we are on the same boat. We can get in touch!

I have made quite a decent amount of apps, many for other people, few are mine that I worked with colleagues, friends, who are designers. If you are a UI and UX designer, you probably know it’s already hard to draw something that looks not only nice but also has to work really well, that fits nicely in people’s hands. To a developer, trying to achieve this and coding together is even more insane: design + code. This is also I give great admire to those that can do both. Like Loren Brichter, who made Letterpress.

1. Concept

Again, You can’t connect the dots looking forward; you can only connect them looking backwards… (Steve Jobs)

Earlier this year I decided to make a math game because I love numbers, I love calculating and training the brain. I love games like Threes, CrossyRoad, Prune, Shadowmatic, Shooty Skies, Does Not Commute, etc. My game was inspired by game shows on TV (see Countdown or Des chiffres et des lettres), which is supposed to be super hardcore, but I wanted to make it so friendly that everyone can play.

So, gonna walk you guys through one of my first prototypes to the final product.

2. Prototypes

This game has gone through 6 major redesigns. The first 4 were done by me, which failed miserably. 🤕

Basically there will be 3 main screens: Menu, Game Play and End Game.

Version 1

**Game Play v1,** white and plain, colours also suck

Version 2

**Game Play v2,** rounded buttons with time limit

Version 3

**Game Play v3,** playing with grid idea

**Game Play v3,** with numbers and quit button

**Game Play v3.1,** tried killing the grid, but not much better

**Game Play v3.2,** dark theme with Solution button, felt a bit too techie

**Game Play v3.3,** tried with chalkboard style. Added Solution screen; still not right yet

Version 4

Then version 4 is the version I almost shipped. Only after I got another prototype of my colleague (version 5). Then I decided not to ship this one anymore.

**Onboarding v4,** buttons with outlines and dimmed background. Not bad.

I quite like version a lot. It could’ve been shipped. But apparently numbers with the font are still really ugly. Not easy to read and hard to memorize. So v5!

Version 5

This version is not designed by me anymore but from my colleague. He used flat style with 4 main colours to represent 4 operators. The font was originally Gotham but we switched to AvenirNext instead. For numbers they were not that much different.

**Game Play v5,** numbers pad divided in 2 columns

This was just nice and I shipped this version in early Nov 2014. After that I continued to iterate to make the game better. This is also the time that I looked for a designer, so I teamed up with Kee Yen Yeo to make NUM v6. He designed and I coded. Nice thing is we could sit down and polish the app until it’s perfect.

Version 5 — final

This is also the latest release on the AppStore. Pretty happy with it.

**Menu v6** — animated numbers expressing the game play. The boy and background also make it feel more friendly.

**Game Play v6** — 2 columns still remained. But button shape is changed to one that has depth, or z-axis.

This type of button gives you much better feedback when tapping, together with sound effects that I crawled for many days on Audiojungle.

**Game Play v6,** difficulty getting harder

The biggest difference in the latest version is iPad 1v1 mode:

**NUM on iPad v6,** 1vs1 mode. Note: super fun!

Ah guess what, we also made a watch version that nobody plays!

That’s the whole process for the app. However, app icon is something that doesn’t plays a less important role. So lots of effort was spent on it as well.

3. App Icons

That was a whole process of me developing my first iOS game that I had no idea what it would look like. This is also the time I realise doing design requires a lot of hard work than you might think, rather than just talents. One cannot just give only 1 design, usually we need at least 3–6 versions and pick the best one. Bad UI design will give developers hard time to implement. Bad UX design wastes time for both parties. So what I also learned is do not create complicated UI but rather focus on the experience first. If it’s easy to use, it’s enough.

Creating a nice app requires both good design and development. But to me I believe design will be the major part from now and the future. With Xcode coding iOS is getting faster and easier than ever. Your code just needs to plays nicely with the interface; animation parameter needs to be tweaked carefully; pixels, colour codes need to be precise. 🤔

How fun it is to look at the first prototype, seeing how much we’ve learned and made right? 👌🏻

Kien.
@thkeen