Hello! Have we met? I’m Vicki Ebberts, resident User Experience Designer here at Undead Labs. The other designers have already talked a bit about the design of content and systems in Moonrise, but if you’ve been wondering just how a design goes from words on paper to something you—the player—can enjoy as an in-game experience, well you’ve come to the right place, friends!
First, for those of you not familiar with UX design or what that even means in video game development, in a nutshell: UX for video games is all about crafting experiences and interfaces that feel good to use, and that fit the needs of a wide range of players. Easy enough, right?
Luckily, it’s not up to the UX designer alone to think about these things (whew!). Creating good user experiences is a studio-wide philosophy that all of us are thinking about all the time here at the Lab. From the beginning of a system being designed all the way through implementation, we all try our best to consider how the things we put into the game will impact the player and their overall experience.
So, how does one design UX for a game? Every UX designer’s process is a little different, but for me it typically goes something like this:
STEP 1: Research
STEP 2: Sketching on paper
STEP 3: Whiteboarding
STEP 4: Wireframing
STEP 5: Prototyping/Testing
STEP 6: Final Documentation
STEP 7: Implementation/Iteration
STEP 1: Research
Once a game designer has a design for a feature they are happy with, it is handed off to the UX designer, usually in the form of a detailed document we call a “spec”… though sometimes the hand-off is a 20-minute meeting in front of a whiteboard, arms waving, arrows furiously being drawn (my favorite). It just depends on the scope and complexity of the feature.
Before I get started on a new feature, I like to sit down and do a little detective work. It’s good for me to get into the headspace of our players as best I can. I look at other games to see if anything remotely similar has ever been done before, and if so, what can I learn from what has worked well (or maybe not so well) in the past? I also like to sneakily read through posts on forums to try my best to understand what our target audience would want or expect from a feature like the one we’re working on. You heard it here first: UX designers are the ultimate lurkers!
One of the best resources I have to draw from though, is working in a studio full of passionate gamers, all with different interests and skill levels. Not only can I get great insights from working alongside people who might be part of our target audience, but sometimes the simple act of asking a few questions can lead to really good brainstorming. The Upgrade menu in Moonrise is a great example of this. What started out as information gathering turned into a really fun and collaborative discussion with a group of folks from several different disciplines. Together we came up with a really cool concept for how we could best communicate a fairly complex system to the player. That solution is essentially what’s in-game now. Three cheers for collaboration!
STEP 2: Sketching
After doing some fact-finding and getting a good grasp on player expectations, next up is sketching. For me, the sketching step really is less about making good-looking drawings and more about making sure I totally understand the new feature. You don’t need to be an expert artist to sketch out design ideas, and I strongly believe no idea is too terrible-looking to put down on paper. You never know what is going to spark that really GREAT idea.
Sketching is also where I like to organize and make sense of all the moving parts that might need to be seen on screen, as well as try to identify any other areas of the game the new feature might impact. “What are we calling this thing? Do we use that language somewhere else already?” My sketches are typically littered with notes and questions and callouts for things I’ll need to investigate in more detail later on.
STEP 3: Whiteboarding
After I have one or two viable directions sketched out on paper, I go to a conference room, turn on Spotify, kick off my shoes, and start refining those ideas on the whiteboard. This is when things really start solidifying, and is by far my favorite part of the process. It may or may not have to do with how many different dry erase markers we have in our conference rooms (SO MANY COLORS).
This is a good time to work out any potential layout issues that didn’t occur to me during sketching, and start mapping out entire user flows (which map out the path the player might take through every screen, dialog box, decision, or interaction). I spend a lot of time thinking about things like, “Wait, what type of feedback would the player expect if they tapped… here? Oh crap, how do they even know to go there? How can we make this one action feel rewarding and worth all the effort it took to get here?” Much like when I was sketching, If I don’t have clear answers, I’ll write the question down in a bright color so I don’t forget to either ask someone about it later, or investigate it more on my own.
STEP 4: Wireframing
Wireframes are essentially low-fidelity mock-ups (most often for UI, but sometimes for other in-world elements), that will serve as layout and interaction guidelines for the UI artists and engineers come implementation time.
You really never know how things are going to fit on screen until you start mocking everything up. Sometimes things fall into place easily, and sometimes things just don’t fit in the available screen space like you thought they might, which happens ALL the time. As a UX designer, you have to be flexible and be willing to quickly scrap an idea you really liked, which can be tough sometimes, but it’s just part of the process. You do eventually stop crying yourself to sleep, though. Just kidding. The crying never stops.
I try not to get too fancy with my wires, it’s mostly solid color fills and the occasional button shine. I personally like using Adobe Illustrator for my wires, because it’s what I’m comfortable working quickly in, but there are tons of different tools that have come out in the last several years that work well for wireframing, a lot of them available for free or that offer free trials.
STEP 5: Prototyping/Testing
Oftentimes when we’re working on something totally new, I’ll want to test out an interaction or a specific section of the user flow. I might make a super quick paper prototype (by literally just cutting up pieces of paper and hand-drawing some buttons), or go a little more robust and make a tappable prototype that is interactive (with a tool like InVision) that I can test with a few folks around the office. If what I’ve got going on makes sense to other people, whoo hoo! If not, we haven’t wasted a ton of time and I can quickly iterate and try something else.
Being able to rapidly prototype and test something can provide really valuable results. If anything, it’s an excellent reminder that no one guesses right ALL the time. There are almost always things to consider I haven’t thought of, and testing with a handful of people (co-workers, family, people in line at Starbucks) can bring those things to light. Testing and refining just leads to better solutions, plain and simple.
STEP 6: Final Documentation
After I’ve finished any prototyping and I feel like my wires are solid, I lay everything out in one big master file and add annotations for what needs to be happening on every screen, in every state the player can get themselves into.
I try to leave artistic, visual calls open for our UI artists. They are good at making things look amazing without me butting in. I might say something like, “Any color here will be fine, but FYI whatever we use here will also need to be used in locations A, B and C.”
Once I have my documentation nailed down, I like to grab everyone who has previously had a hand in the design and anyone who will be working on it in the future, and run them through the whole thing as a group. If I’ve been doing things right, I’ve been checking in with folks along the way, so there shouldn’t be any major surprises at this stage. This last review with everyone is great for catching anything I’ve missed, or to discuss any issues with the design up to this point. If we want to make any big sweeping changes, doing so before UI art and engineering start spending time on it is definitely a good plan!
STEP 7: Implementation/Iteration
After a UX design is finished, the whole thing has to go through multiple sets of talented hands before it becomes a playable piece of the game. I hand my documentation off to one of our UI artists, who will take my simple wireframes and make some DAMN good-looking art out of them. They will hand off their assets to a technical artist, who will get the UI scenes prepped to be hooked up and add any special animations or effects we’ll need. Everything then goes to one of our awesome engineers who will work their magic and make it all come to life. Audio is the last stop on the UX train, making all of your clicks, taps, and swipes feel extra responsive with audible feedback.
Everyone checks in with each other along the way to make sure what’s been designed is still working well and feels right. So even after It’s a really collaborative process, and is incredibly awesome to watch something go from a design spec to something playable in-game.
And even after ALL the time and care that is put into designing a new feature… sometimes things don’t feel quite right to players once they get it in their hands and play for hours and hours and hours. We will evaluate player feedback, and will iterate on a design as best we can to make the experience as enjoyable as possible. As much as we hope to knock it out of the park on the first try every time, iteration is important and ultimately leads to results that feel better for our players, which makes everyone happy!
Well, that’s the short version of my UX design process. 🙂 Thanks for letting me share it with you! I hope getting a little peek behind the curtain has helped you understand some of the hidden concepts of design that go beyond balancing numbers and crafting a story, and how important player-focused design is here for us at the Lab. Until next time!