Companion Quest is an online companion app for table-top roleplaying games, intended to simplify the gameplay and open up options that an online format can provide.

You can select from pre-uploaded games, create a new game, characters and setting for the game as well as join a pre-existing one. You can then play the game using our customisable game environment which will allow users to chat and exchange notes as well as roll dice and upload pictures.

Role:  UX, UI & Code.
Tools:  Balsamiq, Sketch, Photoshop, Illustrator, PHP, JQuery, Javascript, Bootstrap, HTML, CSS, MySQL.
Team:  Sierra K, Stevanus D, Jessica M, Jessica S.


Board gaming is booming! With a 30% rise in sales of tabletop games since 2016, we are seeing new players emerging from a video gaming background who are used to a more “online” experience. This growth is also compounded by a resurgence in the interest in role playing games like Dungeons and Dragons due to it’s appearance in recent pop culture shows such as Stranger Things and Harmon Quest.

"How can we lower the barrier to entry for people interested in playing tabletop roleplaying games and provide the overlap from digital to tabletop gaming whilst allowing more modularity for seasoned players?"

Phase 1 : Approach

Table top role playing games have the stigma of being hard to learn and this makes them daunting for new players. We wanted to find a way to ease new players into table top role playing games by handling most of the complexities through an easy-to-follow and approachable interface, whilst also allowing experienced players a level of customisation that they may not have with pen and paper.

I wanted this to take the format of a web application, and whilst this will be optimised to be played on desktop and tablet, it should be responsively designed to work on mobile phones but with limited functionality.

The mood should be jovial and fun, with bright primary colours, whilst also being respectful of the games that we would be including in the framework. This will hopefully appeal to the community and fun aspect of the app, using rounded corners instead of sharp in order to feel less intimidating. I would like to take subtle design cues from medieval story telling and fairy tales and play with the anachronism of mixing this with a digital web graphics.

Due to the quick turnaround for this project, our first priority was to create a detailed plan of what we wanted to do by brainstorming blue-sky ideas and then whittling away the parts that might be unnecessary and thus narrowing the scope of the project to it’s most important features.

Phase 2 : Testing

Taking a test-driven approach to the process, we each took 3 features and built these from scratch using php and javascript. This allowed us to build, test and iterate over and over, ensuring a much more secure and durable code-base, which, we believe was the best approach to ensure a website, robust enough to handle large amounts of traffic.

This allowed us to focus on error prevention and to figure out ways to help users recognise and recover from these error should they find them. We did this using a customised php validation library which I built, as well as several in-built php methods to make sure that any uncaught errors would be reported to admin staff and would not present users with back-end jargon.

Phase 3 : Execution

We began by trying to back up our research with some human stories to try and identify the types of people who would be most interested in using the app. Due to the short time-frame allocated for research, we decided to conduct a serious of informal “conversations” with a very small of people. From this we managed to confirm some of our assumptions whilst discovering a new user group of people who were interested in the idea of using the system as a community within which to make friends.

Below are our 3 main personas. Establishing these main user-groups gave us a great reference point to work from.

Name: Cohen Roach
Age: 15
Living Arrangement: Toronto, with mother
Lifestyle: Prefers to stay indoors. Enjoys video games, YouTube, science fiction books, TV, movies
Occupation: Student

Name: Natascha Renaud
Age: 30
Living Arrangement: Waterloo, lives alone
Lifestyle: Introverted but looking to make friends online. Enjoys Netflix, social media, baking
Occupation: Researcher

Name: Spencer Crittenden
Age: 34
Living Arrangement: Scarborough, rents with friends
Lifestyle: Regularly plays table-top role playing games like Dungeons and Dragons and enjoys LARPing
Occupation: Programmer

For this project we closely followed Jakob Nielsen’s 10 Usability Heurisitcs for User Interface Design. This allowed us a set of limitations which helped us in being more focussed in our approach to the overall design. I will discuss a few of them below.

Due to the complexity of the games we would be providing, it was important to ensure clarity with the functionality. Also due to the sheer amount of data that users will be expected to input to create their characters and games, it was important to break this up in a way that would reduce the feeling of boredom that could arise from essentially filling out form after form.

This translated into an almost childlike aesthetic, with big buttons and big form elements which references the look of phone game apps and makes the whole interaction feel more playful. This also translated into our choice of colours and fonts. Creating a game and joining a game should feel like a game in itself.

This actually ended up taking us down a route where the aesthetic ended up feeling more optimised for a tablet, as a perfect blend of desktop and mobile phone visual languages, giving a look of game-like flexibility coupled with a minimal design.

Phase 3 : Execution

“Creating a game and joining a game should feel like a game in itself”

One of the biggest considerations when building the website was to ensure visibility of system status. There are several states the user can be in at any point while using the app. They could be an admin (game master), a player, awaiting a confirmation as a player, even an elf or a battle worn biker!

It was therefore very important that all users should know what their current status is at all times without limiting user control and freedom. It also required us to separate urgent information from less urgent information in a way that was easy to follow so you were never more than 1 click away from knowing what your status is.

We did this in several ways. Firstly when you have logged in, you are presented with a list of a whole load of games. To navigate this, we split them up into 3 main tables:

1. Current Games: Games you are currently part of.
2. Invites: lists of all the games you’ve requested to join or you have been invited to play.
3. All Games: which can be filtered using a search.

Within each of these tables is a colour-coded status icon to determine your level of access or your “state” within the process of that game. The key for this is also fixed to the top of the page to make it easier to understand. For those with colour blindness we have included little pop-ups to provide a description of the status.

Furthermore, in the game room itself, you have access to your character details and updates from the Game Master admin which give you a further grounding in your place within the context of the game.

The actual Game Room needed to be where the user “pay-off” comes. This needed to be noticably different to the rest of the web app, whilst also being consistent in design and tone. It also needed to be the best looking part of the website so we put the most amount of effort into structuring this page.