Tap-Z

Tap-Z is a mobile game that was developed and designed with a couple of fellow design and developer friends from my major during the span of September 2016 - December 2017. The team team consisted of 3 people: Chris Lee (Developer), Bryce Villanueva (UI/UX Designer) and I (UI/UX Design and Artist).

Tap-Z is a clicker or incremental style game that is inspired by Cookie Clicker and Clicker Heroes. As a team, we intend to create this mobile game to express our creativity through different scenarios and characters as well as building upon our skill-set. We had weekly scrums every Friday while the game was being developed. Tap-Z is out on all Android devices! Download it here.

Banner.png

My Role and Duties:

  • Artist

  • UI/UX Design

  • User Testing

User Personas

One of our first steps of the design process was to figure out who our target audience was. We created a persona so we could begin testing to see if it was the target audience we were going for. By establishing user personas, we would have a better understanding of our target audience and what they would think about the game idea we had in mind.

persona.JPG

Research

The team conducted online surveys utilizing Google Forms and posting them on Reddit's r/samplesize and r/incremental_games to gather responses about our target audience and what they'd expect from the kind of game that we are developing. The results we received are below.

From these results, we decided to go along with an Android release before iOS simply because the majority of our target audience use Android phones daily. These results also impacted Chris on the coding side of things in order to balance the game the way our audience wants based on our research results. There weren't very many surprises from the survey as we expected them with our biases beforehand but needed to confirm if we were correct.

Initial Sketches

After our research results, we decided to mock up and sketch what we thought the UI of the game should look like. You can view our process from the images below. We wanted the user flow and experience to be seemless with as minimal taping on the UI as possible to get where the user wanted to go.

Prototyping Phase and High-Fidelity Design

After conducting research, Bryce and I began low-fidelity prototyping Tap-Z. We ended up having very similar low-fidelity prototypes in terms of layout. However, as a team we decided that we would go with my version of the low-fidelity prototype. What I created for the low-fidelity prototype is below. I created the low-fidelity prototype using Mockplus.

From here, Bryce and I created a High-Fidelity mockup and prototype of Tap-Z and what it would look like when the user played the game. What we came up with after multiple rounds of testing is below. We used Affinity Designer and Adobe Illustrator to create the user interface of Tap-Z.

Game Backgrounds

The game needed to have backgrounds of various locations. I created all of the backgrounds using Adobe Illustrator. The style I chose resembled more of a 2D style using primarily shapes. I looked up inspiration for all backgrounds as we decided that we needed the backgrounds to be good enough to look at for some amount of waves (around 20 waves on average). I had a lot of fun designing and creating the backgrounds.

Zombie Characters

To complement the backgrounds, we needed zombie characters in which would be tapped to death (or DPS death) by the player. I also created the zombies in Adobe Illustrator. As a team, we decided that a fun and goofy style would complement my crisp and shape-like backgrounds. These zombies are more freeform rather than lines and shapes. As a result, I as able to develop a bit of a template for myself and give myself the ability to create multiple zombies that looked different from one another.

We also needed to create "boss" zombies, which these bosses had props and different animations to go along with them. I will show some of my zombie characters that I created below.

Allies Portraits

Another piece of art that needed to be created was allies portraits for the "allies" section of the game. Like the game backgrounds, we had locations of places and the allies we unlocked were based on the location that you are in. So I had to come up with numerous ally portraits that fit with the description of the place. Again, the allies were created in Adobe Illustrator.

Challenges

Some of the challenges of Tap-Z was due to scheduling. Even though we were able to meet every Friday for a scrum, there were times where we had setbacks due to either designing or developing. Some of the things were out of control, such as sickness. We ended up having to move our finish date to a few months later than we expected. But even with that in mind, that gave me more time to polish my artwork and backgrounds to my liking. I tried to make the delay of the release of the game into a positive by polishing my work further. I was also able to test features and bugs out more thoroughly.

oh+yeah.jpg

What could've been improved?

Since the release of the game, we have received good reviews but not many downloads. One of the things I think could have been improved was marketing since we were releasing to the Google Play Store. However, on the design side of things I think I did as much as I could have personally. One thing that I think would be nice to improve was creating a story in the game like we originally planned to. In a clicker or incremental game that is non-existent but I think it would have been pretty cool to attempt at the very least. The UI was tested numerous times and I'm quite happy with it but I can't help but feel it was too simple? It got the job done but I think there could've been a way to make it pop out just a tad more. All in all I'm very happy with Tap-Z and the time spent to develop and design it. I learned a lot about game development and the UI/UX in games.