Representing Progress: Surfacing System Status

Representing Progress: Surfacing System Status

Representing Progress: Surfacing System Status

Representing Progress: Surfacing System Status

Brief

I was tasked with auditing our existing display of status, in a new 'timeline' component that would be integrated in our design system. I conducted research, competitive benchmarking and an interaction audit. I then designed the new component and provided some future facing designs for task management UI enhancements.

Problem Statement

Anaplan was implementing a large task management feature. It was important for users to quickly be able to gather the status of their task, and note any failures or successful tasks. Our existing designs were largely greyscale, and users struggled to distinguish hierarchies or quickly gather insights from the history log.

Project timeline

Competitive Analysis

research

Interaction patterns

Research

Existing use cases

workshop

Future use cases

Design

Prototypes

design

Feedback

Research

Spec sheet

Design

Engineer handover

workshop

Brief

I was tasked with auditing our existing display of status, in a new 'timeline' component that would be integrated in our design system. I conducted research, competitive benchmarking and an interaction audit. I then designed the new component and provided some future facing designs for task management UI enhancements.

Problem Statement

Anaplan was implementing a large task management feature. It was important for users to quickly be able to gather the status of their task, and note any failures or successful tasks. Our existing designs were largely greyscale, and users struggled to distinguish hierarchies or quickly gather insights from the history log.

Project timeline

Competitive Analysis

research

Interaction patterns

Research

Existing use cases

workshop

Future use cases

Design

Prototypes

design

Feedback

Research

Spec sheet

Design

Engineer handover

workshop

Brief

I was tasked with auditing our existing display of status, in a new 'timeline' component that would be integrated in our design system. I conducted research, competitive benchmarking and an interaction audit. I then designed the new component and provided some future facing designs for task management UI enhancements.

Problem Statement

Anaplan was implementing a large task management feature. It was important for users to quickly be able to gather the status of their task, and note any failures or successful tasks. Our existing designs were largely greyscale, and users struggled to distinguish hierarchies or quickly gather insights from the history log.

Project timeline

Competitive Analysis

research

Interaction patterns

Research

Existing use cases

workshop

Future use cases

Design

Prototypes

design

Feedback

Research

Spec sheet

Design

Engineer handover

workshop

Brief

I was tasked with auditing our existing display of status, in a new 'timeline' component that would be integrated in our design system. I conducted research, competitive benchmarking and an interaction audit. I then designed the new component and provided some future facing designs for task management UI enhancements.

Problem Statement

Anaplan was implementing a large task management feature. It was important for users to quickly be able to gather the status of their task, and note any failures or successful tasks. Our existing designs were largely greyscale, and users struggled to distinguish hierarchies or quickly gather insights from the history log.

Project timeline

Competitive Analysis

research

Interaction patterns

Research

Existing use cases

workshop

Future use cases

Design

Prototypes

design

Feedback

Research

Spec sheet

Design

Engineer handover

workshop

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.


We 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.

© 2023 Sophie Powell-Hall

© 2023 Sophie Powell-Hall

© 2023 Sophie Powell-Hall

© 2023 Sophie Powell-Hall