Sid Meier's Civilization VII

In the Civilization series, advancing to a new age is a pivotal moment. For Civilization VII, the design directive was to transform this moment from a simple notification into a memorable, cinematic reward.

My task was to lead the UX design for this experience. We had three major challenges to face with this feature:

1. Celebrate the Player
How could we create a visually stunning and emotionally resonant experience that made the player feel a true sense of accomplishment?

2. Communicate Complex Information

The transition needed to clearly summarize the player's achievements from the previous era and set the stage for the next, without overwhelming them with data.

3. Ensure Cross-Platform Excellence
The design had to feel native and intuitive on both mouse-and-keyboard setups and console controllers ("living room devices"), maintaining a consistent, high-quality experience for all players.

I owned the feature from initial concept to final implementation, leading a process rooted in collaboration, rapid prototyping, and proactive problem-solving.

I began by facilitating workshops with key stakeholders, including game designers, narrative writers, artists, and engineers. We used visual process maps and journey mapping to align on the core goals and emotional arc of the experience. This ensured that from day one, we had a shared vision that balanced creative ambitions with technical constraints.

With a clear direction, I moved into Figma to create wireframes and user flows. This allowed us to map out the sequence and information hierarchy. I then built high-fidelity, interactive prototypes to simulate the entire Age Transition experience. Presenting these prototypes to leadership and the wider team was critical for gathering feedback and securing buy-in, allowing us to iterate quickly without writing a single line of code.

During development, we hit a critical production bottleneck. The engineering team was over-allocated, and the middleware used to render our UI (Coherent) had a crucial limitation: it did not support 3D CSS transforms. We could move, scale, and rotate objects, but we couldn't move them in 3D space. The art team's vision for a dynamic, layered, multi-plane animation was technically impossible with the tools we had.

Seeing the problem behind the problem, I took initiative. If we couldn't use true 3D, I would find a way to fake it.

I went back to first principles, filling notebooks with the reverse-engineered optical math required to quantify how an object's scale should change relative to a virtual camera. By translating 3D movement into a complex set of 2D transformations, I built a bespoke animation engine using just CSS and TypeScript. This engine allowed our animators to work on a 2.5D plane, creating the illusion of depth and parallax that the feature required.

For moments where the math alone wasn't enough—like creating a believable wing flap for a bird—we developed ad-hoc creative solutions, combining programmatic animation with clever, frame-by-frame sprite animation to achieve the desired effect.

This custom engine completely unblocked our art team and de-risked the feature's delivery, all without requiring any of the engineering team's limited bandwidth.

The Age Transition feature was delivered on schedule and became a celebrated, back-of-the-box highlight for the game. My proactive approach to solving the animation bottleneck was instrumental in this success.

More importantly, we created an experience that resonated with players. The final design provided a seamless and cinematic moment that celebrated their journey, clearly communicated their progress, and set an exciting tone for the era to come. This project demonstrates my ability to not only design a compelling user experience but also to see the entire system, anticipate challenges, and build the solutions necessary to deliver a world-class product.