Initial Challenge: Disjointed UI Development

When I first joined a game project at Frozenbyte, I was asked to quickly check the menus and their navigation before they were implemented. Timeline for this entire process (check and implementation) was one month. In reality it took over 6 months to finalise the menus.

When the team shifted to the next project, the UI artist and I decided to ensure the UI pipeline was much more efficient in this and future projects.

The existing process, where each menu screen was treated as an individual feature completely detached from other menus, led to redundant work, inconsistent designs, and inefficient use of resources. This created a fragmented user experience and a general unenthusiasm toward UI development in programmers.

For example, Nine Parchments shipped with over 20 different shades of yellow used for highlights across all menus and changing each needed to be tasked separately.

Solution: Style Guide

To avoid this the UI artist and I created a style guide. It ensured consistency in design, reduced redundant work by programmers, and allowed for faster implementation of UI elements and entire menus.

We opted to not build a full design system, as the point was to lessen the workload on programmers and we didn’t have their full buy-in for this project at the start.

This helped streamline the UI design and creation process significantly, by improving communication and shared understanding. It not only streamlined our design process, but also provided programmers with clear guidelines, reducing ambiguity, and speeding up implementation across all the teams involved in UI development. The style guide also had the added benefit of improving the accessibility of our games as the UI was more accessible by default as the accessibility features needed to be defined only once for each UI element.

Results: Reduced Development Time by 50%

Through this and prototyping efforts introduced in Trine 4 the UI creation process was reduced by more than half from approximately 36 man months for Nine Parchments to 16 man months for Trine 4. This UI pipeline was adopted through all the projects in the entire company.