A case where design needs to get out of the way, and be so simple that it doesn’t interfere… but knowing that the game interface will influence everything a player feels. The stark difference between assuming some default typeface can be used for a display versus worrying that a display font might be too flashy. Finding that your design is conveying nothing until it comes comes alive and moves. Realizing you’re making a game and not a utility.
Even on a utilitarian GPS with limited colors, the display and legibility of a font is heavily weighed – more so on a unit where the software has the ability to display more colors and has a higher resolution to allow for better image smoothing, gradients and transparency variations. Having the ability to display 16 million colors doesn’t mean you should always use all of them.
When we started designing the game, we knew we wanted bright colors, vibrancy, and eye catching graphics. We started with rough wireframes to consider everything we needed on the screen. This quickly changed to layout-based wireframes, with sizing considerations built-in, such as exact feedback display placements, button positions and tap areas, and sizing considerations for the device. At the same time, we were starting to define the look and feel of the game environment itself. We’d already developed the stories of the characters enough to come up with a list of cities which the game would be set. We knew which fashion shows usually took place in the four cities, and we were able to set the color themes we were going for, based on each room. There was something that we would not realize until later: fashion shows are all dark rooms – the background tends to be blackened, the crowd is barely lit, and the runway is simple white lighting. But we ended up creating different tints for the rooms, and created bright colorful graphics for the heads-up display of the game. Here’s an early version, with a placeholder background:
our original mockup
Something didn’t feel right, but I presumed it was that we weren’t seeing the moving, live game environment. As we began to code the game and get it to a state where our model was actually walking down the runway, it was starting to come together, but there were still some things that were bugging me. The interface was tiny. Tapping felt like a surgical maneuver, even with larger invisible hit areas. Font sizes felt microscopic. But the graphics looked great- since the background was so boring.
At this point I began to seriously consider that background needed more color, and realized that we needed to stray from our original course. This is a game about fashion – a place where we could stray from reality. We started to develop a much more colorful environment, still dark, yet disconnected from reality in the gestures of the walls at type of architecture n the fashion show room. Our interface also needed a big change, and we were already far into coding and had no more use for flat mocks. Aside from designing for the use of creating assets, all design work took place in code and went straight to our user testing groups. Everything in the HUD got larger – buttons, score display, and our new Fashion Flair meter. I also decided that an interface with less colors made more sense. I began to remember my favorite HUD interfaces that have gotten out of the way visually: the Terminator T-800, Metroid Prime, the Halo series. Now that everything was animating, we relied less on extra panels and containers, which were trashed in favor of large, strong text. How it moved on to the screen – sliding in, with just the right bounce, pause, and sliding back out – helped our design and players’ ability to receive messages as much as its flat appearance.
Around this time, we were also working on our Fashion Flair meter. Fashion Flair is an idea that adds a bit of strategy to the game – you could run fast to collect coins and finish achievements, or maybe slow down a bit and get a big bonus at the end of the level. After all, models have to walk with poise and steady pace. The meter is a feedback mechanism that would let you know if you were going too fast or too slow, and if you were going to receive a bonus based on not completing the level too quickly or too slowly. The first problem is that it wasn’t doing the latter. So we first added a sparkling particle effect to the “sweet spot” which meant you weren’t traveling too fast or too slow.
Here is a sequence of image that show the full color starting point, then a switch to a more monochromatic look. Note how the Fashion Flair meter and Power Ups are both at the top of the screen, which gave a very top-heavy feel, and how small the interface elements appear:
We then opted to add the time differential from your ETA to the end of the runway. This, along with the word “Good” displaying in the sweet spot, made in infinitely more useful. We would also end up displaying popup notifications in real time to let the player know what to do – “Slow down” or “Speed up”, and realized that simple text was the proper way to display notifications at the top center of the screen, where fingers or taps would not block their view. At the same time, elements were enlarged, and the Fashion Flair meter and Power Ups move down to the bottom left and right corners. Not only were these in formerly unused space, they were more reachable by a player’s thumbs, and helped balance the visual elements at the top of the screen.
Here is the final design document from which assets were cut:
And this is a screenshot of the final game showing a different environment:
our final product
Putting all of this in front of other people at multiple stages of development was also the most ideal scenario for making it work – there is nothing that opens your eyes to a solution faster than giving somebody a device, letting them play without instruction, and then watching their eyes gloss over with confusion. Ultimately all of our original design theories made sense – but required the lens of actually playing the game and feeling how our design decisions let players interpret the game, and really, just be able to have fun playing it.
RELATED LINKS:
Follow Us!