Empire Millennium Wars

HTML+React+PixiJS

MY ROLE

UX Lead / Tech Artist

TEAM SIZE

5 to 25

TOOLS

Sketch / Abstract / Framer / Zeplin

ABOUT THE PROJECT

 

This technical pilot started as a Research and Development project to explore the realms of native web games based on HTML5 and JavaScript. After the "proof of concept" we turned the demo into a shippable product. The initial game concept was based on a previously released mobile version. Goodgame Empire: Millennium Wars is a complex MMO empire building game in which the player conquers and explores Mars.

(Empire: Millennium Wars).

CHALLENGE

  • HTML + React as new core tech stack

  • The source of our development (the mobile app) was in the development stage itself while we were porting it

  • Keeping design changes to a minimum in order to align mobile and web  platforms

  • Using new technology (native HTML5 within a short timeline)

DESIGN PIPELINE

 

We put a high focus on reusability, clear and agile documentation for design proposals and features, as well as an agile collaboration when exploring new patterns for the web version. Utilizing a communication document for aligning project related naming conventions was a valuable tool as the project evolved.

ATOMIC DESIGN AS THE FOUNDATION

Going with Atomic Design was a perfect choice for the desired Tech Stack and the underlying design pipeline. In order to support this pattern as best possible, we set up two additional systems:

  1. Design System with SAZ

    • Sketch master files as the style guide and root for all wireframes

    • Abstract as a versioning system for the design files

    • Zeplin for the Front-End sync

  2. Living Style Guide

    • Component storage and live preview for all components

    • Synced with development and production environment

Atomic Design - schematic
Paper prototyping

INITIALIZATION

Setting Up Pipelines and Tools

During the project initialization, we defined a couple of goals:

  • Vision alignment

  • Change catalog (features)

  • Product goals and milestones

  • Communication documents

  • Deliverables & Design System

RESPONSIVENESS

 

One major business requirement was the partner portal integration (e.g. gaming portals) and therefore a minimum playable resolution of 800x600px. I solved this with anchored HUD zones that were populated with corresponding components. The interface heavy interactions were handled by a centered panel with two flexible content spaces.

 

At the lowest resolution, only the main panel is visible and provides a good playability throughout all screen sizes. Additional breakpoints were added for future responsive improvement sprints to maximize the usability on 4K screens.

EXTENDING THE MOBILE FLOW

 

I could not change the architecture as much as I wanted since the entire UI design was connected to a sensitive economy balancing system underneath. So, in order to provide equal user flows on mobile and web, I utilized additional navigational elements like "breadcrumbs" and smart content components. Also, the double panel system provided a good hierarchy for more complex decisions and was able to hold more information without adding noise to the interface.

Another important improvement was the "hover"-state for the web.

 

Content distribution
Main panel research
Responsiveness

ARCHITECTURE

From Mobile to Web

Defining the information architecture included:

  • Responsive behavior

  • HUD mapping

  • Cross-platform experience

  • User Flow & Behavioral patterns

  • Content distribution

Wireframes & Prototyping

Design Systems for president

Main topics during this phase were:

  • Establishing a scalable and safe design system

  • Fast and consistent deliverables

  • Global and detailed design updates throughout existing wireframes

  • Design system as the single source of truth

  • IxD - template system for prototyping

DESIGN SYSTEM AS HUB

 

One of my main goals was to reduce redundancies while avoiding design update loops. The perfect tool was Sketch and its nested symbols system. Using the atomic design approach allowed me to stay very close with our developers and made it easy to communicate new components through one tool and location.

 

The ever-growing system library made new designs lightning fast since only new and unique components needed a new design. This workflow allowed me to propose different designs for testing and exploring without losing important time.

EFFICIENCY AND SMART PIPELINING

A crucial factor for the success of a free to play browser game is the accessibility. Loading time is one of the pillars. The whole interface design of this game was based on code whenever possible. Only illustrations and banner graphics were added as images. All monochromatic icons were vectorized and embedded in an icon font. The icon font was also used in Sketch for nested symbols, which allowed me to colorize and scale all interface icons - a blast!

I imported all images from the mobile version into Sketch and linked it with appropriate components. The symbol-override feature allowed me to create real-data wireframes which are the best way to determine whether the design is working properly.

Color exploration
Screen composition
Image library
Nested component - Infopanel
Nested Symbol - shop item
Design System - example

RAPID PROTOTYPING & TESTING

 

Prototyping was a constant layer from the very beginning. I started with simple paper prototypes to determine UI flows and the distribution of HUD components. Later I used more complex tools that allowed UI Designers and stakeholders to rotate several interface designs in a game-like environment. All interaction patterns were tested and approved before implementation via prototyping.

 

Framer’s code-based interactions were perfect for the handover to developers. All UI animations were also embedded in the style guide to provide consistency throughout the patterns.

Mockup - Item inventory
Prototype - Building flow

Highlights

Achievements and Lessons learned

The project contains some gems:

  • A solid and scalable design system

  • Fast wireframing / prototyping on any fidelity level

  • A high-performance game with minimal loading times

  • Atomic design improved the quality of code and design

  • Several UI improvements were applied to mobile

  • Design system allows fast UI tweaks and even re-skinning

Atomic Design - schematic