sid meier’s civilization 7
FIRAXIS
Translating highly complex, data-driven systems into a game interface, I focused on presenting dense information in a way that remains clear, navigable, and enjoyable for players.
ROLE Senior UI-UX Designer
RESPONSIBILITIES
visual design
lo/hi-fi wireframes
UX documentation
interactive prototypes
user-flows
Bug-fixing Coherent/JS/TS/HTML/CSS
Featured Design
Tasked with this feature, I learned our users were confused as to when Treasure Points were earned and how points were scored (which was the main goal during the Exploration Era Treasure Fleet Legacy Path) as no information existed to help guide or instruct our users.
Treasure Convoys
Solutions
Display the current point number on the unit badge, along with its corresponding Treasure Fleet icon. When a point is awarded, update the number in the badge.
1
Display a detailed Journal entry that outlines goals and pertinent info with clarity.
2
2
1
When a Treasure Fleet unit is selected, the unit panel displays how many Treasure Fleet points it has, as well as which City that point was generated from.
3
3
In addition to the above MVPs, I also decided to include a set of detailed tooltips for the unit and the unit panel because to me, “The more obvious the better.” is what I always say!
I felt it was important for our users to know what cargo is granting them the point, how many points it is, and where it is from.
4
4
4
Selected Designs
Group settings and define the headers for each section.
Use specific wording for each setting that defined a clear choice was made. A setting could either be enabled or disabled.
Each setting required button states - hover, static, active, etc.
Wireframes and mockups had to follow the UI Style Guide as defined by the Art Director.
Our users had difficulty navigating the overwhelming amount of customizable options available to them. Additionally, they were unsure if a setting was enabled or disabled.
Responsible for the UX Design and mockups used for Implementation, I defined the goals as:
Advanced Settings
Hi-fidelity Wireframes to Mockups for Implementation
Town and City Yields Breakdown
With all the data that needs to be communicated to the player at any given time during gameplay, it was a rewarding challenge for me to think of ways to locate and display it in a non-overwhelming way.
I revamped the entire City and Town Yields Breakdown in to a digestible visual format.
Added an entry point icon in the Town/City Panel.
Designed new panels for each set of data points relevant to the breakdowns available.
Grouped sections and added carat toggles to keep data from overflowing.
Wireframes and mockups had to follow the UI Style Guide as defined by the Art Director.
