PROTECT YOUR PHONE AGAINST SNATCHING

OVERVIEW

I designed and developed this scenario-based eLearning experience to help university students who live in London to protect their phones against snatching. To raise their awareness and promote their behaviour change, I used photos and real crime videos and created human-phone interaction animations to simulate real-life scenarios. 

With the implementation of the Successive Approximation Model (SAM), I took an agile and iterative approach to designing and developing the learning experience. By applying xAPI and JavaScript, I tracked learners' learning duration on the slide and course level and their responses to each activity to understand their learning behaviour and improve the learning experience. 

RESPONSIBILITIES

• Instructional Design

• eLearning Development

• Animation Design, Photo Editing, Graphic Design, Audio & Video Editing

• Learning Analytics

TOOLS USED

• Adobe Photoshop, Adobe Illustrator, Adobe XD, Adobe Premier Pro, Adobe After Effects, Adobe Express, Audacity

• Articulate Storyline 360

• Google Earth Studio, Google Maps

• Veracity LRS, xAPI

• Visual Studio Code, JavaScript

• Google Sheet

• Xmind

PROCESS

1.PROBLEM

London has seen increased reports of phone snatching thefts in the past few years. The situation in some hot spot areas is even worse. For example, in the City of London, there was a 151 per cent increase in mobile snatches in the past year. Other areas like Bloomsbury and Kings Cross have a similar concern. Young students are among the most vulnerable victims. To help the students protect their valuables, I worked with a London university to solve the problem together.

2.eLEARNING SOLUTION

To simulate real-world experiences and provide a risk-free learning environment, I suggested a scenario-based learning solution that uses photos and animations to flesh out the simulation.

3.ACTION MAP

I worked with a Subject Matter Expert (a university student experience officer) to create an action map, which sets the learning goal, defines the expected behaviour and scopes the essential knowledge that supports the behavioural change.

4.STORYBOARD

After we decided on the content scope, I wrote the text-based storyboard and updated it based on SME's comments. The process went through a few rounds before finalising the scripts.

5.VISUAL MOCKUP AND PROTOTYPE

Once the scripts were solid, I started to create visual mockups and prototypes in Adobe XD. After several evaluation-design-development iterations, the SME and I agreed on the final look and feel. Although it took a while to reach the ideal release, each iteration generated a functional prototype. These prototypes ensured the process was agile and efficient.

6.DEVELOPMENT

With the design work completed, I developed all assets and put them together in Articulate Storyline 360 to shape the final product. I used Adobe Photoshop, Premier Pro, and Illustrator to edit pictures, videos, and icons. I then used After Effects, Google Maps and Google Earth Studio to create all human-phone interaction animations. I also used Audacity to edit sound effects. 

In addition, I created states, triggers, variables, layers, animations, transitions and branching slides in Articulate storyline 360 to make the learning experience flow smoothly.

Last, I used Xmind to create a mindmap that provides a takeaway summary for learners. So they can refer to and reflect on the learning content with easy access even though they have finished it.

7.xAPI AND LEARNING ANALYTICS

To implement a data-driven approach and facilitate following learning analytics, I used JavaScript and Visual Studio Code to write custom xAPI statements and store them in Veracity LRS. 

I tracked learners' duration time on the slide and course level to understand their learning engagement. I also collected learners' responses to each activity to understand their performance. Based on these data and analysis, I can generate insights into learners' learning behaviour and pattern, which can help improve the learning experience on an ongoing basis.