Due to NDA I am unable to share feature work from my time at Turtle Rock Studios. This work example showcases a ‘scrubbed’ version of the UX pattern library used for a PvP FPS title I worked on for over a year at the studio.

SUMMARY

During pre production of a new FPS project the team had begun development on, I mapped out an efficient way we could communicate, build, and recycle UI components. By creating a design library that would suit the needs of UI artists and engineers, I could define components that could be used to build approximately 80% of our front end. Not only would this act as a living library that provided specifications to the team on how UI worked, but it would also act as a jumping off point for UI art to develop their style guide. Additionally, integrations with our UI framework allowed us to quickly import work from my wireframing tools into engine for quick prototyping, playtesting, and iteration.

GOALS

• Create and maintain a living library that provided specifications for UI components used in both the in and out of game menus

• Help the team obtain higher levels of efficiency by creating documentation that outlined consistent, scalable components to build our UI

• Host UX patterns and use cases in one centralized location that anyone from the team can access

• Begin identifying brand guidelines and the ‘UI identity’ of our title

• Define our UI and UX principles and demonstrate them through components that can be found throughout the game’s front end

TIMEFRAME

2017 - 2018

TOOLS

• Axure

• Adobe Photoshop

• Adobe Illustrator

THE PROCESS

Two of my major goals in creating this approach to building our front end was to improve communication and create a more inclusive atmosphere in design. It was important to understand viewpoints from multiple stakeholders from game design, engineering, and art what UI visualizations they had in mind for the copious amount of systems in our game. To facilitate understanding these needs, I hosted workshops geared towards developing the identity of several of our front end systems during pre production. This largely took the form of brainstorming together on a whiteboard, leading to several ‘a-ha’ moments, and aligning the team behind what I was setting out to build.

Once pen was put to paper, the first step in the process was creating the framework for the pattern library. After doing competitive analysis on similar design systems that exist, I used the information I gathered in the previously mentioned discovery phase to card sort our components into specific categories based on our game and player needs. Though some of this work was assumption laden, it would benefit the team in the long run to have components that we may need rather than not have them at all.

The design of the pattern library was meant to be accessible to anyone on the team, and provide context on features for designers, artists, and engineers. Designers could use this library to visualize game flows and the interactions players would experience. Artists could use the component libraries as a basis for UI mockups and layouts. Engineers could use the library to begin thinking about how to build these components in engine. The entire library was hosted on a private web server that anyone with a studio login could access.

Below is a sample page from the pattern library I created while at Turtle Rock. Please note that the navigation and some sections have been altered and/or removed in order to avoid any NDA issues.

RESULTS

Being solely responsible for the UX of the front end of the game, the pattern library was a crucial tool for communicating design ideas, specifications, and interactions to the broader studio. It was used as a basis to create tickets that could then be tasked out to other departments for styling or building. As a living document that was easy to edit, it allowed us to align behind ideas and then quickly see them in game. By creating this strategy and approach to our UI, I was able to successfully:

• Align the studio around our rules and principles towards UI design and provide context for cross discipline feature discussions

• Create clear and visible documentation that anyone at the studio could access and feel a part of

• Map out fundamental work that supported the game vision and allowed us to rapidly prototype and test out gameplay ideas during pre production into production