Discovery Education

An interactive learning experience for high school students.

iscovery Education, a division of the Discovery Channel, delivers standards-based content for education initiatives with a variety of tools and resources. WDG partnered with Discovery Education to a create a gamified learning experience as a single page web application (SPA) to explain the “Science of Addiction” to a high school target audience.

Project Mission

Opioid addiction amongst 9th through 12th graders in the U.S. is at an all time high. The abuse of Oxycodone, Morphine, Heroin, and other opioids affect the brain chemistry of abusers, particularly young people. 63% of the 144 drug overdose deaths every day in the U.S. come from opioid abuse. Discovery sought a way to create a narrative-based web application with gamified elements that engages and informs targeted users. With an in-house design, Discovery needed a strong development and strategy team to execute the final product. WDG was the solution.

What We Did

WDG created a browser-based interactive learning module which uses compelling design and voice-over to educate students on Opioid addiction. Interactive, gamified elements and animations create an engaging user experience for targeted audiences. Our team also created a Spanish translation version of the SPA , and developed a responsive tablet version for both languages.

Customizing Single Page Applications

The single page application (SPA) retrieves all necessary code with a single page load, allowing content to load quickly and efficiently. As all code loads initially, the SPA drastically reduces lag time for new page loads and refreshes. We also created a responsive tablet version of the application with touch capabilities that were suited to custom animations. To create ease of development, all aspects of the build were componentized. Much like flexible layouts are utilized on WordPress, menus, buttons, transcripts, cards, sliders, and more were built as components so developers could reuse them across sections of the SPA. We also instituted custom maintenance for Discovery Education in the post-launch phase.

Creating Targeted User Experiences

The SPA was designed to be responsive on tablet and highly performant on desktop. Interactive elements, such as graphics, quizzes, card flips, and other components, help ensure continual user engagement throughout the application’s use. The WDG strategy team consulted with Discovery to create a set of UX guidelines and standard practices that best targeted a high school user experience. These custom guidelines are specifically adapted to the needs, concerns, and user journey of adolescents in order to increase application use.

Discovery Education table responsive design mockup

Leveraging The Power of Ember

The SPA is powered by Ember.js, an open source framework used to help build single page applications with specific sets of guidelines. Ember includes many add-on options for tasks, creating flexibility for developers. Ember CLI’s build toolchain allowed the WDG team to compile and create code for development and production simultaneously, creating a powerful and useful solution for quickly and efficiently managing the development processes. The files are further optimized and merged for ease of the build process, as provided by Ember.

Powerful Multilingual Capabilities

The application is accessible in both English and Spanish, meaning translations became an important aspect of the development process. WDG’s team used the add-on Ember i18n for the internationalization of content, which facilitated part of the translation process. The other portions were translated in-house by a native Spanish speaker on our development team. In this process, we matched styles between the two languages, adjusted audio synchronizations, and reinforced content with appropriate animations.

Developing With Engagement In Mind

Our team developed and implemented the audio capabilities of the application on tablet and desktop versions in both English and Spanish. The multilingual development required our team to sync audio with animations using the animation library Velocty.js, which inherently coalesces with Ember’s capabilities. To circumnavigate Apple’s audio restrictions, WDG developers also created a custom solution to auto-play audio that matched the desktop experience.

Start a Project

Let WDG Help You
Grow Your Business!

Let's Talk