Stats Deep Dive Part 2: How the Screens were Designed

This is the second of a two-part article going deep into the post-match stats screens of Killer Queen Black (read part 1 here). Now that we’ve gone over all the information in the chart and graph screens, we can go back and discuss how we arrived at the final designs.

Everything in Killer Queen Black has roots in the arcade game, and our stats screens are no exception. The below image is a post-game stat screen created by Matt Abdou, a long-time Killer Queen player from Portland. He originally designed it for the Camp KQ tournament in the summer of 2019, and it was used again at BumbleBash 4 that October.

Matt Abdou’s stats page designed for Camp KQ.

Note some key differences with KQB that I had to address immediately – 

  • This only shows a single game, not a best of 5 set. Yes, games on the arcade version generally last a lot longer!
  • Player names aren’t feasible to display, they’d be too hard to update after each match, and in arcade you can more easily identify players by their character/physical position on the cabinet anyway. So here it makes more sense for a player’s data to be in a column, not a row.
  • Warrior kills aren’t explicit, but they’re the K in K:D minus queen kills.
  • There are no berry throws in the arcade game!
  • Warrior and speed gates are tracked separately, which doesn’t make sense for KQB, where you often have both upgrade types in one gate.
Remember this? Life sure was wild in the beforetimes huh

Some time around the end of January 2020, I sketched the below as a first concept for what an advanced stats chart for KQB might look like.

The first paper mockup for the post-match stats chart.

Details of this version include –

  • Switching to players being in rows so we can display usernames and profile pictures. This version also includes an icon for what character you picked.
  • The column on the left is copied from the original post-match screen, each showing the result of each game
  • Preserving presentation of K:D format from the arcade screen instead of listing kills and deaths individually
  • Separating out berry dunks vs throws
  • Gate control % and warrior uptime % are in the same column to save space in my tiny notebook
  • Extra column for adding friends or reporting players (looking back, simply selecting an entire row could have opened that submenu)

In addition to a chart, I thought it would be interesting to be able to visualize the story of a game over time in a graph, starting with the idea of post-match graphs of StarCraft as a general reference. When I got the go-ahead to start fully fleshing out the updated post-match experience, I started by making a very rough mockup in Google Spreadsheets, to illustrate the basic functionality before handing it off to our illustrator, Anailis “Ika” Dorta. The below mocks are from that spreadsheet, made on April 20th.

I also added a few extra details in photoshop – the legend above the chart, and the game scrollbar on the left.

Here’s an early comp Ika sent back on June 8th.

Seeing this mock made me realize I’d made a mistake by not hand-mocking the graph, as the lines in that version weren’t representative of how the lines should actually look to properly represent the information. Soldier and econ lines always go up in one discrete moment rather than on a slope, and econ lines never go down. There also was a bit too little contrast between each of the line types for everything to be quickly readable. So I sent back this quick drawing illustrating all of those points. Having the mock show actual possible values would help us iterate on the final visuals.

The other area we iterated heavily on was the icons for the chart headers. Ika came up with several possibilities for the various kill/death icons before we settled on the two-row header style of the final version. Here are a few options she made for queen and worker deaths:

We continued iterating on the presentation of the screens until we felt ready to send out our first ‘playtest’ survey to gather feedback on July 26th. We asked players what they thought of the following mock, and asked them to identify the various columns to make sure everything was clear.

The main trouble points that came back from the survey were:

  • The example econ lines were still to curvy, people were expecting a ‘staircase’ shape
  • Many suggested a toggle between the different stats, showing only one at a time for increased clarity
  • K:D was confusing to people, while arcade players were used to thinking that way, the KQB community wanted to see everything broken down much more granularly
  • Berry column was confusing, it wasn’t clear at all the numbers were supposed to represent dunks – throws – kick-ins
  • The inconsistency of showing a “-” for both queens and workers who didn’t soldier up in the soldier uptime % column confused people, so we made sure in the next version to only use “-” for “not possible” or “not applicable” and 0 or 0% otherwise.

To show kills and deaths in a more detailed way, I realized we’d need to go back to the original two-tiered header approach from my original drawing. Here’s a very rough mock I sent over to Ika on the 25th of August.

I also asked her to please make better icons for the berry columns than my very janky sketches! This is also when I first suggested trying a worker’s butt climbing in the hole as the berries dunked icon, as an alternative to the “thumbs up”.

Other feedback I suggested at this time resulting from the survey was removing the space in between each player row and changing the player name colors to white on both blue and gold, As for the graph, I sent the following, going into more detail about how the individual stat highlighting might work, and clarifying the display of some of the data –

The end of August was a whirlwind as Ika and I quickly went back and forth through several iterations. At first, she explored standardizing all of the icons with the existing ‘pixelated’ look from the original post-match results screen. But we both agreed that it didn’t look as good, and switching everything over to using the smooth vector icons would give us more freedom to explore different options.

On top, two comps of the ‘pixelated’ style, followed by one using the vector style we ended up using.

Ika’s next version of the graph also came a long way towards the final version. She also added tabs above the graph for the different views to make them even more clear.

From here it was just a matter of picking from different options for the header style, text and bar colors, and the icons themselves. Below is an example of a compsheet Ika sent over with various permutations. She’s exceptional at making these really quickly and they’re really great for prompting discussion.

My only remaining suggestion for the berry dunk icon was to offset the rows slightly to match the way they appear on most maps as well as to give the worker butt a little more space so we could enlarge it slightly.

Our next step was to send another “playtest” feedback survey out. This time, the results were extremely positive. We felt good enough after this 2nd round of feedback to move forward with implementation. Ika sent the final designs to Brice, our dev who implements all of the game’s UI. As Brice worked through adding the screens, they caught something that I was actually kind of embarrassed that I overlooked, which was adding the sum row under each team’s four players! That addition made doing a quick read of the results much easier, so I’m really glad they put that in. Teamwork makes the dream work!

Here again are the final results –

If you’ve made it this far, I really hope you enjoyed reading about our design process and got a better idea about how much work goes in to making these complex screens from both the team and our playtesters! And as always, thanks for playing Killer Queen Black!

One thought on “Stats Deep Dive Part 2: How the Screens were Designed

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: