Defense Language Institute eLearning Responsive Game Template Development

Family_02_Mockup_Layer1.png

Project Details

Government
Defense Language Institute
Project Responsibilities
Project Manager, Ui Design and Front-end Web Design.
Tools Used
Atom and GitHub.
Coding Languages
HTML and CSS.

Introduction

The Defense Language Institute teaches foreign languages to military personnel through the use of online eLearning games. The program is built on an XML framework so that Military personnel can learn in the field without being dependent on a live internet connection. My team was responsible for creating eLearning game templates that can be used for different languages. I was responsible for managing a team of 6 programmers, Ui Design and HTML/CSS front-end development. My task was to create static mockups and the javascript programmers would make the templates interactive.

Design Challenge

We were unable to use frameworks so we had to custom code all templates.

Assumptions Made

The assumptions that I had made when first designing the eLearning game templates was that we could design responsive web pages.

Early Mockup

jpd-family02-early-comp.png

Early Mockup Explained

I had to create a more user-friendly, user interface to match our design patterns and build a better user experience.

Hifi Comps

dli-family02-hifi-comp.png

Hifi Comps

These are the original Sketch hifi comps that I used for referencing purposes to build the desktop and mobile interactive website pages.

Final Product

Family 02 Template Animated User Experience Slideshow

Conclusion

By the end of the project our team had completed a total of 40 eLearning game templates. We used GitHub for version control and error reports. I was also responsible for reporting/fixing bugs and cross browser testing for desktop. The minimum requirement was that all game templates must work in ie 9 and up. The original assumption that we could design for a responsive experience was incorrect. The frame work relied on an iFrame to import the game template, meaning that responsive environment was removed because of the iFrames limitations in modern web borrowers. The solution that I came up with was that I designed all my templates for a responsive experience and then I changed the final template to a fixed width and removed the calc responsive width in css. This will allow future developers to easily make the template responsive when the iFrame is depreciated for future browsers. Please ask to view source code in person.

BACK