)
Article illustration by Ana-Maria Ghinita
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 of 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 a 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, 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 for 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 was to start from scratch. We worked with our users to create a data display method that supports their workflow, reduces cognitive overload, and focuses 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 every day.
Screenshot of our dashboard using mock data (screen resolution 2560x1440)
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 2560x1400 and 1250x720)
- 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 for the big picture
- All users see all orders, there is no personalization 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 do, or should do.
Further research and ideation: User walkthroughs, card sorting, and data prioritization
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 synthesized and the result is presented below:
Screenshot taken during the card sorting exercise performed with our users
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 personalized boards, was not the 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 too much of it at a time:
Screenshot of the result from the re-clustering exercise
Applying the principle of ‘recognition rather than recall’ — we moved the 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:
Redesign of the quick filter bar at the top of the board
We introduced accelerators for orders that require special attention, such as urgent, recommended for you, or matching certain specific criteria.
The new accelerators
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).
Updated side panel
Also using visual indicators to express urgency, importance, or other characteristics for a load (originally we went with using emojis, easily recognizable and fun, however in some cases, it proved limiting thus we are exploring different possibilities).
The visual indicator (emojis) connected with the accelerators and the personalized flag_
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.
Quick view of an order
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.
)
)
)