Today, we chat with Meagan Leflar, Lead UI/UX! She led the UI/UX team, which was a crucial aspect of the game in regards to our player-plattering design philosophy!
Can you tell us a little bit about your journey that brought you to work on Hell is Us?
Like many, my journey with video games started young. I fondly remember sitting on my grandparents’ living room floor playing Legend of Zelda: Link to the Past on their Super Nintendo, and many weekend mornings playing N64 and PS2 games in the basement with my brother when we were growing up.
As a video game creator, my journey into video games started at Carleton University. For the final project of my bachelor's degree in Information Technology, I worked with a team of brilliant women to create a game that used a Brain-Computer Interface. Yes, it was a video game that you could control with your mind! The Emotiv EEG headset that we used could also track the user’s emotional state and could read facial expressions. For example, you could move pillars with your mind to solve puzzles, and we had a cute side-quest that was triggered by winking at a mermaid.
This led me to dig deeper into player motivations and user-centered design, earning my master's degree in Human Computer Interaction, along with some minor publications. Once I emerged from academia, I worked as a game programmer on assorted small projects for companies including Hasbro, Warner Brothers, and Disney.
I got my in at Rogue Factor as a generalist programmer at the tail end of Mordheim: City of the Damned, almost 10 years ago now. They joked that they took me on because I was passionate about working on User Interfaces, and no other programmer on the team wanted to do it. And passionate about working on User Interfaces, I was (and still am)! I spent years learning and absorbing all I could, and championing UX within the team, and was eventually promoted to Lead UI/UX in time to tackle the player-plattering challenges of Hell is Us!
One of the core pillars of the design of Hell is Us is player-plattering, (no maps, no quest markers, minimal information) etc. Which, of course, means reduces any artificial information on-screen. As UI/UX designer, what were the challenges that you faced?
Game UX Design differs from standard UX Design in that with games you need to deliberately allow certain friction in the experience to create the “fun”. In an application used for health care, for example, you want to completely reduce friction and user error. However, in the context of games, lack of challenge can create boredom. Part of our work in developing this player-plattering approach was to make those deliberate decisions about what support to offer the player and what to leave out, when and why.
To this end, we spent time prototyping and evaluating what tools we did want to give the player to track their quests and progress through the game world and story. While we wanted the player to use their own critical thinking and observation skills to solve the puzzles and complete quests, we still wanted players to be able to stop playing the game for a while and pick it up again later without being lost. This process ultimately led to the development of the Investigation screen in the Datapad, which allows players to track the main story by displaying information that Remi has gathered in a mind-map chart.
Playtesting was also an important part of the process for developing and evaluating the player-plattering approach in Hell is Us. We wanted to validate that our design worked; that players were able to figure things out and that the UI offered sufficient support. We started with less UI support for the player and added more where we noticed the overall experience was suffering. An example of this was the Exploration screen.
The Exploration screen helps players track side adventures such as closing Timeloops, performing Good Deeds, and solving Mysteries (which are puzzles and enigmas scattered around Hadea). This screen was added to the Datapad was after a playtest where we realized that there was game content that most players may never discover if we did not offer them a UI that defines “the size of their sandbox” as we liked to put it. Originally the intention was to leave “Secrets” (what we called side quests) completely up to the player to track but, in the end, we decided that it was important for players to know what was out there to go find and interact with.
Of course, the Datapad UI was only one piece of this player-plattering puzzle. Quest design/writing, level design and level art also played very important roles in creating a world and a story that players could navigate pleasantly without the heavy UI support that gamers have grown accustomed. Early in production, Jonathan Jacques Belletete coined the phrase the “ancre rouge” or “red anchor”. When he was first pitching the player-plattering concept to the team, he weaved a tale featuring a massive red anchor as a landmark that helped the player navigate the area and follow clues during the quest. This careful handling of landmarks continued to be a key part of the player-plattering approach throughout development, especially considering the player had no overhead UI map with which to navigate.
Most of the information is given to the player via Remi’s Katoche Datapad that updates with datums whenever he comes across a new person, object, location or key piece of information. Can you tell us about how the design of the Datapad came about?
Originally, we called Remi’s Katoche Datapad the “Palm Pilot” and we styled it after that very retro handheld device. We went as far as to download an emulator and investigate how the interactions worked on an old school palm pilot. Some palm pilot influences can still be seen in our inverted window headers and our rounded footer buttons. We also explored Macintosh and Windows computer OSs from the 90s for inspiration. In the end, we went with a more modern-but-still-retro approach with the final design and interactions. What we have now is meant to feel futuristic-retro with the comforts and conveniences of a more modern game interface. Though a few artists have tried their hand at it over the years, the art of our current Datapad UI is courtesy of our UI Artist Romain Fumey.
We knew very early on that we wanted the Datapad to be a diegetic UI - meaning that the interface exists in 3D space for the game character. This presented some interesting challenges such as: working with restricted screen space (due to the thick frame of the 3D device), how to handle the opening and closing Datapad animations during different game states (such as in combat, or while interacting with objects), and how to connect our 2D UI Framework and the 3D model of the Datapad.
After some trial and error, the technical approach that we took to create the effect of the diegetic Datapad involved a little bit of illusion and slight of hand. The boot up animation is played on a 3D widget that is attached to the 3D model. This boot up animation plays while the animation of the Datapad approaching the camera plays. Once the Datapad is stationary, the full UI is 2D and drawn overtop of the 3D Datapad using math to calculate the correct position and size. With a materials and lighting pass, we managed to create a convincing effect that we hope added to the immersion of the game!
The Investigation screen of the Datapad, originally tilted internally the “Database” is probably the UI that has seen the most iteration in Hell is Us. Very early on, we had players create their own boards for investigations instead of producing it for them, but found people would over-estimate what they thought they would remember and under-use this tool. We also explored more complex mind map structures for investigations that looked more like a murder investigation board. The panning and zooming features in the Investigation charts are a remnant of that era of the “Database”. In the end, we decided simplicity was king and landed on the design we have in the game now.
I am grateful to our Rogue Factor programmers, past and present, who patiently helped with the UI during our many iterations (looking at you Charles-Étienne Dion, Simon Bérubé, Ricardo Liganor, and Martin Daigle!). Game development is an inherently iterative process and that means designs must morph and change to find the right experience.
Whenever you are in need of inspiration, where do you look for it?
Some of my favourite resources include:
https://interfaceingame.com/games/, https://www.gameuidatabase.com/, and Celia Hodent’s book The Gamer’s Brain.
I’ll also spend some time playing games or watching playthroughs on YouTube. I’m one of those people who immediately starts brainstorming designs whenever I play games, and it’s always interesting to see what UI designs and interactions that recent games are trying out.
Classic adventure games and investigative games were an inspiration for the Player Plattering approaches we explored with Hell is Us. I played Sherlock Holmes games (I particularly liked Sherlock Holmes: The Devil’s Daughter), and Jonathan Jacques Belletete often cited the classic Blade Runner game as a source for us to consider.
In Hell is Us, what are you most proud about?
While Hell is Us is not the first game that I have programmed a UI framework for, it is the first game that I designed the UI for from start to finish. I am incredibly proud of my team and the UI that we were able to build for Hell is Us.
What kind of gamer are you? Is there a specific game you always go back to?
For those who know the Quantic Foundry gamer motivation profiles, I’m an Architect Bard. For those of you who don’t know the Quantic Foundry gamer motivation profiles, you should check them out! They’re handy. https://quanticfoundry.com/gamer-types/
I love games with a good story, like The Witcher 3 and the Uncharted series, and I really enjoy puzzles in games. If a game is spooky, atmospheric, with a good story and interesting puzzles – I'll probably be into it! More recently, I’ve gotten into survival games. Valheim got its hooks into me solidly.