Mozilla / Browser-based media authoring

A maker-friendly way to remix the web.

Product strategy, interaction design, and application engineering for an in-browser editor that combines video with live web media.

Mozilla Popcorn Maker editor shown on a laptop

The assignment

Make a powerful media timeline approachable to first-time creators.

User Kind worked with Mozilla to design an editor for combining video with links, maps, text, images, and other web-native media. The product needed to support layered, time-based composition without inheriting the intimidating weight of a professional desktop editor.

Client: Mozilla
Scope: Interface analysis / User profiles / Product flow / Wireframing / Interaction design / Application engineering
Platform: Browser-based interactive media authoring tool
User Kind's role: Product strategy, interaction design, and application engineering partner
Result: A production interaction model spanning the editor, embedded player, and sharing flow

How the work unfolded

Turn a complex editing model into direct manipulation.

Interface analysis of established video players and editors — 01 / 05 Interface analysis

User profiles created for Mozilla Popcorn Maker — 01 / 05 Interface analysis

The interface

A browser workspace built for making, previewing, and sharing.

Finished Mozilla Popcorn Maker editor shown on a laptop — **Popcorn editor** Media, web events, playback, and a layered timeline share one focused workspace.

Mozilla Popcorn embedded interactive media player shown on a laptop — **Embedded player** The published experience keeps interactive web elements connected to the underlying media.

Mozilla Popcorn Maker project sharing interface shown on a laptop — **Sharing flow** Project sharing carries a creator from editing into a presentation ready for an audience.

The result

An editor that makes time-based web storytelling tangible.

The finished experience united the stage, media library, event inspector, and layered timeline in one coherent workspace. User Kind carried the interaction model through interface design and production implementation for parts of the editor and embedded player.

Start a conversation