Tabletop User Interface Header

Tabletop User Interface Design

Tabletop User Interface Header

Tabletop User Interface Design

Similar to interface design, when you design games it is important to constantly test. New mechanics, concepts, gameplay - you can never just assume that it's going to work. Tabletop is a (theoretical) app that's meant to help streamline the development and playtesting process for board games.

The core concept at play here is that users can import their own images to create virtual boards, cards, and other game assets, then manipulate them in a 3D space. The app even connects with other nearby users to create a tabletop space to test in real time with players. Projects can be saved locally or to a server where other team members can access and edit them.

The concept for this app originally came about as part of a mobile interface design class, but I continue to develop it and further improve it.

User Personas

During concepting, I narrowed down the target audience of this app to three main groups: kids with game ideas, adults seriously interested in creating their own games, and teachers interested in using the program to create educational games. I chose two of those to develop personas around to help guide the interface design.

For instance, Emily was my "teacher" persona. I took a look at the types of games that she liked to play - classics like Checkers and Go Fish!, as well as more interesting games like Settlers of Catan and Mancala. This helps to inform the complexity and type of features that Tabletop would have to support. I can also look at her technology preference - mobile - to see that she's a user that would be comfortable with a more modern interface.

You can see some of the original design direction at play in the personas - originally I had aimed for a more real, textural feel for the design. While that direction was a lot of fun, it began to conflict with my vision for how users would input their own assets into the app.

Tabletop Personas

(Sorry for the potato quality of the video - I've only recently joined the world of smartphones, and this video was taken on a good ol' dumbphone)

Paper Prototyping

Needless to say, prototyping is one of the most important phases of design. You can have a beautiful interface, but it's not worth the pixels it's made of if it isn't useable. I'm a big fan of paper prototyping when it comes to testing interfaces. Not only does it let you test without programming, but it makes it easier to make on-the-fly changes.

For the paper prototype of this app, I separated the elements (the menus and game board objects) out of the pages rather than just having individual screens. The reasoning behind that was that since the app has so many moving parts with the 3D space, it would be better for testing the actual usability. This prototyping was particularly helpful because it showed me what a more seasoned tablet user made of my slightly unorthodox navigation layout.

UI Mockups

The final stage of UI development is the full mock-up. Using InVision (not to be mistaken with inDesign), I created a series of interactive screens to click through to showcase the functionality of the app. It is an intensive amount of work - you have to account for every click. But it's an excellent way to show a client (in this case, a teacher) the planned functionality and interface of the app. 

I've since revisited the UI and made some changes.

Revisiting the User Interface

All told, this app cleaned up nice. I drew design inspiration from older adventure game manuals and board games. While anyone could use the app to make any type of game, it's more likely to be used for fantasy/rpg mockups. A more sterile, typical flat ui could work, but adding pseudo-vintage textures gave the app its own unique look.

I'm in the process of continuing to develop and refine the concept and the interface. I'll continue to update this project page as I refine the project, and hopefully I'll be able to bring it to bright. This project has come a long way from when I created it for a mobile design class.

Hey, there's always room for improvement.