HTML5 Game Portal

Game-based product learning for Citi employees.

  • Company

  • Citi Group
  • Role

  • UX Designer
  • Contributions

  • Information Architecture
  • User Flows
  • Wireframes
  • UI Design
  • Hi-Fidelity Mockups
  • Tools Used

  • Axure
  • Photoshop
  • Illustrator
Rogers assessment tool

Overview

Most people need effective and interactive experiences that motivate them to actively participate in the learning process. One of the ways to do this is through game-based learning. Citi wanted to create a game portal that would include a HTML5 built 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.

Requirements Gathering

When designing the experience of a game, it is always important to not only understand the gameplay but the technical details as well. For example, the different functional parts of the portal, whether the game is a fixed size or responsive, and how a user would access the portal.

Rogers assessment tool

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.

Rogers assessment tool

Wireframes

The wireframes include the entire game flow, the game portal that houses the game, as well as the content and admin system. There is a total of 75 wireframe pages including a master that identifies the flow and how each wireframe correlates with each other.

Rogers assessment tool

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.

Rogers assessment tool

Designing the Admin / Content Managing System

I also needed to design the admin system that will be used for this game portal that properly aligns with the game content and business goals. 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. I had to find the right design that supports both the user goals and business goals.

Rogers assessment tool

Visual Design

After completing the flows, interactions and providing detailed wireframes, I was asked to take a few selected wireframes to create hi-fidelity mockups. Having previous experience designing for games, I was able to swiftly create a few polished designs of the game, the interfaces, as well as the overall tone and style.

Rogers assessment tool
Rogers assessment tool
Rogers assessment tool