When you search for dashboard design inspiration or check out published cases on dashboard layouts, you’ll most likely find those dashboards not having much data. Surprising, right? They will display three to five parameters, maybe a graph or two. And that’s fine for most cases.
However, I found myself in a situation figuring out how to design a dashboard with not five, not ten, but thirty numbers to display. And sometimes, there can be over a hundred parameters on the front page. I’ll get to that part as we explore this case step by step.
I ran into the issue while working on a new feature for CFT-AML. CFT-AML, a financial monitoring system, is used by some of the largest banks in Russia. It catches suspicious transactions using sophisticated rules and ML algorithms and puts all the information about such events into an entity we call an investigation.
As with all banking software, the app has access to a lot of data and has to be very flexible. One tradeoff that comes with flexibility is complexity. You end up with tables with numerous columns that are somewhat hard to navigate around.
However, flexible UIs are ideal for discovering shortcuts you can create for your users. Of course, they will often go through individual pages and create a unique filter for spreadsheets of data. What you need to do is to look for recurring workflows.
From customer feedback, we discovered that the department managers often need to access specific sets of investigations. They do that not only to find a certain investigation but also to check on the overall state of their department’s work.
That’s where we come to the number 30. There are several types of investigations our users need to monitor. These include online, offline, unassigned, and overdue investigations. Management would also like to see those stats for the whole bank and separately for the head branch and all other branches but the head one.
I decided to get all those numbers before them and make them clickable if they want to dive deeper. The click on a number would lead them to a familiar investigations table, where they would be able to refine search parameters if needed.
Since we’re working on a complex dashboard, adding counts for the investigations assigned to the user would be reasonable. Most users would only see those. But if we add all the stats the manager can access, we get a rare case. It is not your typical web dashboard, but not yet an airliner cockpit.
After several iterations, deploying the first version, and then a few more iterations, I got to the version we have right now. During this search for a better design, I explored customer feedback and worked closely with system analysts. I also hosted a few company-wide design reviews to have a chance to get my mockups and prototypes reviewed by people outside the product team.
I used horizontal, vertical, and proximity grouping to make the data more readable. It also helped to pull up the stats and realize that 99.9% of our users work on displays with an effective resolution of 1080p and larger. That meant I didn’t have to decide how to cramp up that data on a smaller screen.
Remember I mentioned over a hundred numbers on the front page? After discovering that we have lots of real estate on the screen, I addressed another popular manager request. From time to time, they need to access all those stats by the branch. Banks can have many branches, though. There’s no way to find unique meaningful icons for all of them and group them reasonably, too.
In that case, a good old table certainly worked better. When I design a data-heavy table, I always make sure to align numbers to the right and use tabular symbols for them. That allows for better comparison and ease of scanning through the data.
Professional apps can’t always look minimalistic and slick. But they should be designed according to the needs of the humans using them daily for their jobs.
How do you approach new design challenges? What was the most complex UI you worked on? I’d be happy to discuss this or talk design in general. Feel free to drop me an email. I appreciate any feedback.
<- Back to index