The timeline is taking shape

Making progress with sketches, wireframes, and a prototype

Though it’s mostly taken place in scattered, stolen moments, I’ve made a lot of progress on the UX of the timeline section, much of which was still a disconcerting mystery not so long ago.

Some notes and sketches working through the timeline’s UX and IA problems

With the help of the data categories and content inventory I established in the previous post, I’ve settled on a binary timeline concept: each post is either small or large. Small posts consist of up to 100 words and/or up to four images/videos. They’ll be represented on the timeline in their entirety. Large posts consist of 100 or more words and/or more than four images/videos. They’ll be represented on the timeline in truncated form. (I know truncation is not a content strategy, but I’m giving it a shot anyway.) As timeline nodes, small and large posts alike will be constructed according to their needs from a shared library of elements.

A Venn diagram of the elements relevant to small and large nodes


I made some wireframes of small and large timeline nodes with the maximum amount of content each could have. (I made the wireframes in Sketch, which, in addition to Figma, I’m finally coming around to after years of avoiding them.)

Small timeline node
Large timeline node

And here is an excerpt from a wireframe with actual content from January 2020 that helped me get a sense of how the timeline nodes would work in aggregate:

See the full wireframe


When I started, I didn’t think my January was a very active month, but its timeline has 45 nodes, which is certainly not nothing. This was a good excuse to start thinking about how filters could work, a concept which quickly evolved from sketch…

…to wireframe…

…to getting way ahead of myself and spending an entire weekend building a functional prototype. If you have JavaScript enabled, you can try it:

  • text, short, Twitter
  • text, short, Letterboxd
  • text, short, Twitter
  • text, short,
  • text, long, Letterboxd
  • video, short, Instagram
  • text, short, Twitter
  • text, long,
  • text, short, Letterboxd
  • image, short, Twitter
  • video, short, Flickr

I’ll go into more detail on the prototype and what I learned from it in a future post.

Other developments and next steps

A few other things this process helped clear up, at least for now:

The next step will be some light user testing to see if my wireframes’ and prototype’s assumptions are validated. If you’d like to be a part of that process by trying out the filter prototype above and letting me know if it does or doesn’t work the way you expected, please do!