Age of Empires: Castle Siege

Castle Siege brought Age of Empires to the iPad, in the spirit of Clash of Clans. The series had only ever been on PC, and it was one of my favorite games growing up.

I was the only UI/UX designer on the team, so I owned all of it: the research, adapting the framework for touch, the flows, and the art style. Much of the framework came from existing patterns in the Age games and Clash of Clans; my job was simplifying the Age flow for quick touch play, and giving it an art style that felt like Age of Empires rather than every other iPad game.

Role
Sole UI/UX designer
Services
UX designUI designArt direction
Client
Microsoft Game Studios
Team
22–25 people
Platform
iPad
Year
2013
Castle Siege town view with the game's interface

Build mode

Building and attacking became separate modes so players could focus on one at a time. Build mode went through many rounds to feel fast on a touch screen, keeping actions close to where your hands rest on an iPad.

First run
Building is central to Age of Empires, so the first pass set the framework and flow for how players build their empire: easy to touch, and simple.
After testing
Playtests showed that on an iPad your hands rest on the sides, so I kept the building actions close to them to cut down hand movement.
Final
More iterations made building feel fluid and fast on touch, while still feeling like the PC games.
Build mode with the building menu down the left edge
1 Choose a building from the menu down the left edge.
Blacksmith details scroll with its cost and a Build button
2 See what it is and what it costs, then build.
Not enough resources dialog offering to buy the rest
3 Short on resources? Buy the rest in one step, or cancel.
Placing a building: the footprint turns green where it fits
4 Place it: the footprint turns green where it fits.

Economy

RTS games are all about maximizing your resources, so the economy needed a system built for touch.

First run
The flow followed existing patterns from the Age games and Clash of Clans. The challenge was showing it simply.
Honing the flow
I cut the visual information down as far as I could, so players weren't overwhelmed and could manage resources with fast touches.
Final
With the framework settled, I applied the art style I had established for the UI.
Butcher selected, showing its production timer and a speed-up button
1 Tap a building to see what it's producing and how long is left.
Textile Mill selected, with four products to choose from above it
2 Choose what it makes, right above the building.
Linen Cloth details: workers, cost, time and yield
3 See each product's cost, time and yield.
Complete task now? dialog with a gold price
4 In a hurry? Finish the task now with gold.
Upgrade Refinery to level 6 scroll
5 Upgrade it: what it produces at the next level, and the cost.
Upgrade Butcher to level 6 scroll, adding storage
6 Upgrades can also add storage.

Army

Everything you build leads up to the fight, so attack mode got its own focused space.

Military screen with every unit, its level and its status
1 Every unit at a glance: level, type, and whether it's ready.
Catapult details: strengths, weaknesses, ability, upgrade and abilities
2 A unit's strengths, weaknesses, abilities and upgrades.
Accelerate recovery with rations or gold
3 Speed up a unit's recovery with rations or gold.
Deploy Units screen with the army tray and Attack button
4 Pick your army, then attack.

Art style

I wanted the interface to feel like part of Age of Empires rather than every other iPad game, so I started with history: carved stone, since so much of the game is about building; stained glass, to give buttons their own flair; and historical relics with religious or mystical meaning for the special artifacts.

Research board: carved stone studies, stained glass button explorations, and sketches of historical relics

The final elements feel like an iPad game and like Age of Empires. I also proposed that the interface change as you age up into later centuries.

The final set of interface elements and icons