Dynamic Timeline July 27th, 2011

Project overview: An often overlooked element required early in a successful design project is the content. The practice of content strategy has over the past 12-18 months grown in importance and those companies that undertake content creation early see benefit throughout the later stages of projects and delivery. Sadly even now many project owners leave content creation until the last minute focusing their efforts on endless features and the latest funky UI trends.

As an experience designer I’ve been somewhat lucky in that the majority of my clients have vast amounts of content at their disposal so that when combined with stakeholder domain expertise it rarely means content and context are 11th hour deliverables. Of course this comes with other inherent problems but these are not for discussion here. Here I’d like to discuss the work recently carried out for English Heritage and the design of their new timeline component.

My employer (Digirati) was selected as a result of a tender process to design a timeline component. Having worked with English Heritage for a number of years we have an understanding of the content that would end up being plotted on the timeline and so could picture the potential solution early in the tender process.

Now you might think a timeline - that’s just a visualisation of events over a period of time and yes crudely that is what a timeline is. Here though we had the added complexity of designing a timeline component that was content managed, whereby content editors could create timelines to represent any of the properties and historic collections owned and managed by English Heritage. That itself is quite a challenge, however the events plotted and durations that the timelines would cover presented problems technically in that date entry and storage was going to have it’s own problems to overcome.

As with any interactive feature there’s a great deal of planning required prior to being able to fully visualise and design the interface that would allow the audience to successfully interact with the proposed component. English Heritage and their web team have huge amounts of content and all are familiar with the information at their disposal, combining this knowledge with technology was key to delivering an engaging, usable and on brand solution.

During a competitive analysis phase it became apparent that the majority of timelines were custom built, presenting static pre-defined data. For this reason to enable us to discus the options for a dynamic, content managed timeline capable of presenting ‘any’ set of data examples that plotted (huge amounts of) data over time were evaluated. For this we turned to the financial industry and historic stock price graphs.

An important aspect of the timeline brief was its accessibility and ability to deliver upon English Heritages SEO requirements. To achieve these demands an html, JavaScript and canvas implementation allowed all the expectations to be delivered upon.

To allow the correct technology choice to be made whilst ensuring that all the required functionality was deliverable a UX design phase created a series of wireframes that illustrated scenarios that English Heritages standard set of Personas would likely work through when interacting with the new timeline feature.

The wireframes outlined the required navigational features to allow users to successfully interact with the timeline data whilst also describing the complexities of plotting varying data sets against information that provided context to included events.

The ability to iterate through many scenarios illustrated via the wireframes allowed the discussion of the potential breakpoints that would occur whilst plotting data on the evolving interface. It also presented many opportunities that became apparent and subsequently lead to the design of additional navigational functionality that allowed timelines to be linked together so applying the concept of ‘zooming’ or ‘drilling’ into events. This removed to a great extent the possibility of information overload at those times where much activity occurred at the property in question at any given ‘zoom’ level.

Once the experience and interaction design was resolved we were able to brief a designer as to what the interface needed to include and allow the user to interact with. This level of detail available during the initial design iteration meant an almost complete design was able to be created that seamlessly integrated all the required functionality so that nothing felt as if it were an after thought.

By this time the content requirements were also more defined with real content available for use during the design process therefore avoiding all the problems related to design and visualisation of an interface using lorum ipsum. As always the core of the interface is its content, the text, images and media. Without an understanding of the content requirements additional breakpoints and unsupported content scenarios that may have arisen because of inappropriate visual design direction were avoided.

The timelines is built using the javaScript library jqPlot that consumes and renders JSON data that is collated and managed by English Heritages content management system Alterian Content Manager. The end results of the experience, interaction and interface design can be seen on many property pages on the English Heritage site, notably for Dover Castle.