UI/UX · Game UI · Research
Spirit Messenger
Educational game UI exploring African heritage, HUD design, complete UI system, and cultural research.
Overview
A HUD that teaches without lecturing
Spirit Messenger is an educational game exploring African heritage through a young messenger's journey. I designed the complete UI system: exploration screens, a HUD that stays legible over changing backgrounds, and a paused menu for inventory and reflection.
The design challenge was keeping the interface out of the way of the story. HUD elements needed to read instantly against sky, terrain, and character art that shift constantly as the player moves.
Research
Designing UI for a moving background
I researched how other narrative and educational games balance legible HUDs against constantly changing art, and how cultural content is presented without feeling like a lecture.
01
Fixed contrast beats fixed color
HUD elements that relied on a single background color broke as soon as the scene changed. A consistent scrim or contrast layer held up far better than picking one palette.
02
Pausing should feel like a beat, not a wall
The strongest educational games treated the pause menu as part of the story's pacing, not a hard interruption, using it to surface context and items collected so far.
03
Cultural detail lives in the small things
Authenticity came through more in item icons, clothing, and environment detail than in explanatory text blocks players tend to skip.
04
Icons need to work at a glance
Players rarely stopped to study a HUD icon. Anything unfamiliar needed a shape or color that read correctly in under a second, mid-movement.
Design Process
From cultural research to a working HUD
The process started with cultural research before any screen design, so the visual language was grounded before it needed to also perform under gameplay conditions.
01
Researching visual references
Gathered reference on West African textile patterns, clothing, and iconography to ground the game's visual language before designing a single screen.
02
Prototyping the HUD over real backgrounds
Tested HUD legibility directly against exploration art, not blank frames, since contrast issues only showed up once real backgrounds were in place.
03
Designing the paused state
Built the paused menu as a distinct but connected moment, surfacing inventory and progress without fully breaking the player out of the world.
Design System
A palette grounded in the world
Colors and components were pulled from the game's own environment art, then systemized into a token set so HUD and menu screens stayed visually connected to the world.
Primary
Warm accent used for active HUD elements, selected items, and calls to action in menus.
Neutral
Grounded neutrals pulled from environment art, used for HUD scrims, cards, and menu surfaces.
Semantic
Status colors for item rarity, quest progress, and inventory states in the paused menu.
Final Screens
Reflection
What I'd take further
Designing UI that had to stay legible over a moving, hand-painted world was a different problem than most app UI work, and it changed how I think about contrast: as a system, not a one-time color choice.
If I extended this further, I'd want to test the HUD with players unfamiliar with the cultural references, to see whether the visual language communicates on its own before any text does.