At the beginning of 2013 Say Media decided that it was being hampered in its efforts to build beautiful web publications by the limitations of the Drupal-based stack that had been used up until that point.
An effort began to design and implement a fresh new system for producing and publishing content, building on the latest reader experience technology that had been previously developed for ReadWrite and providing a completely new authoring tool that would be optimized for building articles that work well within the site framework.
During a hackathon that was held in the early planning stages, I worked with Antoine Imbert, Arthur Nicholls, Brad Choate, Jeremy Henault and Yuko Takahashi to create a prototype of that authoring tool.
We set about prototyping a few different features that we considered to be lacking in the previous system: a dominant content editing area to minimize distractions and help with focus, a friendly UI for uploading and inserting photos, and a feature to analyze the article content and find related media on Flickr as a placeholder for access to various third-party photography sources.
My area of focus for the duration of the three-day project was the overall UI framework, including the fullscreen editor area, while others took on the other features.
The finished prototype, pictured below, included basic editing functionality, including some special features like pull quotes which had been difficult to create in the previous system, and a properties sidebar that could collapse down to create a distraction-free view.
We also experimented with some other interesting features that we wanted to include in some usability tests. For example, to complement the distraction-free view we created an "easter egg" feature where the user can create a paragraph whose entire text is "[photo]" and have that be immediately replaced by a photo placeholder, allowing the author to go on writing the article and come back and insert the images later by dragging and dropping onto the placeholder.
By the time this prototype was being developed it was largely decided that the new publishing system would be built using AngularJS, so we also used this prototype as an opportunity to feel out that framework and understand how we might use it to build applications in the future.
Enough people were wowed by our prototype that the project ultimately won two hackathon prizes: Best in Publishing and Best in Show.
After the hackathon the prototype was used in some one-on-one sessions with content authors as an initial round of product investigation for the real composer. Many of the features from the prototype made it into the product in one way or another, including the collapsable sidebar (now even more collapsable after the panels were turned into vertical tabs) and inline editing tools.
The final product is also written in AngularJS. Although none of the code from the prototype was carried over, we'd learned a bunch about how to put together an AngularJS application and these learnings were passed on to the team that built and now maintains the application.
At the time of writing the new composer is used every day for content production on xoVain and will soon be joined by other Say Media brands as they are migrated onto the Tempest platform.