Overview

Audience: US Army 68A medical equipment technicians (~3,000+)

Responsibilities: Senior Learning Experience Designer, code integrity, interactions, lead technology and innovations, develop and oversee data collection.

Tools: Coding (HTML, CSS, JavaScript), Visual Studio Code, GitHub, CodePen, TriDiv, Adobe Captivate, Adobe Creative Cloud, Articulate 360.

Approach: Using SAM (Agile ADDIE), collaborate with stakeholders and creative and tech teams to develop 3D environment, test, and iterate with each module. Story was used to convey real-world context blended with military culture and fictional themes.

Key Features:
– Novel low impact 3D environment for learning
– Simple interactive 3D space
– Variable-based branching scenarios
– Integrated with Adobe Captivate and (later) Articulate 360

Key Takeaways:
– Early MVP development is critical for innovative projects
– Lo-fi 3D is a powerful learning tool
– Hidden humor and “easter eggs” drive engagement
– Value of learning and interaction data

– For an in depth discussion, see the sections below –

The US Army contracted with 1Prospect (the company by which I was hired) to produce a series of learning modules teaching army medical equipment technicians (68A) maintenance processes best practices. The goal was increasing engagement and consistency in existing processes. This would ultimately increase the amount of in-service medical equipment, equipment lifespan, and repair and maintenance turn-around.

A unique aspect of this team (in my experience) was the inclusion of a Multimedia Programmer (me) under the title of Senior Learning Experience Designer, which allowed me to be deeply involved in both the creative and technical processes.

The team came up with an overall story concept that turned the learner personas into two characters that needed to learn the importance of adhering to process and protocols and the real ramifications of failure, all while keeping the tone light and engaging.

Process

Research & Analysis

The team had already started gathering the necessary content and designing the overall structure of the course when I was hired. I was brought on to provide a more engaging, advanced environment for the course. They wanted a 3D environment (Unity or Unreal), but I knew from my experience in the VA that these environments often demanded far more hardware resources than field equipment was capable.

Research confirmed that Army field equipment would not be able to run these environments, with Unity (tested) taking 3-5 minutes to load a simple 3D environment. I also tested with BabylonJS and ThreeJS to see if other environments might be used, but they still relied on actual 3D rendering, which overloaded the older CPUs used in the field equipment used to deliver training. For testing, I used a simple skybox, a basic cube shaped room, and some low-poly 3D models with textures built in Blender. I was able to experiment and confirm the possibility of creating our own simple 3D environment using pure HTML, CSS, and JavaScript. I worked out a simple UX to hand off to the design team, and we began to collaborate and iterate.

Research also included team members capturing imagery of the learner work environment and tools, as well as stories, experiences, and military culture relevant to their work. The overall process was iterative, and focus groups for the first module resulted in numerous changes, and had a cascading effect on the environment and interface for future modules, so that each module improved on the previous.

Text Storyboard

Text Storyboards and scripts were created in the early stages and were later converted to a visual storyboard. No examples are available as actual documents belong to the US Army.

Visual Mockups

Mockups were created by the graphic design team for characters and environmental/UI elements. Some of the design was dictated by US Army design requirements, which included logos, colors, and correct representation of soldiers in uniform. These changed across modules as improvements to the interface and environment were added.

Visual Storyboard

Visual storyboards were the central source of truth for the team, and the team used PowerPoint 365 to ensure correct layout, design, content, and logic. Review and Approval was tracked using Comments in PowerPoint, and I created a VB script that pulled all of the comment data and reported on completion of project areas, comments, and issues.

Interactive Prototype

CodePen allowed for the early tests of the 3D environment, animations, loading object textures, and testing JavaScript. As the environment complexity increased and became more singular in nature, code and assets were broken apart and organized, version controlled on GitHub, and edited via Visual Studio (VS) Code.

As the project progressed, it moved from a simple 3D cube skybox (a cube with a texture on the inside surface where the camera is positioned, giving the illusion of a physical environment) to a room with textured objects that all move and animated cohesively. As we pushed the number of textured objects and calculations, we continued to test performance with limited hardware with strong results.

Full Development

As this content belongs to the US Army, I can only provide a video demo, but I am working on recreating the concept using different content and assets, which I will make available once completed.

Watch the highlight video below

Features

  • Novel low impact 3D environment
  • Simple interactive 3D space
  • Variable-based branching scenarios
  • Integrated with Adobe Captivate and (later) Articulate 360
  • Clean interface design to reduce learning environment noise
  • Engaging animations and interactions

Results

Engagement was high with all focus groups and later with the deployment of the first 3 modules (out of 6). The serial story design combined with the 3D branching scenario environment resulting in comments on the training being mostly about when the next training will come out (as if it was a show with seasons!).

Learning outcomes (scores and completion) were high, showing that the environment was simple enough to navigate and having a scenario that forced the student to replay the scenario until they succeeded resulted in eventual completion. Scenario repeats were low, indicating that feedback was effective and errors tended to be resolved quickly by learners. Our contract ended and I chose not to continue with the new contract holder for the project, so I was unable to acquire data on changes in the targeted ROI metrics.

Takeaways

  • Developing a Minimum Viable Product (MVP) early was critical to the direction and success of the project, and shaped the creative and technical approaches.
  • Innovation, when tested early and scoped appropriately, can be delivered on schedule. 3D interaction does not need to be high-fidelity to result in increased engagement and learning retention.
  • Hidden humor and “easter eggs” continue to be valuable tools for driving engagement.
  • For the future, I would like to see cleaner UX design, smoother interactions, and better data granularity (learning and interaction data), which would also allow for more customized feedback.