Armando Ceron

Los Angeles


Loci Safety game design focus

:: SCOPE ::

MVP fire safety game UI design.

Milestone 1


1)Design 1 checkpoint marker template

(see pictures below)

  • Size: small 2’ x 2’ ish - much smaller than our examples

  • seeable when looked for not noticed when not looked for

  • Aruco marker + loci logo + marker # - no symbols - no border (or at least no coloured border) 

  • We will have these printed as stickers with transparent or have small white backgrounds

  • No two markers can use the same aruco QR code

ArUco markers

2)Design 8 incident markers options

(see pictures below)

  • Same or similar size of checkpoint markers 2’x2’

  • Should look similar to checkpoint markers but be different - have coloured borders 

  • Just aruco markers + loci logo + marker # + color border - no ! symbol

  • We want to see options for border thickness 

  • 8 high vis colour border options

  • We will have these printed as stickers with transparent or have small white backgrounds 

  • Get them printed on paper and put em up in your space to test them and send us pictures!


Once these projects details are fully ready. 

3)Design for existing game wireframes

(see Unity Game Flow pdf)

  1. Locate Zone Marker

  2. Zone Orientation

  3. Locate Incident

  4. Locating Mission

  5. Mission Assigned

  6. On Mission

  7. Proceed to Exit

  8. Dialpad

  9. PASS Training

  10. Proceed to Muster Station

  11. Mission Complete

  12. Zone Complete

  13. Game Complete

  14. Logout

​Dependancies: Sam needs to do one more update pass and Joni needs to finalize the copy.

4)Screens for Onboarding Video:

  1. This is a checkpoint 

  2. Don't need to push buttons 

  3. When they orientate yourself with people 

  4. Make sure you orientate yourself. Where is NSWE? 

  5. Any areas that need extra precautions? 

Video narrative script

​5)Design 12-24 checkpoint Markers for Seaspan MVP 

8 fire extinguisher

4 fire pulls

1 first aid kit

4 Exits 

:: Audience ::


People who view this video will be employees of Seaspan ULC’s Vancouver Shipyard. 

  • Men & Women

  • Approx 18-65

  • Broad variance in tech/computer/app literacy

:: Key Takeaways ::

What must the audience think/feel/or understand after watching this video?


Anyone who watches the explainer video must gain a clear understanding of what the QR code training game entails and what steps they need to take to complete it successfully. 

Onboarding video

::Deliverables and Specs::

Details on what the designer will be delivering, eg:

  • # of designs

  • File formats and sizes 

  • Length of video

  • Other specs

  • Sketches meant for animation broken down. (see below) 

<-- We will dial this in together

Overview & Objective


Loci is a safety training platform that makes people better prepared for emergencies by teaching vital emergency protocol in ways that are proven to enhance retention and recall in times of stress. The objective of this video is to explain how the QR code training game works and introduce the audience to the information they will need to know in order to complete the training successfully.

:: Insights ::


Seaspan is one of Canada’s largest ship-building and marine transport companies, and an industry leader when it comes to health and safety. The company’s core values and commitment to improvement have directly resulted in an incredible track record, and continually drive ongoing developments to safety preparedness and practice. Hence, the introduction of Loci as part of a company-wide upgrade in emergency preparedness.


Loci’s initial install will be in 50 Pemberton, a mixed-use office building at the Vancouver Shipyard. The first audience will be primarily staff working in the office areas of 50P in zones 2A, 2B, & 2C, as well as people from other offices and areas who frequent the building.

Fire safety game demo
Updated screens
OLD for reference
Checkpoint Markers

Check point Markers will printed out as quality vinyl stickers to be placed in relevant locations around Seaspan's offices. Each has a unique aruco marker from 0-100.


We must be able to see them across the room if u are looking for them, and not be noticed when your not looking for them. It can’t look like cluttered everywhere, we need to strike a fine balance in physical space.


First aid kit

Fire extinguisher 

Pictures showing

incident markers IRL on location


Fly through's

We have these scanned 3D assets useable for design and video content


Additional Info


Using Illustrated Characters

Understanding how our brains form and store memories, we believe this video will be more memorable if it has some unique components that are engaging to viewers. 


Based on Seaspan’s commitment to the preservation of marine environments and the Spirit Bear Rainforest, we’ve created illustrated host characters that can be incorporated into the game design—a Blue Heron and a Spirit Bear. 


It’s unknown whether use of these characters will be supported at the executive level, so we wish to be able to demonstrate what it might look like with and without them, if possible. We’re also open to suggestions for other ways to make the video and game a more memorable experience. 

Sketches ready for animation

Breaking down character sketches into these separate assets allows us to easily animate them! 

Venn Sprints

Here are proposed dates and locations for 2 sprints to finish our MVP and present to Seaspan executives and the fire department. Sprint 2’s dates will be finalized once we confirm what works for Seaspan. Below is the timeframe we are aiming for as well as ideal dates.


:: Attendees :: 

Kim - Developer, credentials, backend

Alex - 3D unity artist

Shaw - Developer, backend

Sam - Visionary, CEO 

Joni - Communications, copy etc

Vanessa - Operations, Project management, filler of gaps 

Gregg - UX designer & dev project management

Armando - UI Designer