Blog

26.1.2021 Tech Culture

Refactoring UI: Large data tables

Refactoring UI: Large data tables

Article illustration by Ana-Maria Ghinita

Ana-Maria Ghinita is a senior product designer who has worked at sennder since June 2019 and leads our design community and internal enterprise project.
In this blog post, she walks us through how the team refactored the user interface and experience of one of our most important large data tables used internally by our operations team.

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.

Users and the need for data

  1. understand quickly the data set (as a whole or in subsets)

  2. compare efficiently parts of this data set

  3. find a specific data point rapidly

  4. find further interesting or relevant data points

Automation and the impact on current workflows

  1. Displaying relevant output that allows users to understand the system and the state it is in

  2. Helping the user make correct decisions based on this information

  3. Empowering the user to perform the actions needed in a quick and efficient way

Refactoring the UI — Status Quo

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:

  1. How this board is used today by our internal users — what is the actual purpose of it

  2. Which information is relevant to the users — for performing their tasks

  3. Which actions can we anticipate to support the user decision-making process

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

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

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:

Image for post

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:

Image for post

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.


Image for post
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).

Image for post

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

Image for post
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.

Image for postQuick 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.

....

If you’re interested in learning more about sennder, our culture, and open positions, go to our career site HERE.

You can also find our tech blog on Medium and follow us to stay updated on new posts HERE.