How to create a tabular structure with 5 levels of information?

Introduction:

The data tables are the most used elements in any B2B app. In fact, if the application is hybrid then the designer uses her magic wand to build those complicated data tables into cards in mobile application and mobile sites.

There is a gap in understanding the importance of data tables in the dashboard or any B2B application. The belief is to create the combinations and dump them into columns and rows because there is no other way to show the details.

But actually, the data table is more than showing just information in a sequential manner. They can be used to

1. Build a comparison
2. Read as a summary
3. Placeholder of primary actions
4. Showcasing complex information
5. Showing the real-time data

Being a UX specialist in B2B application. I was challenged for the first time to showcase the 5 level information in a tabular format. It was exhausting at first go because I have to keep in mind that the structure might have actions at a later stage of the project and it could be converted into a mobile site. Additionally, each field in the row is clickable and gives information.

A brief was given to me to create a data table that show the details and status of the created leads at different levels. Moreover, should have the capability of showing the forecast and distribution related the leads kept at different stages.

Step 1: User interview

The objective of user interview is to understand the offline workability of the users. The intent was also to see and understand the tools that they are using to record the current progress of created leads. The tools that currently being used is tablue and excel files.

Step 2: Prioritization

Prioritization is a technique to analyze, how a designer wants to showcase the data?. It is always important to back the setting up of priority on the basis of user’s response.

You can do this activity through multiple mediums

1. You can even ask them to rate the information on the basis of importance
2. Observe the way they are using the tool and prioritize as per your understanding and get it tested.

For this project I have chosen the later step i.e by observing because I was not sure that my audience knew how the product will impact their lives and increase their productivity.

Step 3: Sketching

Sketching is my favorite part of any project. I have made few black and white concepts thinking that:

1. How can I divide the level of information?
2. How can I divide the information on the basis of kinds of users?
3. How can I visually differentiate them?

Step 5: Building it.

Creating the final product it always the challenging part because designer validates the decisions she has taken while sketching. Sometimes, at creation stage designer change the UX to make it look visually better but the changes are not drastic.

The data table used has 5 levels

1. Country
2. Region
3. Hub
4. City
5. Cluster

Sub level information like region, hub, city and cluster changes on the basis of the country. The only common information between them is that the table will show the status of leads like new, open, pending, under construction, pause etc for all these categories.

Level One: Countries were showcased in the side navigation bar

While deciding for level 1 which is usable for people who want to view the business as a whole thus, placing it in side navigation would be a better idea. Because of the following reasons

1. The product will comprise of only 10% users who will view the result on the basis of the country
2. 90% of users who will be more concerned about the results in their country, region, and city

Therefore, placement of countries in side navigation bar makes it easier to use for all the sets of users.

Level Two: Regions was displayed in cards

Each country have it’s own region for eg: India was divided into 5 regions which is North, South, East, West and Goa. Every country have its own set of regions. Thus, I took a decision that each region should act as a seprate card but should look part of one tabular structure. Therefore region cards will have common title.

Level Three: Hubs of a region are previewed on click of a card

Each region comprises of several hubs. Hubs are basically states of a particular country. I thought, that it will be a good idea to show hubs when user will click on a particular card (region). The idea is to bring order and open details as the user will performs an action. Thereby, helping him see the information in order without increasing the cognitive load.

Level Four: On click of a hub, list of cities are displayed

Each hub comprises of cities thus, all the cities are displayed on click of a particular hub. The component behaves as an accordion therefore, cities of only one hub can be displayed at a time.

Level Four: On click of a city, cluster are displayed

Cities and clusters are displayed using a color combination of same color family. This has separated the cluster from the city in a subtle manner.

PS: There was one more level to this table. Each data point in the table in clickable. The information related to that was showcased in the pop up as it was assumed the clickability rate will be low on the data point (each field of the column)

Key takeaways

1. Plan before building up because in b2b app the elements are highly customised as per the requirement of the business thus, it requires deep understanding for producing effective results. The outcome of this will be reduction in time spent on the action or activity performed by the user.
2. Always get it tested with users at inital stage. I have tested the concept on the paper before even making it digital.
3. Try to go minimal.