← All case studies

CASE 02 · GAMIFICATION AND GAME UI

Gamified interface for five serious games

Role
Game interface
Years
2017 — 2021
Games
ADA · TKS · MARS · Pacific · Merchants
Stack
React · SASS · GAT engine
GamificationReactSASSHUDMenus and panelsViewersTutorialsResponsive
MARS: resource HUD over the 3D colony
MARS · resource HUD over the colony: oxygen, water, food, energy, housing, happiness and coins.

What I did

In Game Strategies' serious games, gamification lives in the interface: points, rankings, rewards, timed challenges, progress and instant feedback, plus menus, HUD, conversations, viewers and tutorials. I designed and built that layer for ADA, TKS and MARS, and for the GAT engine they run on. In Pacific and Merchants I built the menu and button UI.

The 3D, the narrative and the game logic belong to other teams; my part is the interface.

MARS: panel to build a facility with categories, cost and rewards
MARS · building a facility: categories, cost, turns and rewards.
MARS: end-of-game screen with the colony podium and statistics
MARS · end of game: colony podium and statistics.
MARS: timed challenge with three answers
MARS · timed challenge between colonies.
ADA: 3D scene with the item inventory and a hint
ADA · item inventory and hint over the 3D scene.
ADA: connection mini-game with level, panel and actions
ADA · connection mini-game: level, panel and actions.
Triskelion: daily tasks with energy, stress and points
Triskelion · daily tasks with energy, stress, points and time.
Pacific: action menu on a character on the island
Pacific · action menu on each character: delegate, give feedback, develop, reward.
Pacific: profile of a team member
Pacific · team member profile.
Merchants: negotiation variables panel
Merchants · negotiation variables: financing, contracts and discounts.
Merchants: negotiation result with a reward chest
Merchants · negotiation result with a reward.

How I did it

01

Layout before integration

Each screen was first built in HTML and SASS, outside the game, to validate design and responsiveness before moving it into React.

02

A UI system per game

MARS had its own component guide: buttons, progress and loading bars, panels and alerts, documented and reusable.

03

Components that get reused

Shared React UI components across games on the GAT engine: what worked in one game was reused in the next.

In numbers

100%

of the styles in MARS's interface

98%

of the GAT engine styles

1,323

commits on ADA, TKS and MARS

60+

MARS screens built in HTML