San Francisco Chronicle timeline redesign

the project

The goal: to redesign The Chronicle’s timeline component into an embeddable, more compact element that can seamlessly be incorporated into articles.

This redesign project was one my manager gave me to work on intermittently throughout the course of my internship, using The Chronicle’s current timeline component as a base. The existing full-screen timeline worked great for stories that were written in a completely chronological form, but when it came to embedding it into more traditional articles, it tended to break the story flow and pull the reader out of the article. My manager requested a smaller version of the timeline that could more easily integrate into stories – one that would complement, but not overtake, the article itself.

the process

I began by sketching out the current timeline and noting which features were problematic when being used as an embedded component: The fact that it was full-screen broke up the article, it appeared cramped on mobile devices and there were a few technical functionality issues. With those notes in mind, I then began to reimagine what the component could look like if it were more condensed.

I sketched out the issues with the original timeline component (left), then created some initial wireframes for my redesign (right).

I then turned to the code, familiarizing myself with how it worked and adjusting it as necessary for my redesign. The biggest changes I wanted to make were making the component match the width of the article text column and switching the direction of the timeline events to scroll horizontally (and into view) rather than vertically. This involved adding next and previous buttons, and hiding future timeline entries until they’re navigated to.

The biggest challenge in this project was probably adjusting the timeline itself – it’s generated with D3, a coding language I have yet to learn, so I had to familiarize myself with it just enough to make the changes I needed.

the solution

Honestly, I was nervous going into this project. Seeing D3 elements in the code was daunting to me, and I wasn’t completely sure if the redesign was something I could do with my skill set. That being said, I’m happy that I took on the challenge – I think completing this was a proud moment for me, and although it’s not a perfect element, it solves the problems the initial timeline had. I finished this project at the end of my internship at The Chronicle, and it recently got incorporated into a huge investigative project by the paper – check it out here.