Most of you probably know the back story of our long journey to create an updated version of our Dominant Species for iPad game. We haven’t talked about it much of late, mostly because we didn’t have much to tell you except “we’re working on it.” But in the background, after two successive developers had bowed out of the project and basically left us unable to update or support the game, we had begun working with a new (to us) company, GameTheory, to create a brand new version of the app.  First, though, to try them out on a simpler project, and to give us both time to figure out if we liked working with each other (that’s working out pretty well!), they developed Leaping Lemmings for iPad, a game that we released last Fall. We were very happy with both the quality and timeliness of their work on Leaping Lemmings, which gave us great hope that just maybe we’d found the right team to tackle Dominant Species.

A few months later, we are now doing alpha testing on an entirely new Dominant Species app. We think you guys are going to really like it. The UI and AI are much better than the original version, the feature set is improved (Undo, tutorial, etc), and gameplay is much smoother. We’ve finished two of four milestones at this point, so there’s still some work to do (adding multi-player over Game Center is next), but already this version plays better than the original. As a reminder to you guys who own the original version, you’re going to get this as a free upgrade when it’s ready.

Now I’d like to introduce you all to Marguerite Dibble, the CEO at GameTheory. Marguerite is going to share a little “show and tell” with us today, focusing on how the GT folks put together the User Interface for the new Dominant Species for iPad. We hope you enjoy this peek behind the scenes at the development process for the game. – Gene

—————————————————

At GameTheory we often find ourselves faced with some pretty fascinating UI (User Interface) / UX (User Experience) challenges, but I can honestly say that none has been quite as challenging, and fascinating as wrangling the Dominant Species board into a clear concise tablet-scale experience.

When we started to look at adapting the game into a tablet version, it was clear right away that there was a lot to consider. The rules are very unique, and the two stage process of the game makes the board intricate and complex, with a planning phase, many reference points for food chain, land value, etc., not to mention player pieces and the actual play space. When we finally played through the game enough to think we’d gotten a hang of it, we began to tackle the UI piece by piece.

First and foremost, we always want to make any user experience as clean and clear as possible. We want to minimize the objects on the screen, only presenting the user with what they need to know when they need to know it. Of course with strategy games that can be open to debate, but it’s a good goal to at least attempt to stick with. We knew right away that a nice UI could handle a lot of the aspects of the game that became a little tedious, like the calculation of dominance on tiles, and automatically adding and removing pieces. We also knew that we could simplify many things that didn’t need interaction in the same way a game board does, so the next challenge was to consider what could be optimized, where to clean up the space, and present all the detail of the game as simply as possible.

This represents the wireframe of our first pass on wrangling the board of Dominant Species into a mobile interface.  One of the best advantages we knew we had moving into the digital space is the ability to add pinch to zoom, this means that we could make some elements on the board small and let people manipulate the camera to view them larger. However, we still knew that it was vital to let people see the whole board and all the information contained in one simple view in order to plan and strategize, so the majority of the screen still had to be the hex grid.

Changing the player pieces from squares and cones into representations was another big step. Digitally we can represent numbers with just, well, a number, rather than the equivalent of playing pieces. But we have to plan for the ultimate scenario. What if every species is on one hex? We have to be sure that they all fit with enough room to read and understand. We replaced the square species markers with a species icon, and tossed a number in the corner to label the amount. You can also see on the hex grid that we added a border to hexes. That border changes color to indicate dominance, saving the player the trouble of having to add it up by hand every time they want to make a decision. And that just about took care of the play space.

Other elements that took up space on the physical board still had to be accounted for, but we didn’t want to compromise play space to show them. We could have added pop-ups that showed cards, species, and land values, but if we made that choice the player would lose sight of the board in order to take in that information, which would make strategy challenging. So we settled on side-bars. These elements slide open into the screen, but still leave as much room as possible for the board to be viewed by the player.

The player info was something we needed room for but was pretty simple to design. We needed to fit six players at maximum, show their VPs, their APs, their species count, and most importantly their elements. We also chose to represent the survival card in this space with the icon of a snowflake. By increasing the color saturation of the elements, we were able to keep them small and still legible so their content wouldn’t be lost.

The most challenging part of this design was thinking of a way to provide for the planning bar. There were two main challenges:

#1 – It has to be visible ALWAYS

#2 – It has to be large enough to interact with

These two facts combo into a significant UI challenge. Making an element large enough to tap easily that’s always visible, is a huge space demand on the screen. We could lose a lot of our board display, and we wanted to be sure we saved some space for tips / rules, since we’re losing the player companion materials the board-game provides.

Rather than find a solution to both those issues at once, we fixed them both individually. We added a permanent “reference” planning UI element, that doesn’t have to be large enough to interact with, but gives players a way to keep an eye on turn order during the execution phase. Then we added a pop-out planning phase tab that activates during that phase. It’s large enough to interact with, easy to tap, but doesn’t intrude on the game space for longer than it needs to.

Now that we had a layout we felt would work, we just had to turn it into a finalized version for integration and testing.

Adding final graphics for a tablet game from a board game can be quite the task. We have to cannibalize the flat image of the game board, pulling elements and graphics from some places, adding new effects, and basically doing everything we can to make the same art and energy fit into a totally new space.

Game Screen with all Tabs Open

Here’s a working version of the final graphics for the UI. You can see all the tabs pulled out and opened, representing the most obscured the board would ever be. Each tab can close right back up: cards, species, planning, tile scoring, all of it, opening up the board. We changed the species colors so they would stand out distinctly on the reference planning phase, and on the map. Finally, we added the overall “feel” of the original board with the ice and snow.

Once we start integrating graphics into the working game a few things change, but in general it worked pretty well! Here we have a couple of examples of how the game is currently looking as we test the A.I., not too bad overall!

Speciation Slide-Out during the Planning Phase

Element Pop-Up during Adaptation

Living with the UI has encouraged us to make a couple of changes, adding a few pop-ups and titles to clarify elements, but so far everything’s functioning, and we’re pretty happy with how we’ve taken a massive board with dozens of moving pieces and turned it into a clean, clear, tablet experience.

Author: Marguerite Dibble