top of page
Civilization VII
Project Inverness: Civ7
Firaxis
2021
Visual design work, UX, and implementation
Highlights: Style Guide and design widget library Dynamic tree designs: tech, civics
Civ Select
Save-load
CASE STUDIES
Heraldry System
CASE STUDY
How can the interface support the player identifying with their customized civilization when the civ components evolve over the course of a single game?
Style Guide
CASE STUDY
Building a style identity; enhancing the workflow of visual designers with flexible and functional widgets.
Tech Trees
CASE STUDY
An exploration of "not just the same old tech tree" with Civ7's new gameplay concepts. Data-driven backend and dynamic visual display including connections.
GALLERY
Civ 7 Tech Tree Mobile Design
I designed screens and user flows not only for PC, but also console and mobile interactions. I would then send image mocks over to my phone so that the team could see it in real physical space and get a feel for how small pieces might be, how dense is a comfortable amount of info, etc.
Usability notes
Especially early in development, I document additional interaction notes with my visuals. It helps me as I'm designing and working through the potential interactions, while also being a great resource for engineering implementation and conveying interaction the intentions.
Save game screen + controller icons
I designed with a mind towards multiple platforms and modalities: mouse + keyboard, controller, touch.
Saves expanded
Exploring the concept of a save game bundle.
Mock up used in the mobile screen test
Load game menu on mobile
I designed screens and user flows not only for PC, but also console and mobile interactions. I would then send image mocks over to my phone so that the team could see it in real physical space and get a feel for how small pieces might be, how dense is a comfortable amount of info, etc.
Load screen: early mocks
Load screen expanded details: early mocks
Hex Tech Tree Design
Civ 7 gameplay had multiple tree designs for technologies, culture, and civics.
In an exploration of "not just the same old tech tree", I created the hex grid design and iterated with game systems designers .
I designed and implemented a data-driven system to
In an exploration of "not just the same old tech tree", I created the hex grid design and iterated with game systems designers .
I designed and implemented a data-driven system to
TechTree_7-13-2020_1080p PC Monitor.png
TechTree_7-14-2020_1080p PC Monitor_Notes.png
Culture Tree design iteration with notes
I design with an overlay of notes in mind.
Tech Tree design on mobile
This is the design iteration as a full screenshot. On the next gallery image, you can see it loaded up on a real physical phone for rapid feel iteration.
CivicsTree_6-30-2020_OnAPhone.jpg
Civics Tree early design
Civics Tree iteration with notes
Civics tree iteration with notes, part 2
Civics Tree iteration
Main Menu: Advanced game set up: early wireframe iteration
Main Menu: Advanced game set up
Raw mock up image that is used in phone testing images.
Main Menu: Advanced game set up
Main Menu: Advanced game set up
Main Menu: Advanced game set up
Raw mock up image that is used in phone testing images.
Main Menu: Advanced game set up
Raw mock up image that is used in phone testing images.
Main Menu: Advanced game set up
Raw mock up image that is used in phone testing images.
bottom of page