top of page

design process: 
Employee timeline

Designing variations of the timeline

The Employee Timeline was designed to give the employees' performance review results context. By displaying the employees' review scores next to their work changes, HR could better understand the employee journey in the company. 

The final design of the timeline: an animated demo of the loading behavior.

design variations

Here you can see examples of designs of the timeline I tested. The designs were evaluated by how well they supported the timeline's goal to showcase a clearer view of the employee journy in the company, and also how well it displayed different types of content, states of viewing and context, and how engaging and unique the UI design would be in these states. 

Timeline 1 Copy.png
Variation 1: color-coded events
In the first variation, events were positioned on a horizontal line, representing time, and were color-coded to immediately differentiate between types of events. Hovering over an event would show more details like the exact date and a link to view more details. 
This variation was not selected because color codes are difficult for people to learn, and it didn't provide any focus on specific insights.  
Variation 2: Events as blocks
This variation tries to find a solution for displaying multiple events. The events would be represented by rectangle 'blocks', which could be stacked one on top of the other. Hovering over an event will expend the block and show more details, and a click would open the event to show a large rectangle, containing the event details. When an event is opened, it would 'push' the other events to the sides of the timeline to make space. 
Though this variation would make for a very distinct UI experience, it was not chosen, because it seemed to be too disorienting as it changed the timeline range when events open and close. 
Variation 3: Dividing events types to above/below the timeline
In this design, the events are divided into two types: regular work changes events and performance review events. one type will open downwards, and the other type will open upwards. this way two types of content could be viewed together but still easy to tell apart. This view would add context to the employee's performance review.
Users could choose between viewing only the performance review events or viewing them with the employee's changes by selecting "Reviews & changes" in the dropdown menu above the timeline: 
However, this design was not chosen. It seemed to create a sort of 'split' into two timelines rather than give events more context. 
Screen Shot 2019-11-17 at 23.01.00.png
Variation 4: Reading content in timeline
In these designs, I tested ways to allow reading the actual content of the employee performance review inside the timeline, alongside the employees' work changes history. 
Variation 5: viewing performance reviews as trends. 
In this design, the idea was to allow HR and managers to see trends in the employee performance review, and compare them to changes in the employee's work. For example, if an employee's review score went down around the same time their manager or team changed, there might be a problem there. Users could choose a topic from the performance review in the drop-down menu, for example 'Team work', and see the employee's trend over the years. There was also a design for turning on the 'company average' trend for comparison. 
This design was not chosen because it seemed that viewing a trend for one person is an 'overkill'. Instead of viewing trends, it was now clear that in this case, showing qualitative content, rather than quantitative content would be of better use if the goal is to help managers understand employees.
Admin view - mini card  copy.png
Variation 6: The timeline on a 'mini-card'
This variation was important for discovering the benefits of using a vertical timeline instead of horizontal. The idea in this design was to show the timeline in a floating mini-card, which could be displayed alongside any page in the app for more context about an employee.
The mini-card would open after clicking on a person anywhere in the app. 
mini card 2 copy.png
Verticle timeline design
The vertical timeline design seemed to allow to read content in the timeline more easily and with a clearer order. 
This view would also be easier to navigate with scrolling vertical scrolling and would be useful in the mini-card version that could be displayed anywhere in the app, without interrupting or blocking anything from view.

the final timeline design

Final variation: Verticle timeline 
The final version of the timeline was based on the verticle timeline idea in variation no 6. It is content focused and would allow presenting content from the performance review while viewing the other employee work changes.
Designing the timeline interactions, event grouping and comparisons
The main challenge of designing the timeline was that it had to be able to contain any type of employee events, and any type of time range view. I designed different possible states:  

- Multiple events in one date
- Time zoom in/out 
- Group events in time increments (5 events on the same day/week/month...)
- Comparison: the point of the timeline is being able to compare the employee's reviews and work changes over time, so I designed a comparison mode, where it's possible to view multiple reviews at the same time.  
Timeline event grouping
Example of how a single, double, and multiple events look like when they occur at the same time frame in the timeline: 
timeline events.png
bottom of page