This was a suuuper early design back when the Tech Tree was basically just a list of unlocks. Techtonica wasn't even a factory automation game at this point!

This was one of the first greyboxes I did when we had a decent idea of what we wanted to do with the screen. We knew we wanted multiple separate trees, so I came up with this hybrid vertical and horizontal carousel layout.

The next iteration of the wireframe, this time with callouts for different tech states, tiers, and additional detail information for the highlighted icon.

Because the player could activate and deactivate techs to optimize their factory-building goals, we wanted to give the player a good sense of their entire build. Thus I greyboxed a minimap displaying a summary of all of the activated techs.

As we dove into what kind of information we wanted to display on the tech cards themselves, it became clear that we needed more horizontal room for each tree. This was proven true, to an extent far surpassing this iteration, in fact.

We also wanted a way to hide future techs while still providing some amount of lookahead to the player. I mocked up this shade which would dynamically hide or show details as the player progressed through the tech tiers.

The next version ended up being developed long after I had settled on the visual style for the UI. While the visuals made a huge leap, the foundational elements stayed the same from the early greyboxes.

Some minor iterations based on feedback and design requests.

Techs have to be scanned before the player can access them in the Tech Tree so we had to make sure that the ones the player should be looking for were visually distinct. We also display the amount of machine fragments they still need to scan with pips.

Each Tech has a detail panel that explains what it unlocks as well as a few other pieces of info. These had to be built to accomodate huge lists of unlocks without any scrolling.

Some explorations for the style of the lines connecting the tech cards. Simplicity won in the end as the player's focus had to be on the very information-dense cards rather than the trim.

Some explorations for the card state if the player did not have enough power to activate the tech. Exact amounts were valuable to display.

We ended up adding some shortcuts to the right side of the menu to aid with navigating the increasingly deep trees as the amount of content increased. Here are some quick sketches from early in that process.

This was another iteration of the shortcuts. In this version they dynamically scale with your position on the scrolling list, and undiscovered shortcuts are collapsed but visible for lookahead.

The final result!