Research
I started with competitive analysis of timelines and project trackers in other competitor software. From here I analysed the positive and negative design elements. I then inspected interaction patterns on these, analysing desktop vs. mobile interactions, along with focus and hover states. This gave me a foundation to design our internal timeline and keep a top level set of guidelines
Key findings
Succeeds when:
Status is clear at a glance
Timeline adapts to it's container
Colour equates to user perception
Dense information can be collapsed
Focus states and links are visible
Fails when:
Ambiguity of status
Too little detail
Focus on visuals but not conveying information
Hierarchies are unclear or inconsistent
Design concepts
I explored interaction patterns and current and future use cases before moving into mid fidelity designs. I conducted ideation workshops with internal feature teams, which helped me refine the use cases for a comprehensive 'timeline' component.
I summarised that the key use cases were in the new task management feature and activity logs. Users wanted to be able to distinguish upcoming deadlines, clearly see the direction of the timeline, and have the ability to filter and view comments attached to a task. Icons were also important to include, as this was linked to an earlier step in the task management process. It was also noted that future tasks should be excluded from this timeline, as it ventured into the 'stepper' component.
I explored mid-fidelity variations of options to include all of these use cases, as shown below moving from early concepts to the near final concept. My final design was tested in a usability study, gathering feedback on user understanding, use of icons and the sorting behaviour. Feedback was positive and I created a spec sheet detailing the component usage for engineer handover.
Final component
The final component made use of the left hand 'indicator' to show status at a glance. The inner circle would be filled with an 'emphasis' glow if the task was still open. Upon completion, the 'emphasis' would be removed. I defined a set of rules that only the latest task on the timeline would have a coloured indicator, which kept the UI subtle. If the timeline item did not have a relevant colour in relation, it would stay grey. This would keep for example an activity log relatively easy to scan without overloading the user.
Spec sheet
I created a granular spec sheet for engineer handover, which detailed use cases, figma component and rules on colouring, line type etc. This was a collaborative process with engineers to refine which elements needed clarification or further detail added. See my 'granular spec sheet' case study for more detail {coming soon}
Future facing
The timeline UI successfully surfaced the status of a task, the history of a model or the comments made by a user internally. I created a few future facing examples of how this timeline could be put into more use cases such as a gantt view project management below.
