Age of Empires: Castle Siege

Creating a Medieval World

The work I did on Age of Empires can only be seen here. Sadly, the work I created did not survive to the final game. The project changed dynamically and the team was re-organized. Another team took over and kept some of my UX framework, but the UI assets were all scrapped. Regardless, I did get a chance to work on this project for quite some time. I wanted to create a user experience that was fluid, easy, and didn’t look stereotypical mobile. *The work shown here is not fully complete, showcases concept art, and placeholder imagery.


Client: Microsoft Game Studios
Role: UI/UX Designer
Art Director: Dave Johnson

Age of UX

This section shows off the UI/UX that I had started to create. I am showing 3 different experiences within the game to showcase what could have been the user experience. Some of the images are placeholders and the main background image is just concept art.

Building an Economy

The economy of the game is controlled through the buildings in your village. You can select a building to see what options you are given. In this example, our building makes materials. We see cost and time to produce items, upgrades for the buildings, and various other stats.

Build Mode

The BUILD MODE allows a user to add additional structures and various other physical objects to their village. We see a slide out panel that allows us to make our selection and gives you information on the cost and what types of actions it can perform.

Military Units

There are 2 military unit modes. The main one shown below is when you are upgrading and making changes to individual units. The last frame is when you are selecting units to deploy. In both modes we are given detailed stats about each unit.

Medieval User Interface

Some of my additional tasks were to create all the icons in the game (well as much as could be completed). I did a lot of research into medieval architecture and art to establish a style that wouldn’t conflict with the game, would blend in well, and not look overtly mobile styled.

Previous UX Wireframes and Initial Art Test

These are just a handful of some of the first stages of wireframing and art test I did for Age of Empires. There are too many screens to have here (about 100 pages) so I have just taken a few from each version to showcase that work.

Version 1

In the first version of the wireframes, I was just trying out as many different layouts and options just to see what looked and felt right. The first step was about 10-15 variations of just the main layout with no overlays or mode UX. After 4 were picked as potentials, then I further those explorations by trying out other modes, clicked actions etc to see if the overarching layout still stood strong. We picked a main version from this and started to refine.

Version 2

In version 2, we picked a main layout but we were still testing out other UX flow and possibilities. My Creative Director requested to start adding a very simplistic style to at least give a general idea of what the UI could eventually be. I then started to do more “visual” wireframing at that point. Visuals were used, but they were still not the main focus.

Version 3

Layout took a pretty big turn. One of the temporary designers started to stylize my UI a bit more and I had to start using the new style for my “Refined” wireframes to again start help establishing a visual style since our design/art team was pretty much just me and him.