![UI Analysis](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382389457184-979Z6RPGUM5SKCMMMQQU/Screen+Shot+2013-10-21+at+3.03.28+PM.png)
![User Profiles](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382389797330-8HS7UWXMTGZWV15Q0RMI/Screen+Shot+2013-10-21+at+3.06.10+PM.png)
![Flow Diagram](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382389764862-YFV8YURYCMVSX1WP8SCE/Screen+Shot+2013-10-21+at+3.08.24+PM.png)
![Wireframes 1 - Popcorn Editor](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382392976039-MM5YO5VMM1F2PSRQ4PDC/Screen+Shot+2013-10-21+at+3.13.29+PM.png)
![Wireframes 2 - Drag & Drop](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382390184253-HUXUDUTKKXK7KRTLNUXZ/Screen+Shot+2013-10-21+at+3.15.58+PM.png)
![Wireframes 3 - Zoom Timeline](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382393156898-RHX24ZSN9Z2CU9NJGYT0/Screen+Shot+2013-10-21+at+3.17.52+PM.png)
![Wireframe 4 - Timeline Interactions](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382390434537-XOMSQ4XD2IL84HZEV63V/Screen+Shot+2013-10-21+at+3.18.59+PM.png)
![Design - Embedded Player](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382390842259-1R8199JR0AEMUDZD9C5C/popcorn_embedded_player.jpg)
![Design & Development](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382390866456-HNCP7WOC98J1ZHLMYR5P/popcorn_share.jpg)
![Result - Popcorn Editor](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382393017696-44EMNPGGMLNJL70UE89R/moz_popcorn01.jpg)
![UI Analysis](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382389457184-979Z6RPGUM5SKCMMMQQU/Screen+Shot+2013-10-21+at+3.03.28+PM.png)
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](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382389797330-8HS7UWXMTGZWV15Q0RMI/Screen+Shot+2013-10-21+at+3.06.10+PM.png)
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](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382389764862-YFV8YURYCMVSX1WP8SCE/Screen+Shot+2013-10-21+at+3.08.24+PM.png)
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](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382392976039-MM5YO5VMM1F2PSRQ4PDC/Screen+Shot+2013-10-21+at+3.13.29+PM.png)
Wireframes 1 - Popcorn Editor
We explored many different ideas and concepts for how to best mashup multimedia in a browser.
![Design - Embedded Player](https://images.squarespace-cdn.com/content/v1/5260527de4b0babb888e1ec0/1382390842259-1R8199JR0AEMUDZD9C5C/popcorn_embedded_player.jpg)
Design - Embedded Player
We collaborated on design with Ocupop to create the UI for the embedded player