Civ 7: Tech Trees
An exploration of "not just the same old tech tree" with Civ7's new gameplay concepts. Data-driven backend and dynamic visual display.
Problem: Why are there now gates on the tech tree? Why are there lots of little trees with non-tech information? What about mobile input?
Background info: In Civ7, the technology tree has gates ("eras") where you must research an amount of items within the current era to unlock the gate and progress to the next era. (In previous Civ games, there were no gates, and the tech tree was simple horizontal scroll node-based tree.)
​
My proposal: the hex tree design.
The civics system was also designed to be a series of smaller trees, and so I iterated on those concurrently to keep the visual language consistent.
Mobile design is not an afterthought, and was concurrently prototyped as I iterated on usability with the gameplay designer as the gameplay needs changed.
​
It's one thing to present a mock of a mobile screen to colleagues, it's another to put the mock on a device and have folks hold the design. It conveys the reality of mobile input needs for general colleagues more effectively than any slide deck bullet list.
How small are the hit targets? How small is the text? Also, how dense is the text?
Another notable discussion with dense strategy games: how is the information access arranged? Our user cases noted that PC civ players want as much info with as few clicks as possible, very dense, and reflective of the larger screen real estate. In contrast, mobile and gamepad player use cases suggest showing curated information at each level of a deeper selection tree. Don't show more than what is requested or needed in the context of the current decision.
