DEV Community

Cover image for UX Case Study: Killer Kao

Posted on

UX Case Study: Killer Kao

Live Demo

GitHub Repo

Initial Design

I wanted to create a different take on the classic "Rock-Paper-Scissors" JavaScript project by using Kaomojis (the predecessor to our current, beloved emojis!)

Here are some wireframes I initially created via Sketch:

I designed different screens in accordance to the possibilities a user would take, for example, the user would choose the "strike" button and the little fighter would change from a static pose to a punch pose

(I was very much inspired by fighting games: Street Fighter, Tekken, King of Fighters, etc.)


After I created the first iteration, I had friends and family test it out-- especially on mobile-- and was open to any and all feedback!

This is from my older brother:
Feedback from my older brother that pointed out the block button wasn't exactly working

One of my close friends' friend had feedback for me!
My friend Patrick showed my game app to his friend and she had feedback for me. She suggested that I animate the kaomoji with CSS!

Even Shen (Shen Comix) took the time to try out my app!
A friend pointing out that there is no punishment or feedback from when you spam the strike button.

I was even sent screenshots of when the Kaomoji would break:

The kaomoji were off-screen thus indicating that the battlefield wasn't adjusting to the viewport properly.

So I adjusted the Kaomoji structure accordingly, as well as came up with the logic to prevent block or strike "spamming" (hitting repeatedly with no consequences).

Postmortem lessons

This was definitely a fun project, not just created by me, but by those in my community. I think I should have opened up feedback to a wider set of people, especially those who are fighting game enthusiasts.
If I had the time, I would have implemented the choice to play as either a human or bear and made the kaomoji SVGs instead of the traditional text-made artistry to make it more accessible.

If I had the tech savvy, I would have made it a two-player game instead of one-player against a random number generator.

Here are the links again if you want to try out this project!
Live Demo

GitHub Repo

Thanks for reading!

If you want to keep in touch, reach out to me via Twitter!

Top comments (1)

vickilanger profile image
Vicki Langer

This is super cute! I lost, but I'm not holding that against you. :D