In today’s world data is fundamental. For many systems, it is the basis for everything we do. We rely on it to make decisions effectively. In enterprise products for example the ability to process and display larger amounts of data is a must.
But when we think about large amounts of data we almost always think Excel Sheets. They have become our first go to method to support us in our daily work but even though easier to implement within a team or workflow, enterprise applications can and should offer much more than Excel sheets or beautified versions of them.
As Senior Product Designer at sennder, I had the chance to work on refactoring the interface and respectively the user experience of one of our most important data tables used by our operations team on a daily basis — known internally as the Dispatching Board.
We began the refactoring process by identifying three key aspects: how users interact with data and why they need it, and how automation will impact current workflows and the way users will interact with automated data in the future. These three were the foundation for our entire process and were used to inform our decisions during the refactoring.
Users and the need of data
From our own research and from best practices available, we have come to observe that in the context of day to day work users interact with data to:
- understand quickly the data set (as a whole or in subsets)
- compare efficiently parts of this data set
- find a specific data point rapidly
- find further interesting or relevant data points
Excel sheet tables, even though efficient in many ways, do not contribute to a well-designed system nor to an efficient and empowered user. And since they tend to be a metaphorical nightmare from a user experience point of view our approach to was to start from scratch. We worked with our users to create a data display method that supports their workflow, reduce cognitive overload and focus on the most important jobs to be done.
Automation and the impact on current workflows
It is obvious to everyone by now that many industries are pushing and need to become more data driven, shifting the processing of large amounts of data from humans to machines. In this scenario the focus should be on:
- Displaying relevant output that allows users to understand the system and the state it is in
- Helping the user make correct decisions based on this information
- Empowering the user to perform the actions needed in a quick and efficient way
HOW, WHAT, WHEN and WHICH information the interface should display in order to empower a user to act quickly, efficiently and effectively in time sensitive or critical situations becomes the new and most important problem to solve. This being said, based on Klaus Christoffersen and David D. Woods article “How to Design for Human-Automation Coordination”, data displayed to the users should be Observable and Directable.
Refactoring the UI — Status Quo
The current board display is a simple upgraded excel look-a-like list that displays the information relevant for each order, to all operations users everyday.
Observation and audit: User experience issues
By performing a UX audit, as well as observing and shadowing users while interacting with the board we have discovered the following issues:
- The information doesn’t behave very well on small or large desktop screens (most commonly used resolutions are between 2560×1400 and 1250×720)
- Most of the information was added in a manner similar to “we need to quickly have this for stakeholders — done”. Repeat. Repeat. Repeat. — nobody taking responsibility of the big picture
- All users see all orders, there is no personalisation of orders, therefore filters that have grown extensively are supposedly used to manually reduce the information, to what is relevant and important for each user but research showed that users work in a different way (using very little of the provided filters)
- Some information is more relevant than the other yet all rows are treated in the same way, on top of that even though apparently all information is needed, when observed working users do not make use of all the information displayed
- Even though orders require actions to be performed, it is not clear what is happening to an order right now, what action I need to do, can I do or should do.
Further research and ideation: User walkthroughs, card sorting and data prioritisation
The first item on this list was understanding:
- How this board is used today by our internal users — what is the actual purpose of it
- Which information is relevant to the users — for performing their tasks
- Which actions can we anticipate to support the user decision making process
For this we focused on 3 points:
- Performing card sorting exercise to understand how users map information in their mind based on importance. We recommended the following clusters: MUST HAVE, GOOD TO HAVE, NICE TO HAVE, NOT NEEDED
- Perform 1:1 user interviews with our users with the purpose to:
- Observe them use the board and understand how they use its functionalities.
- Identify what is missing, what is good and what workarounds have they created to compensate for the shortcomings of the current board.
The conclusion of the interview has been synthesised and the result is presented below:
Main research insights:
- Each role uses the board slightly different having preferred different information as relevant
- One role goes to the board to get information and pass it on
- The other role goes to the dashboard to learn where an action is needed
- There was still a lot of information left that was important — further clustering was needed
- A way to accommodate for both roles was necessary — from a business side having personalised boards, was not a main focus for the time being
- All users opened manually all loads in separate tabs — to deep dive for further information, there was no way to see a summary of the information quickly
- Only a specific set of filters were used regularly and consistently
- Marking urgency or relevant orders for a specific user was not possible as everyone was having access to all orders and if one order is marked as important everyone would see it and could unmark it.
Refactoring UI — Process and methods
Guided by Hick’s Law and Miller’s Law — we reclustered information in a way that aids the user in finding it quickly without needing to process to much of it at a time:
Applying the principle of ‘recognition rather than recall’ — we moved most used filters at the top for quick access, and introduced a counter for showing that extra filters from the hidden menu have been selected:
We introduced accelerators for orders that require special attention such as: urgent, recommended for you or matching a certain specific criteria
To further reduce cognitive overload and allow for information to be cluster based on similarity, we group fields that were performing the same action or searching for similar concepts (for example filter ring for customer reference numbers, internal reference number, loading reference numbers or unloading reference number)
Also using visual indicators to express urgency, importance or other characteristic for a load (originally we went with using emojis, easily recognisable and fun, however in some cases it proved limiting thus we are exploring different possibilities)
And last but not least we proposed to use a pattern from email platforms to give the user the possibility to quickly see all information of an order without navigating away from the page.
Since all good design is iterative, we considered this the first iteration that may uncover use cases that were not spotted during the initial research or user testing. These blind spots will need to be accounted for and addressed in future iterations of the board. And such future iterations will also need to accommodate for the ever increasing tendency towards automation introduced within the application, making the board less of a data table and more a system status/state indicator informing the user more about actions to be taken, next steps to be performed and incidents to be handled.
This article was originally published on uxdesign.cc. Click here to go to the original article.