UI Analysis
       
     
User Profiles
       
     
Flow Diagram
       
     
Wireframes 1 - Popcorn Editor
       
     
Wireframes 2 - Drag & Drop
       
     
Wireframes 3 - Zoom Timeline
       
     
Wireframe 4 - Timeline Interactions
       
     
Design - Embedded Player
       
     
Design & Development
       
     
Result - Popcorn Editor
       
     
UI Analysis
       
     
UI Analysis

First, we went through some well known embedded players and video editors to get a good feel for how they work, how they differ, and what separates the good from the bad.  

User Profiles
       
     
User Profiles

We created a user profile document to help us understand who we were building this for. The Mozilla team helped us refine these into profiles that aligned with the project goals. 

Flow Diagram
       
     
Flow Diagram

We created a flow diagram that helped communicate how the Popcorn editor will live with the rest of the Popcorn community pages, and suggestions on navigation, hierarchy, and labeling.

Wireframes 1 - Popcorn Editor
       
     
Wireframes 1 - Popcorn Editor

We explored many different ideas and concepts for how to best mashup multimedia in a browser. 

Wireframes 2 - Drag & Drop
       
     
Wireframes 2 - Drag & Drop
Wireframes 3 - Zoom Timeline
       
     
Wireframes 3 - Zoom Timeline
Wireframe 4 - Timeline Interactions
       
     
Wireframe 4 - Timeline Interactions
Design - Embedded Player
       
     
Design - Embedded Player

We collaborated on design with Ocupop to create the UI for the embedded player

Design & Development
       
     
Design & Development

We ended up doing the front end development for part of the embedded player

Result - Popcorn Editor
       
     
Result - Popcorn Editor