Page Murray

Wireframing and Journey Mapping

Good UI needs good user flow, so I've been practicing wireframing and journey mapping by looking at the UI of some of my favorite games.

I first practiced making a wireframe of existing UI systems,challenging myself to include as much of the game's UI as possible - that meant everything from the main menu down to individual setttings in the options menu! Practicing creating a wireframe on an established game taught me just how much goes into a full game's UI system, especially one that feels simple and intuitive to the player.

Once I was familiar with the process of wireframing, I designed and wireframed a new UI system for an existing game, Nintendo Land. In addition to designing the layout and elements of the new screen to fit the game's established style, I focused on the interactive flow of the system. The end result is an interactive Figma wireframe and pitch deck.

UI Layout and Design

Of course, you need more than a wireframe to make UI - so I've also designed and implemented UI systems in multiple games. I try to stick to an established, organized workflow, which helps me do my best work.

Whenever I'm designing UI, I always make a stylesheet. Especially when working with a team, a good stylesheet can bring an entire game's UI under one consistent aesthetic umbrella, and it helps speed along the design process too. For my Nintendo Land design pitch, I made a stylesheet as I went along to make sure I stayed within the game's visual style.

As the lead UI designer on two recent games with very different aesthetics, I got to flex my creative muscles and lean into the two games' visual inspirations - collage and early computer GUIs for Scrapped, and medieval scrolls for Pack the Court.

Accessibility

As I design and implement UI in-engine, one big thing I look at is how it will look on different systems. In one recent project, I was making a game to run in browsers, meaning that players could stretch the window to any resolution and aspect ratio they wanted. Because of this, I designed the entire UI using a modular system of "windows" anchored to different areas of the screen, so all the relevant information could fit on any size or shape of screen.

UI Programming and Implementation

There's so much more to good UI than just the graphical elements - it has to work in-game, of course! I'm very comfortable with UI systems, so they end up playing a major role in most of my games. As a result, I spend a lot of time programming UI elements that respond to gameplay or represent gameplay information. In a recent game, for example, I built a system to dynamically display and update a segmented bar chart, with icon labels on groups of segments.

User Testing

A major part of my process is user testing. With each project I try to test it as much as possible. In the case of Scrapped, an hour-long narrative mystery game I developed over six months with a team of six, I ran dozens of user tests. I took detailed notes on each one, and used what I learned to come up with lists of tasks and problems for myself and the rest of the team to address.

Telemetry

One of the most important aspects of Scrapped that I focused on in user testing was balancing the game. I developed a telemetry system to track key variables and statistics, and store them each time the game was played. This meant that with each of our dozens of playtests, not only did we learn about bugs or problems in the game, but we also gained useful data about the game. As development progressed, I compiled this data and analyzed it, presented it to the team, and used that analysis to guide development moving forward.

RITE Testing

For tracking particularly important problems or features through user testing, I've found the Rapid Iterative Testing and Evaluation framework to be very helpful. Through RITE testing, I and my fellow developers or UX/QA leads are able to track notable problems through concurrent rounds of playtesting, delegate fixing them to the relevant team member, and track whether they return in the future. In spring of 2024, I used the RITE framework for my game Scrapped, to track the issues and bugs that arose in a few key playtests, out of the dozens we performed over the course of five months of development. I used the results of those tests to populate a RITE sheet, which helped us track the issues over time, come up with solutions, and compare between tests.