Case Study
Unnannounced Multiplayer Sandbox Game
PC & Console
Project Details
Multiplayer Sandbox Game, bringing people together through imaginative roleplaying campaigns accessible to all. The goal was to eventually allow players to create their own campaigns and assets (User Generated Content) to bring their own stories to life, with friends in a safe environment.
Role: Senior Visual Designer (UI)
As the Senior UI Designer, I worked closely with the Art Director and UX Director and UX team to design the style of the UI and create a visual design system. I take the UX wireframes and flows and create components and style guides to translate the functional designs into visually aesthetic elements. By converging the design pillars of Clarity, Aesthetic, Usability, and Delight, I aim to bring the players an immersive UI.
Challenges
For a feature rich multiplayer sandbox game with stage editing functions, the biggest challenge is real estate. In order for the players to be able to access all aspects of the game easily through the HUD and be able to play at the same time, multiple panels are open at once while also allowing players to view the gameplay happening on stage. There is also the unique aspect of having a video avatar embodied by the players that aren’t the characters in the game, in a tabletop roleplaying sort of way. In order to fit them all well while being able to allow the players to enjoy the game fully, all panels have to be modular, scalable, and responsive. In addition, we were creating an entirely new IP that no one has seen before, the UI needed to be sci-fantasy but feel modern at the same time in order to match the world and characters that we’re creating.
Design Process
Competitive Analysis
I start off the project usually by gathering references and breaking down UI aesthetics into the categories below to help me understand how similar games approach their UI design.
Style Exploration
To design a style of a completely new IP, I looked at the art direction and lore of the game and picked out some overarching themes used throughout the project to determine the art style of the UI. The UI needed to complement the play space without being too intrusive, yet not look too utilitarian to prevent players from feeling like they’re using a work software. The result was a combination of clean, gridded UI with small, world-related design elements.
Initial UI design passes, some of the themes were: Retro futurism x Magic, Constellation Storytelling, Adventuring in not-National Parks and Gritty post-apocalypse
We landed on a theme that was a more modern version with clean icons and typography while saving the elements of constellations and adventuring for theming. Going with a more muted palette also helped the UI separate from the BG while allowing the colorful, sci-fantasy play space to shine through.
Design System
Our game was focused on accessibility as we wanted all players to be able to play with ease. All colors, typography, and iconography are designed with WCAG guidelines in mind.
Colors
To ensure that the UI reads between dark and light backgrounds, we picked a dark panel with light text for easy readability across screens and stage lighting
Typography
Our typefaces needed to contain glyphs across various languages as we prepared for localization
Design Elements
With the theme of constellations, I used various combinations of circles and lines to create elements throughout the UI
Iconography
Clean, minimalist iconography was used for navigational icons for clarity and readability across scales, and also to separate from the more illustrative and game specific icons like abilities and attributes. It also adds a modern touch to our sci-fantasy genre as the lore is set in a post-apocalyptic modern world.
Layouts
Using the design systems above, the elements come together to form cohesive layouts that resonate throughout the game. These are some of the screens chosen to represent the overall UI art direction.
