Munchkin Level Counter

The Munchkin Level Counter (MLC in short) is a personal side project made with the goal of improving the game experience of people playing the Munchkin card game. MLC makes it easier to keep track of everyone's player stats. I personally disliked the experience of the apps that were already out there and always keeping track of everything on paper gets messy after a while.

Type: personal project
Build: v1 in Q2/2017, v2 in Q2/2018
Roles: UX/UI designer, front-end developer
a preview image of the Munchkin Level Counter

Getting started

Research

Before designing my own version of a Munchkin level counter, I spend time doing research. This included playing the game at least a couple of times, reading and consulting the manual and testing other level counter apps.

What is Munchkin?

Munchkin is a card game where 3 to 6 players choose a character and compete to kill monsters and grab treasures. The player who's character reaches level 10 by defeating a monster, wins. Treasures include armour, single-use items/weapons, curses and allies.

Munchkin card game

Choosing platforms

To realise this project I decided to build a responsive web app in React, so that it would be accessible to almost all screen sizes and independent from native technology. This would make it usable on smartphones, tablets and computers, as long as the user has an internet connection.

My experience with using other level counter apps helped me steer my choice in this direction. All those apps were native and didn't offer the best user experience for the devices they had been designed for. In some cases the design didn't always fit properly on the device screen. In other cases the apps had poorly designed interactions and on top of that usually a pretty outdated design.

Writing it all down

Usually when I am going to build something, or when I have to design something, I start with writing out the core functionality and flow of the app (or website). That gives me a good idea of which data I'm going to work with and the kind of interactions people might expect to do certain things in the app.

A paper with facts and data written on it

The lesser user experience of other level counters were my first focus points. The apps I tested, were all native or wrapped. I deliberately choose not to focus on something native, for more flexibility and to make it more accessible to a lot of different screen sizes.

Sketches

I started making some quick sketches of various ideas that popped inside my head and tried imagining how they should work. Instead of mobile first, I sketched for bigger screens. That way I could focus on figuring out the flow and interactions first and then compare it to how it should work on mobile devices.

paper wireframes for the level counter

Gathering initial feedback

My focus group was experienced Munchkin card game players. I have a couple of them amongst my family and friends, so I used that connection to gather feedback. Talking with my connections and possible users helped me create Geeky Dave, a persona to visualize and remind me of my focusgroup. Geeky Dave helped me to focus on the right problems and solutions and to make the right decisions.

paper wireframes for the level counter

As I said earlier, at first I started by figuring out the core functionality, mostly by testing the game experience, taking notes, observing a game every now and then and jotting down quick ideas. After that I started making some digital wireframes and from there on I moved over to working out some ideas for the actual UI design. Mostly recurring components, which could be replaced or altered easily when necessary. I designed the screens I needed and created a marvel prototype to test it. This gave me the chance to gather some more feedback, before I dived into the development phase.

MLC desktop prototype v1


A visual styleguide for v1

At the end of the v1 design phase I created a small visual styleguide (mostly for fun).

MLC v1 styleguide

Working on v2

Nearly a year after the first version of MLC was published on the web, I started on version 2 and rebuild it from scratch. But design-wise I kept the parts that worked well, improved some of the weaker parts and added more core functions, such as:

  • The ability to rearrange the player order
  • Deleting players
  • The proper stats reset after a player dies during the game
  • The ability to preview and editing the players & characters while you're preparing your game session.

I used the same workflow to create version 2, minus the testable prototypes on Marvel.

App core functionality

The following sections are what I defined as core functionalities of the MLC app:

  • Adding players
  • Editing players
  • Deleting players
  • Changing the player order
  • Updating player stats
  • Updating a defeated player
  • Resetting the app

Nice to haves

I also implemented a few functionalities of the nice-to-have pile, but those were added after the basics were already tested properly.

  • Quick add button, this allows you to quickly add players during setup
  • Autosave on localstorage, saves after every change made
  • Load a previous game-session. If for some reason you accidentally left the website, you can just continue your game-session right where you left off.
Munchkin Level Counter V2 Demo

Challenges

Personally what I found most challenging working on this project was figuring out how switching between the alter ego's of the available characters, could be made clear and simple. My second challenge was the functionality and look of the player previews in combination with the quick-add button during game setup. I knew more or less how I wanted to use it, but it took me some iterations to get it right.

Future plans

One of the improvements I would love to add in one of the future updates, is some sort of offline availability, so that users wouldn't be dependent on an internet connection anymore.

MLC all mobile screens in order of the app flow