Company of Heroes 3
Company of Heroes 3 is a large franchise with a long history, complex historical sensitivities and a complex RTS style interface.
I spearheaded a monumental effort to improve COH3s entire front end interface and user experience in less than 5 months. The results were positive for both player and developer with undeniable results.
This reskin and UX overhaul was released in 1.4 Steel Shepard, December 5th of 2023. Myself and a small team of UX specialists developed a massive overhaul library for this improvement, working on nearly 40 major screens to bring life and a mature art style to the franchise. I led large portions of the rework providing art direction, UX concepts and creating an accessibly style library with a guide for supporting the team.
The full visual overhaul of the front page of COH3
The old front page
Planning Stages
The franchise had strayed from a mature art style into something more rushed, using bulky and aggressive textures that frequently distracted from the content of pages.
Upon finding the game in a state of identity disarray, I broke down several different styles of UI the game was hosting through it's development legacy that had ended up in the launched product. This meant huge variations in style, from minimalist modern to a gritty textured film canister décor. This style guide convinced the team that change was going to be necessary- and very worthwhile.
Developing a New Visual Language
The first order of business was to develop a precise style that spoke to the games heritage in a more cinematic way. Then the interface could begin to be populated and normalized in style and UX.
My direction focused on more subtle textures that gave a sense of tactility, cleaner UX navigation and a general alignment of styles across 50+ screens of the front end. My styleguide informed button states, window types and asset libraries that could then be used by the team wherever necessary, all created in Figma for rapid prototype approval.
Hundreds of assets were made over the following 6 weeks.
Some screens served as first tests with the new style, proving to be a good direction for the project overall.
Modular Creation for Fast Changes
With a matured style established, and using Figma to quickly propagate many different states of widgets, I could fill out screens efficiently with confidence that items would match in an appealing way across dozens of screens. Hundreds of assets were ready to apply to screens within 2 months with a cohesive look.
The remaining months were spent filling out screens with implementation help from technical designers, Input from game designers and a fluid responsible balance of UX design and UI art.
Before
After
UX in Gameplay
This iteration process also helped identify major mechanics that had been poorly explained to players, and outdated systems now being shown in the UI inaccurately. I took measures to breakdown these systems, involve gameplay designers to recreate them in a way that better reflected the games final intentions.
Before
After
.png)
Live Services
After positive reception of 1.4, the art direction of the game was finally clear in its future identity. Assets appropriate to the game could be made for live services easily, with a clear aesthetic and marketability for players. These were used as profile badges and backing banners to give players a sense of identity, as well as support community engagement events.
Continuing to provide and develop future screen UI/UX support is now a much easier process for COH3 thanks to planning, styleguides and modular libraries.
