ROOT
I worked on UI/UX art and design for the digital adaptation of the board game Root. I’m a big fan of the pen & ink with watercolor wash illustration style and it was an exciting challenge to carry that through the UI.
PLayer Faction HUD
Root has an asymmetrical design where each faction plays with different rules. Each faction required a different set of action buttons, inventory, and stats. I took inspiration from RTS games like Starcraft when designing the UI for Root. The top-down camera angle and bottom-anchored “control panel” worked exceptionally well for this project. The primary goal for the UI design was to distill the complex mechanics of the game into a clean design that felt approachable. The mocks below were early explorations of the general layout of the HUD.
After finding an approach to the HUD that we were generally happy with, I began exploring animated mockups of the core game actions in engine. For the March action, it was important to offer player’s hinting that distilled their options down to legal actions and ease the mental gymnastics of the physical board game. I also wanted it to feel like you’re moving real woodland armies around the battle field.
UI Animation
With Root, we wanted to bring the board game to life as much as possible by building out a 3D environment, converting the 2D game token icons into actual buildings and make it fun to interact with them. The following gifs show a variety of in-world gameplay UI animations.
For the front-end, we designed the UI to allow room for the 3D environments and characters to shine while also providing all of the tools required to set up the various game configurations with ease. We wanted players to feel like they were in the world of Root from the very first login. We used the illustrations from the board game to provide rich color and texture to the frames and buttons. Character illustrations from the game were also used to accompany and reinforce the theme of each screen.