Making game results clearer to support learning

BUILD's FamBiz CEO Simulation, Comcast NBCUniversal.

Introduction

I joined this project after it had already started, so I had to understand everything, catch the style, and get on board. One of my tasks during my time here was to improve the usability in various areas of the game. In this post, I’ll tell you about how I changed the results page to make it more intuitive.

Project Context

BUILD.org, a 25-year American industry leader in youth entrepreneurship education, which partnered with Comcast NBCUniversal to create BUILD’s FamBiz CEO Simulation Game. It’s a free and educator-led entrepreneurship simulation game for students in grades 7-12, introducing youth to the fundamental skills and mindsets they need to lead in school and in life.

The Problem

The game follows the structure of a choice-based system. Users have a general Dashboard where they can view metrics of a Cookie Factory they are managing. From the Dashboard, they access various challenges. The challenges follow a classic interactive story structure. The player is presented with a dilemma or opportunity from a character, such as a “client,” “coworker,” or “friend.” They are given different options to respond to the situation, and after choosing one, they receive a response from the character and feedback on their decision.

The outcome of that decision affects their metrics, which is then displayed on a “Results” screen, showing how their choice impacted the game. Players can’t see the Results and the Dashboard at the same time, so relating these two screens requires them to remember the icons, the meaning of each metric, and their current values.

Original Results Screen.

Dashboard Screen. With impacted metrics.

The Problem

Keeping track of how their choices impacted the stats demanded memory, which added mental load.

Ideation

The goal was to:

  • Reduce player’s memory load

  • Relate the results to the metrics on the dashboard

  • Clearly connect the affected metrics to the challenge, showing the direct consequences

Designing an educational game means finding balance. It has to feel clear and intuitive, but still keep some challenge. If we explain too much, we lose discovery. If we explain too little, we cause frustration.

Solution

I incorporated dashboard elements into the results view to create a clear visual link between both screens and help users quickly recognize each metric. I also added hover tooltips on both views so players can easily access context about each metric at any time.

In the new Results view, changes in stats are shown over their current state, maintaining visual continuity.

Key stats are shown on the dashboard, with matching colors is how their impact was show in the Results view.

I added animations to clarly show how the metric values change, and… to add a little more fun. It's a game!

The new view had a positive impact on students. It reduced the number of questions about results asked in class and helped them better understand the outcomes of their actions.

Mentions

During this project, I had the honor of working with Karulox, a creative and hard-working 2D artist.

Everything designed, from user experience to game logic, before I joined was created by Pablo Artee, an amazing Product Designer I’ve worked with.

FRIENDBASE

Mobile videogame

I took sign-up conversion from 34% to 77% with research, testing and design. Part of my experience as designer on a videogame for teenangers.

FRIENDBASE

Mobile videogame

I took sign-up conversion from 34% to 77% with research, testing and design. Part of my experience as designer on a videogame for teenangers.

FRIENDBASE

Mobile videogame

I took sign-up conversion from 34% to 77% with research, testing and design. Part of my experience as designer on a videogame for teenangers.