SAFETY AWARENESS GAME & SITE


CLIENT



AGENCY



PORTFOLIO

Biagio Goetzke


ROLE

Product Design, UX/UI, Visual Design


TECHNOLOGY USED

Adobe CC, Sketch, InVision, Zeplin


PLATFORMS

Responsive web for desktop, tablet, and mobile








ABOUT



CHALLENGE

Create a captivating online destination for The Port Authority’s Safety First campaign that both engages and educates.


SOLUTION

An immersive web game built for desktop and mobile that brings to life multiple environments with dangerous characters and situations using beautifully stylized illustrations. The user is challenged to identify suspicious activity before the clock runs out.


RESULTS

The site remains a success year after year with solid engagement.



DETAILS

The Y&R team reached out to Modstar, my boutique digital production company, to discuss developing an online game for The Port Authority.  It was an obvious good fit with my background in games throughout my career including designing and developing the Who Wants to Be a Millionaire? game for ABC.com.


After discussing the 'big idea' with the client I saw a great opportunity to create something that is both fun and engaging while achieving the business goal of teaching safety. The first step was to fully understand what The Port Authority wanted to achieve with the Safety First campaign.  The goal was for commuters to be informed on what is suspicious activity and to know how to report it to the nearest authority or call the dedicated 1-800 number.  In addition, it was essential to  get to know the user and their needs. After talking with as many potential users as possible it was clear we'd need to captivate the users' limited attention if we expected them to stick around and learn. For inspiration, I scoured the web and app stores for entertaining games that involved learning. I didn't find anything that was apples-to-apples but did discover some great approaches to exciting users. The biggest project constraints were time (as always) and the requirement of showing a non-trivial number of examples of suspicious behavior. 

 

Now, armed with a deep understanding of the problem domain I was able to work out a great solution. I knew that I wanted to use Inductive Learning to train commuters to be aware of potential dangers. This demanded that the game teaches by showing examples of dangerous situations. The conclusion was to build a game that had users identify suspicious activity in the context of the environments (bus station, airport, subway) of common commuter travel. To give life to the game I cast a wide net to find a brilliant illustrator that could create engaging environments and characters.  The game uses classic gamification strategy to drive engagement. It also includes socially sharable achievements to further awareness.

 

Although there was limited time and budget for user testing we continually tested the game and the website that housed it with participants from Y&R and Modstar's network of friends and family to make sure we were on the right track. Fortunately, everyone loved the gaming experience and updates to the UX were minimal.

 

I learned a lot over the course of the project including how to design a prototype that could be easily handed off to developers.  This was done by involving the dev team upfront and using the Zeplin software platform to provide CSS code exact to design specifications.









NAPKIN SKETCH











WIREFRAMES











DESKTOP GRID











TABLET GRID











MOBILE GRID











ILLUSTRATION/CHARACTERS











ILLUSTRATION/BUS STATION











ILLUSTRATION/BUS STATION - STAGED











ILLUSTRATION/SUBWAY STATION











ILLUSTRATION/SUBWAY STATION - STAGED











ILLUSTRATION/AIRPORT











ILLUSTRATION/AIRPORT - STAGED











GAME SCREEN











GAME SCREEN











GAME SCREEN











GAME SCREEN











GAME SCREEN











COLORS










Typography





HTF49, HTF69




REGULAR







THANK YOU




CONTACT ME

If you'd like to discuss a job opportunity or have any questions please email me or call (323) 206 0875.



Next Project

GO TO NEXT PROJECT