Empire Earth 2 is an old-fashion strategy game based around building an empire. I redesigned its UI and created a Design System to match collected User Research.
The theme of my End of Study Project was “Design System”, and I had the choice of the singular project I would work on. I had wanted for a long time to do a redesign of an old video game, and this was the opportunity to try using my knowledge of Design Systems on a more practical and innovative use case.I selected Empire Earth II because I knew that it was a game that was criticized on its lack of usability, and that its complex design was a good example of which kind of products could benefit from a Design System.
<a id="approach">Approach</a>
Here is how I approached this redesign:
- User Reseach : Testing the game with Usability testing, defining the target through Personas and identifying the experience issues with an Eperience Map.
- UX Design : Solving the problem through Information Architecture and identifying which systems needed to be improved through UI.
- UI Systems : Designing Atoms through Components, designing the UI System and laying out the documentation to use the Design System.
- Final Experience : Mockups and Prototype build based on the Design System
<a class="mainbutton" src="https://politessier.webflow.io/empireearth-ux">Access User Research and UX Design</a>
A Design System is a design tool for a complex interface infrastructure, that makes design iteration and adaptability its priority.
<a id="designsystem">Design System</a>
<a id="goal">Goal</a>
The main goal of a Design System is to organise and render as modular the design decisions that were taken when designing the visual elements and hierarchies of a said product. It is not only a dictionary of the visual language that is applied throughout the project, but also a tool that allows to iterate on these decisions and have an impact on the components that is quick, global and effective.This translates to an organised Figma file as well as a thorough documentation (I chose Zero Height to host Empires’ documentation).
<a id="atoms">Atoms and Primaries</a>
As it is based on Atomic Design, the basis of the Design System is Atoms and Primaries. This is where I defined simple shapes, colors, iconography and typography for the project. Color palette was fitted for referencing ancient and historic design, with clay and gold tones, while the shape language has been design so as to be more modern, using wired lines.As for typography, I chose the Spartan font, which is a sans serif modern reimagining of roman fonts.
<a id="components">Components</a>
<a id="documentation">Documentation</a>
One of the main responsibilities of a Design System creator is to properly document how each component is intended to be used and to keep the documentation up to date as the Design System evolves through different iterations. For Empires, I hosted the documentation in Zero Height, along with a quick guide to the documentation, guildelines for asset naming and resources.
The citizen is selected and now can build a University
This is the Technology Panel, where the player chooses where they want to spend their Technology points
<a id="prototype">Prototype</a>
Here is the final prototype of the “Avance to Next Epoch” user path. Here the player selects a citizen, builds a University that gathers Technology points, spends these points in the Technology panel, and then is able to advance to the next epoch.
