klink it shapes

Klink-It App

A Case Study

Before the style of Klink-It was conceived, the tile matching game was constructed during the GCA 2013 (Great Canadian Appathon) hosted by XMG. To give a little info about the appathon; Teams of 4 had to concept, design and develop a working game in 48-hours including the theme provided by the host.

We didn't win (womp womp). But I learned a lot from that experience and dug our game even more. But after the appathon, we shelved it for about a month and decided to bring it back to life. This is the case study for the design and development of Klink-It and the journey of its’ release to the iTunes App Store.

Project Details

Create a simple puzzle game with a small team and dive into the process of an all out launch into the iTunes App Store.

Summarizing and goals

As one of the main designers, I had to create a satisfying user experience through reward by a combination of sound, animation and transitions. Provided the layout and assets from the Great Canadian Appathon, revision of a simpler UI and defining the brand.


Getting to know Klink-It

The game mechanics of Klink-It was relatively simple. It's a matching game focused on beating your high score. The layout of the UI was a total overhaul.

witch app image 1 witch app image 2 witch app image 3 witch app image 4 witch app image 5
witch app image

Original tile matching game, Witch’s Ball, designed for the GCA

klink app image

From Witch's Ball to Klink-It. We wanted to pursue a larger audience thus concentrating on abstract shapes with a non-gender specific colour palette.

klink it logo

Honing in what the brand should represent but still having fun with it.

Inspiration and evolution

There are many apps out there that we looked into for inspiration. However, there were only a handful that really held sway over how our game behaved. For animations and transitions and overall user experience, there was none better than Dots.

dots image
klink it logo

We wanted Klink-It to be played anywhere. Providing the user with a 2-step system.
Step 1. Start the app. Step 2. Tap play.

Digging into the prototypes

The team and I knew there would be a lot of prototyping to get our ideas across. We mainly used After Effects to animate transitions from screen to screen. All animations were made by hand and brought into development as sprites.

Royalty-free sound effects and music were our alternative opposed to mixing our own whacky noises (although it’s under consideration for the future!). We got together and handpicked a few over a hundred unique jingles.

Communication

With a team of 4, all living in different cities, getting together was difficult and time-consuming to say the least. Google Hangouts and Whatsapp was our main source for communication.

communcation logo

The team spent almost every weekend on Hangouts to discuss and review work. Not having anyone pressure us to get her done; there was no weight, which allowed us to have transparency and be more honest with each other. It was an open meeting so we could speak to our hearts content, and we did. Whatsapp group chat became the platform in which we can quickly share ideas and designs to each other on a casual basis.

site mock up site mock up
site mock up
Go to site

Epiphanies and Insights

Throughout the ongoing journey of designing and developing this game. Trying to explore different avenues and methods to create a better experience. There are 2 things that strike us (the team) at any given point. 1. Is this game fun? 2. Does it FEEL right? The notion everyone who is creating something unique should ask themselves throughout every single moment in the process.

insight refresh image insight image
insight refresh image

And Beyond...

This is an ongoing project and the Klink-It team spends a bit of time every week to reflect on what they learned. You can follow them at:

Tanya Grimes (Developer) @tanyargrimes
Eduard Kachan (Developer) @EdVAardian
Fatemah Manji (Designer) @ManjiFm
Will Du (Designer) @willduwilldu

As we continue the design and development of our game, this case study will continue to grow, so stay tuned! Follow us on Twitter or Facebook to check for updates!

Things I've learned so far

  • When there's a spark of genius between teammates, embrace it, run with it, see how far it goes.
  • Communicating ideas through prototyping as well as communicating ideas when I'm on the spot and can't prototype.
  • Letting go of UI elements that I think might work. Instead, use ones that I know will work.
  • Be patient on little things.
klink it shapes