next project >

A Web Application and Learning Platform to Build Media Literacy Skills

Screenshot showcasing responsive design of teacher profile

MediaBreaker/Studios is a custom built web application created by MOD-Lab for the nonprofit The LAMP to support their mission to help students develop critical media literacy skills.

MOD-Lab's challenge was to work with the extensive knowledge of The LAMP team to help plan, design, and code a first release web application product.

The solution allows teachers to create their Studio, invite students to it, define learning experiences, and upload media to those experiences.

Students can open media seamlessly in the MediaBreaker tool to add their critical commentary and their completed work is then shared back to the learning experience gallery where peers can view and give kudos in a safe and supportive way. 

Screenshot of Teacher's Studio Page

Image showcasing badge design concepts

Badge design concepts

Students are awarded badges for their submissions, can access multiple teacher's studios and can track all of their remixed media submissions over time through their personal account.

MediaBreaker/Studios is a excellent example of a nonprofit creating a web application as a product designed to help them execute their mission. The following explores our engagement and process with The LAMP for this exciting effort.

We Started with a Vision and a Grant

The LAMP reached out to MOD-Lab to share their idea to build a learning platform around their MediaBreaker tool as a submission for the 2015 Digital Media and Learning competition

We worked with The LAMP team to create an application brief to flesh out their idea for submission as part of their proposal. 

We were thrilled to find out that our application was one of the winners of the competition. 

A Challenge: Building a Platform Around an Existing Product

MediaBreaker is a unique online video remix and "breaking" tool. It is a key component of The LAMP's programing to help kids build critical media thinking skills.

Our effort was focused on building a platform for teachers and students to facilitate learning experiences that would utilize the MediaBreaker tool; an existing application that was being rebuilt by another team at the same time as our efforts.

We kicked off the project by evolving our early application brief, creating application flows, wireframes, and technical briefs to help build shared understanding to what was being created for all project stakeholders.

From the start of the project we were strategic to consider the desired outcomes of the application and to have those drive the project in every way.

Image of design concepts

As we moved into project execution, we engaged in sprints to prototype the application while at the same time worked on visual branding and interface design concepts.

We iterated on all facets of the solution from responsive designs to unique interface elements. These included badges of our achievement system for successful student submissions as well as transactional email treatments for various communications from registration confirmations to notifications of student activity.