Koko

URL: http://koko.takafumikojima.com
Bult with: HTML / CSS / jQuery / Javascript / PHP
Duration: 1 month

What is it?

Koko is a web-base spot-differences game that is inspired by a game it was popular in Japanese TV show about a decade ago. Because it is a browser base game, the users can easily share each image with their friends.

My Role

In this project, I did all of the processes, such as coming up with idea, researching, designing, user testing, and coding by myself.

Target users

The game is family friendly and simple enough so that people can play with their family and friends easily. I made this game as a web-base because users can play anytime they want without spending a long time to install it. Each game will be done in ten second at the shortest.

Flowchart

How does it work?

When the player clicks the start button, the top picture will start to lower its opacity slowly. Sjmotanesouly, the picture at the bottom will start to appear. When user taps/clicks on the answer area (non-transparent park of the image file), it will mark the tap as correct.

To detect a click on the non-transparent part of the answer png file, I used script, AlphaPicker by escapism (GitHub).

Branding

I made an overall brand image clean and playful, but not too childish because it is a game for everybody. I choose a soft light green to generate playful feeling. Koko is a game with pictures change gradually, so I used a chameleon as a main subject on the logo.

Business model

I came up with two ways to collect profit. One way is on-page advertisement. Another way is sponsorship. Koko is a game that requires players to literally stare at pictures for a long time. I can create a custom picture that is made out of sponsors’ advertisement. To show the effectiveness of the ad on the game to the sponsors,  I can track how long users spent time by using an access analysis tools such as Google Analytics. I made sure that the both ways will not compromise the game experience or the game system.

User interface

In this project, I made sure that players do not get confused and frustrated while playing, and I also made sure that the game system will not accidentally reveal the answer. Subtle animation feedback and visual cues guide users to understand how to play the game intuitively. For example, the game image is dimmed until the player clicks the start button. It makes sure that they do not start looking around for the answer without actually starting the game. Small animation such as shaking the picture when player gets a wrong answer helps them to understand what is going on intuitively.

User feedbacks

I conducted a user test at a local library. People who are around 10 to 20 years old played the game for 5 minutes to test the product.

User Interface / User Experience: 😃 Most of players including, children who are less than 10 years old easily understood how to play the game in less than a minute.

Game Level: 🙂 Although some players found some of levels are too difficult, most of players got into the game and played more than two minutes continuously.

Conclusion

Although it is relatively small project, by doing all of processes by myself, I’ve gained much better understanding of how each process interconnect to each other. I leaned what have to be shared between each process and how they should be shared to achieve smooth project managing.

SaveSaveSaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSaveSaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave