A common learning process includes interactive experiences that borrows the principals of gamification to increase learning retention and motivation. Citi wanted to create a game-based learning portal that would include an HTML5 web-based trivia game to test and increase employee knowledge of the business. The trivia game will be used in a way to improve cognitive skills by providing mental training and problem-solving practices.  A social platform is also built into the portal to promote team building and develop the corporate culture using leaderboards, points system, rewards, and sharing. Working with the Citi team, I was tasked to conceptualize the overall experience of the game including providing game mechanics, interactions, implementation documentation and more.

Product Designer


In order for me to bring their game idea to life, I had to understand the gameplay along with their technical details as well. The different functional parts of the portal, whether the game is a fixed size or responsive, and how a user would access the portal. Gathering the requirements and documenting each step helped visualize the experience needed. The 3 major parts to the project includes, the learning portal, the trivia game, and the CMS platform used to add new content and questions to the game.

Defining game mechanics

Working together with the Citi team, we defined the main interactions and game mechanics. Categorizing each task flow, business needs and requirements. Understanding the screens needed to be designed from start to finish including edge cases like user leaving during the middle of the game.

User Flows

The flow represents how the game portal works as well as a step-by-step process of the game. Including where a user starts the game, what happens when a user completes a round, and the final outcome when a user finishes a session. A slightly higher fidelity approach was used to allow stakeholders to imagine the final result.


Low fidelity sketches and notes were created during whiteboard sessions and also by using collaborative tools like Realtimeboard. Based on the sketches and additional insights, wireframes were created to determine interaction patterns and to visualize the user behaviours. Over 70 pages of wireframes were created including unique screens and the different states involved.

Game Interactions

As the game itself is the main piece of the portal. Game interactions are labeled in detail to ensure the game flows smoothly and to assist the game developers in understanding the functionalities of each screen.

Designing the Admin / Content Managing System

I was also tasked to conceptualize the admin system that will be used for this game portal ensuring it properly aligns with the game content and business needs. Some of the requirements include managing game questions and categories. One of the challenges was that they had specific ways to manage user information as well as game features forcing the design to support the user and business goals in a particular way.

Visual Design

Citi was happy with the success of the game experience design, additional scope was created to provide a few concepts of the look and feel of the game itself.

Citi brand guidelines were provided but with the intent of inspiring the game design. However, the goal was to create a game that was fun and engaging deviating from the traditional corporate feel.

Earlier concepts of the game included color variations. However, the team felt this deviated too far from their brand and wanted to explore something else.

Citi preferred this concept that stayed closer to the brand guidelines while maintaining a fun pattern that was similar to games on the app store.