A gamified application that allows staff members to practice real-life workplace scenarios so that they can strengthen and reinforce their knowledge of protocol and team principles. For this project I took on the roll of both UX Designer and Graphic Designer.
It can be a challenge for staff members to maintain a consistent practice schedule so that they are sharp and up to date on the principles and protocols of their roles. This is especially true if their method of practice is not engaging or effective.
How might we provide a digital solution that not only creates a fun learning environment, but also puts staff members in real-life scenarios so that they can practice their role and build a stronger team.
When BCMHSUS came to us with the idea to build an app and told us what they were looking for, I started brainstorming ideas with my team. We wanted to provide BCMHSUS with three separate game ideas so that they could choose the direction they wanted to pursue.
The brainstorming and ideation process consisted of Raccoopack's game developer, and myself bouncing ideas off of each other. He would describe an idea in words, and I would quickly mock it up in Figma using basic shapes and colours.
The first idea that we came up with was a quiz-like game with a strong focus on group discussion. Questions would appear on the screen and staff members would be given a time limit to discuss the questions. They would then lock in their answer before the timer ends and see the results at the end of the quiz.
Another idea that we came up with was to simulate the work environment in the form of a Unit Monitor. Staff members would be placed in teams and would work together to manage a ward. This consists of completing tasks and interacting with patients.
The final idea that we presented to BCMHSUS was our Visual Novel. This was a story focused game with an emphasis on how patient interactions impact patient mentality.
When we presented our three ideas to BCMHSUS, they decided to go with the Unit Monitor as they felt it best suited the goals that they had established. After additional brainstorming, we further developed the original idea and took the process to the next step by including high fidelity illustrations of characters, backgrounds, buttons, and interactions.
BCMHSUS sent us photos of some of the rooms in their facility that they wanted us to recreate for the app. This would provide a sense of familiarity to the staff members and also make the scenarios in the game feel more authentic.
To create this background I simply gathered images of everyday objects and furniture and traced them using the pen tool in Figma. I then assembled them together and added shadows to give a 3D illusion. I made sure that the background resembled the reference images of BCMHSUS's facility.
After creating the backgrounds, I next focused on creating the characters. For the staff members in the game I needed to make three Nurses, three Healthcare Workers, and three Security Guards. I also needed eight patients.
All of these characters were created in Figma using the pen tool. My process for creating characters is to first outline a silhouette of someone standing. Then I would sketch the clothes using three or four different variations that I could reuse with different colours. Finally I would trace the hair from various stock images that I had gathered.
Once all of the characters and backgrounds were complete, I linked them together and made a usable prototype in Figma so that I could run through the entire process and present it in a way that our clients could see and experience for themselves.
Try out the prototype below! Here's how to play:
