[vc_row full_width="stretch_row_content_no_spaces"][vc_column][vc_single_image image="2314" img_size="full" alignment="center" css_animation="bottom-to-top"][/vc_column][/vc_row][vc_row][vc_column width="1/6"][/vc_column][vc_column width="1/3"][vc_column_text css_animation="bottom-to-top" el_class=".p2"]

Client:
Disney Corporate Safety Program team

Audience:
All new hires in Southern California

Duration:
July 2017 – Sept 2017

[/vc_column_text][/vc_column][vc_column width="1/3"][vc_column_text css_animation="bottom-to-top" el_class=".p2"]

Team:
Brian Mitchell, Jennifer Gomez, Tianrui Geng, Barbara Beecroft, Bernice Merced, Christopher Rosario

My Role:
UI sketching, character development, prototype

[/vc_column_text][/vc_column][vc_column width="1/6"][/vc_column][/vc_row][vc_row][vc_column width="1/6"][/vc_column][vc_column width="2/3"][vc_empty_space height="50px"][vc_column_text css_animation="bottom-to-top"]

Overview

[/vc_column_text][vc_empty_space height="10px"][vc_single_image image="2322" img_size="full" add_caption="yes" alignment="center" css_animation="bottom-to-top" css=".vc_custom_1507690420777{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;}"][vc_empty_space height="20px"][vc_column_text css_animation="bottom-to-top" el_class=".p2"]

Safety Awareness is an existing course that introduces The Walt Disney Company employees a high level overview of basic safety awareness and prevention. Our team was challenged to redesign the online learning experience (length: 25-30min) to engage the learner and immerse them in the story.

[/vc_column_text][/vc_column][vc_column width="1/6"][/vc_column][/vc_row][vc_row][vc_column offset="vc_hidden-sm vc_hidden-xs"][vc_empty_space height="30px"][/vc_column][/vc_row][vc_row][vc_column width="1/6"][/vc_column][vc_column width="2/3"][vc_empty_space height="30px"][vc_column_text css_animation="bottom-to-top"]

Ideation

[/vc_column_text][vc_column_text css_animation="bottom-to-top" el_class=".p2"]

“Anyone Can Be a Safety Superhero”

The story starts with a superhero explains how the new cadet (the learner) will have to pass the three modules to become a Safety Superhero. Each module will introduce a new superhero that has their own superpowers belong to specific safety areas. By the end of each module, there will also have a knowledge check where the learners will have the opportunity to earn a new piece of their superhero costume. Once all three modules are complete, the cadet will have earned a superhero status.

[/vc_column_text][vc_empty_space height="20px"][/vc_column][vc_column width="1/6"][/vc_column][/vc_row][vc_row][vc_column width="1/12"][/vc_column][vc_column width="5/6"][vc_single_image image="2380" img_size="full" add_caption="yes" alignment="center" css_animation="bottom-to-top" css=".vc_custom_1507695374756{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;}"][/vc_column][vc_column width="1/12"][/vc_column][/vc_row][vc_row][vc_column offset="vc_hidden-sm vc_hidden-xs"][vc_empty_space height="60px"][/vc_column][/vc_row][vc_row][vc_column width="1/6"][/vc_column][vc_column width="2/3"][vc_empty_space height="30px"][vc_column_text css_animation="bottom-to-top" el_class=".p2"]

Moodboard + Tone

Inspired by the superhero gamification concept, the course user interface has a retro comic book style with pop art graphics. Since the course will be mostly static shots with live action videos, we decide to set the story to fast paced music to help keep the learner engaged.

[/vc_column_text][vc_empty_space height="20px"][/vc_column][vc_column width="1/6"][/vc_column][/vc_row][vc_row][vc_column width="1/12"][/vc_column][vc_column width="5/6"][vc_single_image image="2379" img_size="full" add_caption="yes" alignment="center" css_animation="bottom-to-top" css=".vc_custom_1507742959541{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;}"][/vc_column][vc_column width="1/12"][/vc_column][/vc_row][vc_row][vc_column offset="vc_hidden-sm vc_hidden-xs"][vc_empty_space height="30px"][/vc_column][/vc_row][vc_row][vc_column width="1/6"][/vc_column][vc_column width="2/3"][vc_empty_space height="30px"][vc_column_text css_animation="bottom-to-top" el_class=".p2"]

Character Development

The course is going to cover three different safety knowledge areas: office ergonomics, fire prevention&electrical safety, and earthquake safety. There will be three superhero characters represent each topic: Ergono-Mick, Lady Flambé, and Seismic Sara. Besides three superheroes, we also have Safe-D Man as the narrator and Lynda as his little assistant to help the learners go through the story. And of course, there will be a “villain” character—Complacency Pacey. He’s going to challenge the learners to pass the knowledge checks.

Due to the time frame we were given, there wasn't enough time for us to develop all the characters from scratch. So we decided to create the superhero characters base upon the existing character library. We draw inspirations from cartoon/animation characters as well as Lego mini figures for their costume design.

[/vc_column_text][vc_single_image image="2406" img_size="full" alignment="center" css_animation="bottom-to-top" css=".vc_custom_1507755381693{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;}"][/vc_column][vc_column width="1/6"][/vc_column][vc_column offset="vc_hidden-xs"][vc_empty_space height="60px"][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image="2415" img_size="full" alignment="center" css_animation="bottom-to-top" css=".vc_custom_1507783323895{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;}"][/vc_column][vc_column offset="vc_hidden-xs"][vc_empty_space height="30px"][/vc_column][/vc_row][vc_row][vc_column width="1/6"][/vc_column][vc_column width="2/3"][vc_empty_space height="60px"][vc_column_text css_animation="bottom-to-top"]

Prototype

[/vc_column_text][vc_column_text]

Below is our alpha prototype based on the approved character design and storyboards.
(Audio credit: Christopher Rosario)

[/vc_column_text][/vc_column][vc_column width="1/6"][/vc_column][/vc_row][vc_row][vc_column width="1/12"][/vc_column][vc_column width="5/6"][vc_single_image image="2443" img_size="full" alignment="center" css_animation="bottom-to-top" css=".vc_custom_1508532673548{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;}"][/vc_column][vc_column width="1/12"][/vc_column][vc_column offset="vc_hidden-xs"][vc_empty_space height="30px"][/vc_column][/vc_row][vc_row][vc_column width="1/12"][/vc_column][vc_column width="5/6"][vc_empty_space height="30px"][vc_single_image image="2459" img_size="full" alignment="center" css_animation="bottom-to-top" css=".vc_custom_1508635817788{margin-top: 0px !important;margin-right: 0px !important;margin-bottom: 0px !important;margin-left: 0px !important;}"][/vc_column][vc_column width="1/12"][/vc_column][/vc_row][vc_row][vc_column offset="vc_hidden-xs"][vc_empty_space height="30px"][/vc_column][/vc_row][vc_row][vc_column width="1/12"][/vc_column][vc_column width="5/6"][vc_empty_space height="30px"][vc_column_text]

Please enter the same password used for this page to watch the alpha test video.

[/vc_column_text][vc_video link="https://vimeo.com/240161882" el_aspect="43" align="center"][/vc_column][vc_column width="1/12"][/vc_column][vc_column offset="vc_hidden-sm vc_hidden-xs"][vc_empty_space height="40px"][/vc_column][/vc_row][vc_row][vc_column][lab_portfolio_items category_filter="no" portfolio_type="type-2" columns="6" reveal_effect="slidenfade" portfolio_spacing="no" pagination_type="endless" endless_auto_reveal="yes"][/vc_column][/vc_row]