UI Overload on Mobile

2017 | Goodgame Studios
emw_title.jpg

This freemium mobile massively multiplayer online strategy game focuses on complex research and economic cycle. Inspired by Mobile Strike and Game of War, it still takes its own direction with additional gameplay layers (e.g. mining, rallying). (Empire: Millennium Wars).

Goal

Leading the UX design with a wild cluster of highly skilled UI artists that never really heard about UX design in gaming

Challenges

A 30+ team with fluctuations and changing scopes.

 

Up to 5 UI artists were working together without critical tools like style guides or scalable design pipelines.

I joined the team pretty far down the road, when the team realizes that the UX needs improvements.

What I've achieved
  • Critical UX improvements in all main dialog flows

  • Better tools for the design team

  • Better visual alignment within the team

  • Clear UX guidelines for new features

  • Improved consistency and accessibility across all interface components

What I've learned
  • Sometimes more people doesn't increase the production speed, especially when the workflow does not scale well.

  • Documentation and communication is the most critical asset if you want to save costs and develop faster.

  • Interface animations are not fluff or additional luxury - they are critical components of a great user experience - especially in games.

Tying Your Shoes While Running

emw_app_mockup.jpg

When I joined the team, five UI Artists were working on the product. The main architecture was already developed and a lot of interface elements were implemented. The design team was working without a style guide and without a shared UI library.

 

Different tools let to different deliverables and developers were often not sure which was the latest version of a design. Five game designers were doing the wireframes which were approved by different people. Before I could take care of any UX related tasks, I knew that I had to remedy this situation.

Redefining the design process

After observing the project dynamics and sprint results for two weeks, I set up a meeting with the design team to discuss and agree on several necessary action items:

  • Creating and committing to a single product vision

  • Establishing a single source of truth for any design deliverable (including update loops)

  • Simplify approval loops

  • Integrate UX as a facilitator between product management, UI artists, Game Design and Development

  • Regular small sync meetings for the first couple of weeks to align all designers

UX corner

After a couple of days playing the game and analyzing competitors with a similar core loop and UI cycle, I wrote a 20 pages report with live examples of all crucial pain points. Together with Game Design and Product Management, we went through the list and prioritized the action items.

Based on the approved list, I could start working on solutions and new features.

UX Improvements

Building scalable interfaces and world items that remain usable throughout all stages of progress heavily relies on testing and scale up scenarios with real content. A big challenge in games is often user generated content and its constraints. Designing with scalability in mind means more than character limitations or providing enough white space.

Sample 1

Sample - Monetization optimation

Sample 2

Flow sample - Base building

emw_comp_march

Manager panel - quick improvements

Sample 4

Inventory screen - quick improvement

Sample 5

Readability issues with user generated content.

UI Art challenge

Classic example of UI art without UX consultation. Users have trouble identifying the different selected and states in this progress tree.

Prototyping Time

Once the product vision was defined, I had a better understanding of how the interface should be recognized. Interactive demos helped us with internal playtests and feature evaluations. A better interface feedback allowed us to minimize certain areas that were necessary beforehand to guide the player through the task. The whole onboarding flow was iteratively prototyped with Framer before implementation.

Sample - Store interaction

Sample - micro animations to communicate status changes.

Server Response - test

Empty states and server response times needed a solid feedback too.

Sample - Tutorial flow

This prototype helped us to test different lengths and flows for the on-boarding experience.

Play the game
Empire: Millennium Wars
Conclusion

That was a piece of hard work. The more we worked together as a team and provided constructive feedback the better the output and speed. I joined the team when user experience was a fairly new discipline in the studio an most of the product design work was done by game designers without a different focus on the outcome. Game designers were happy to let go of some critical interface design tasks in order to focus on more deep game related topics like monetization, end game scaling and the complex economy cycle.