Qube: My Introduction to UI/UX Design

Qube began as my first attempt at learning design in 2016. It has since gone through many iterations and has been presented to game publishing studios such as Ketchapp and Voodoo and won design awards and shoutouts.

Here are some screenshots of the game before you proceed to look at the abomination that was the process of me learning design.

How it began:

In 2016, my junior year of high school, casual mobile games took over the lives of my friends and myself. (In fact, I peaked by reaching top 25 in the world out of over 4 million players on Piano Tiles, but that’s beside the point of this article). I soon decided that I had played enough games that I would be qualified to design and develop games.

Turns out I was wrong and playing a lot of games wasn’t really enough industry experience to become a game developer. But you can make that decision for yourself after you look at the first mockups of Qube below.

I had actually begun designing qube because I thought the logo was super clever. I still think its clever, but I don’t begin developing products solely because of how cool the logo is anymore. (read: I don’t do it as often anymore)

The core mechanics of the game was to tap the “qube” that had disappeared on the main grid until you messed up. Think of it as a redesigned version of whack-a-mole.

Just a few things to note retrospectively:

1. Why was there so much white space? It wasn’t even well executed, it was just empty space. Ugh.
2. Why is the logo a different size on the two screens? Where’s the consistency? Actually, why is the logo even on the main gameplay screen? That’s just bad practice. Wait. Isn’t that still the case in the final version?
3. Why was the indicator of the qube you needed to tap just the original square deleted? That doesn’t seem very intuitive.

First Redesign

This was my attempt at redesigning Qube going into my senior year of high school:

So the design is now slightly better. Still not great. Actually, no it's still just bad. Some things to note of this iteration:

1. I improved the home screen design by removing the white space, but then the next screen completely reversed the improvement.
2. There’s a lot of orange going on in the home screen. that was my solution for having too much white space — more orange. Not the greatest problem solving, high school Eliot.
3. The gameplay screen feels cleaner now and now has some color accents. Not sure why the buttons go from flat to 3D though. The actual grid now has a different shaded square to indicate where to click which is much more intuitive.

Second Attempt

Now the designs I have below are the ones I created once I wrapped up my senior year of high school, just as a challenge to see how much my design skills had improved. You can see them here:

Some things to note:

1. Here the screens are notably cleaner. Full utilization of flat design and consistent layouts, as well as a consistent color palette.
2. The buttons on the difficulty screen are the most inconsistent portion of this iteration, with the buttons reverting back to 3D. This was done because the alternative flat design route would have been making the buttons “checkmarks” and then pressing play. I didn’t like that, I wanted to minimize the users' inputs before they got to the gameplay screen, however, this compromised the consistency of the game.
3. With the flat design trend of casual games weening, I think my next iteration will be developed with a more realistic style, incorporating more 3D elements intentionally.

Aftermath

Soon after finishing up my designs I actually decided to submit the screenshots to a couple competitions. One of these was the Adobe Certified Associates World Championships. While this design wasn’t the one that got me to the world competition, it did, however, get an honorable mention in 2017, that you can see here. This was actually what inspired me to create a game development studio called Tapp Studio with several of my high school friends.

What’s next?

We eventually pitched the idea of Qube to Ketchapp a game publishing studio, but the designs were rejected. The publishers at Ketchapp said the core game mechanics were good, but the designs felt outdated. I have since iterated on a modern version of Qube, shown in the video below.

Some quick notes about this iteration:

1. I decided to completely scrap the 2D design and opted for a 3D design which was more aligned with the casual mobile game industry standards.
2. While the core mechanics haven’t changed, the gameplay feels more satisfying due to the constant vertical movement and changing blocks. A current trend in casual gaming is trying to keep users distracted as long as possible, and the constant movement in casual games achieves that.
3. Less is more. Cliche as it is, this prototype version almost feels cleaner than my previous design even though it has the bare minimum graphics to even qualify as a game. I’ll be exploring more designs with fewer elements but higher impact in future iterations.

Clearly, I still have a lot to improve on as a designer. While I began designing Qube as a visual exercise, it quickly turned into a design exercise of a much larger scale. Due to the user-centric nature of game design, I have now learned the principles of user interface and user experience as well as basic visual design — an unintended consequence of my arrogance that I could easily develop games after playing Piano Tiles for hours on end.