I’m a Toronto-based, award-winning Design Director & Full Stack Web Developer turned UX Designer from London, UK.

I work on international projects developing brands, products & experiences to encourage interaction through story telling & play.

see some recent work

Companion Quest Hero Image

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, design and front/backend development.
Tools:  Balsamiq, Sketch, Photoshop, Illustrator, PHP, JQuery, Javascript, Bootstrap, HTML, CSS, MySQL.
Team:  Sierra K, Stevanus D, Jessica M, Jessica S.





Question

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?"




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.

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.

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.

Companion Quest Persona 1

1. THE CURIOUS GAMER
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

Companion Quest Persona 2

2. LOOKING TO MAKE FRIENDS
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

Companion Quest Persona 3

3. THE ROLE-PLAYER
Name: Spencer Crittenden
Age: 34
Living Arrangement: Scarborough, shared
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.


Companion Quest whiteboard sketch

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.


Companion Quest wireframes

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.

“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.


Companion Quest website image


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.


Companion Quest website image


Companion Quest website image

Finally, 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.

Go To Website   desktop_windows
Hearst Hospital Hero Image

This redesign for NOTRE DAME HOSPITAL in Hearst, stemmed from a desperate need for them to update their web presence to be easy to use, accessible and responsive.

We also wanted to add important features that we felt were missing and which we felt would help the people of Hearst to have the best experience possible whilst using the site. Below is the redesign that we proposed.

Role:  UX, UI, design and front/backend development.
Tools:  Balsamiq, Sketch, Photoshop, Illustrator, Axure, ASP.net, Bootstrap, HTML, CSS, MySQL.
Team:  Shoib K, Mia E-L, Evan P, Rahul M, Jessica M.





Question

Hearst Hospital Website image

The current website (pictured above) desperately needed to be updated. The user interface was difficult to understand and inconsistent, and it was not easy to find information quickly and efficiently. Also, load times were high and unfortunatley, particularly for a hospital website, non-accessible. We want to rebuild the website from the ground up, making the site fully responsive, accessible, clear and easy to navigate whilst also cutting down on load times, particularly for mobile phone users.

"How can we make the user experience better for the people of Hearst? How can we ensure that the website looks trustworthy and evokes a sense of urgency through a well-thought-through heirarchy of information, whilst also being fast on load times and still allowing access to the large amount of information necessary?"




Exploration

We conducted research on the demographics of Hearst and their relationship with the hospital which raised some very interesting insights. From this we built three main user groups, which we felt was the optimal number to help us prioritise in our short time-frame.

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

Hearst Hospital persona 1

1. THE PATIENT
Name: Tony Harrison
Age: 19
Living Arrangement: Hearst, with parents
Lifestyle: Healthy, enjoys outdoors. Suffers a recurring sports injury. Internet savvy.
Occupation: Student

2. THE ADMIN
Name: Beryl Penn
Age: 33
Living Arrangement: Hearst, with family
Lifestyle: Healthy, enjoys the outdoors. Enjoys family time. Regular internet use but not power user.
Occupation: Hospital admin staff

Hearst Hospital persona 1

3. THE DOCTOR
Name: Frankie Le Mer
Age: 47
Living Arrangement: Outside of Hearst, family.
Lifestyle: Looking for a job in Hearst with plans to retire there in the future.
Occupation: Doctor

We then needed to figure out exactly what information was necessary or important to these user groups and what is not. We then needed to compile this into a heirarchy, trying to understand the needs of the people of Hearst. To also help add focus to the navigation we want to take the most important features and rebuild them in a way that they integrate well together.

We compiled this information and built a site architecture map, describing how we felt the main key features for the website would assimilate comfortably with one another.



Hearst Hospital Website Image
Hearst Hospital Website Image
Hearst Hospital Website Image


Approach

Based on our research we decided that it would benefit the hospital to build a staff portal and content management system. This way there would be staff as well as visitors using the website. In addition we would add a robust appointment booking system for referring physicians, based on the needs of our external doctor persona.

Hearst Hospital Website Image

We also discovered that due to low internet bandwith and lack of 3G coverage in some areas of Hearst, load times on the mobile site, especially, would need to be as low as possible. This would mean using less imagery and extra frills that may otherwise slow it down.

We also wanted to use visual language to craft the website in a way that was very much user focussed, using language, fonts, colours and imagery that made people feel as though by engaging with Hearst, they would feel a sense of community, acceptance and comfort.

Execution

Hearst Hospital Website Image


Hearst Hospital Website Image


Hearst Hospital Website Image

Above is the final design. It is fully responsive and works on desktop, tablet and mobile to allow use accross multiple platforms. The mobile version is also designed to be built differently to reduce load times by removing extra unnecessary images.

Overal, whilst this is still a work in progress, I am quite happy with the design and am looking forward to start programming it in asp.net.

Other Work

skills

Expertise

UX & UI Design
Web & App Design, Development
Design Direction & Brand Strategy
Agile & Test-Driven Development
Usability Testing
Wireframing & Paper Prototyping
Product & Graphic Design
Seminars & Public Lectures

Software

axure icon

Sketch
illustrator icon

Illustrator
indesign icon

InDesign
photoshop icon

Photoshop
Balsamiq icon

Balsamiq
axure icon

Axure
invision icon

Invision


Slack

Code



HTML


CSS
javascript

JavaScript
jquery icon

jQuery
mysql icon

MySQL
php icon

PHP
C Sharp icon

C#

Frameworks

react native icon

React Native
bootstrap icon

Bootstrap


WordPress
google materialize icon

Materialize
laravel icon

Laravel
sass icon

Sass
Microsoft Dot Net icon

.NET