A Comprehensive Guide to Redesign Your Business Dashboard in Simple Steps : Case study
3 months ago our team decided to redesign our enterprise dashboard — Fast forward 4 weeks and after series of user observations and feedbacks from business heads we finally had some clear idea about the users workflow. Which meant my next step was to start gathering improvisations in the interface and validate it with all the stake holders i.e. the Devs, Research analysts , Business heads and Project managers. Post that I started building wireframes over those improvisations.
Today Im going to share with you how those UI & UX improvements made the life of users lot easier so that you can borrow some of them and also help me with some feedback!
Disclaimer : For obvious reasons all the data shown in the interfaces below is dummy 🤥
Lets get rolling!
A Quick Before and After :
Navigation
A non intrusive navigation that is always there for the user without compromising the workspace and also lays down the product sections in to clear logical groups got to be designers first priority. Our team plans to add more dashboards to the product which clearly means top nav would run out of space sooner or later. Instead of waiting for that to happen and then making a major structural change to the our products design…
We implemented collapsable left navigation structure for the dashboard.
Building reports faster
Our dashboard is primarily used by Research analysts to build reports. RAs make average 10–15 reports on daily basis. Their report building process goes like this —
1. Choosing a Date range
2. Selecting multiple Metrics
3. Choosing how they would like to group those Metrics (By days, weeks etc)
4. Apply filters to zoom through the relevant data
5. Generating report (followed by 10–15 secs waiting for the report to load)
As you can clearly see users need to navigate through multiple form fields to create a report.
Introducing shortcuts :
“Tab” for navigating though fields. “Arrow keys” to select values under dropdown “Enter” key for selection. This made building reports lot faster by just using keyboards.
Saved reports :
While observing our users we noticed they create similar reports repeatedly throughout the day. Solution was simple — Create a set of saved reports templates quickly accessible for users.
Optimising space :
Number of Metrics,Filters and Groups highly vary throughout different reports. Dedicating fixed space to each field meant compromising space. Therefore we turned our query design into a fluid flow (like a paragraph text)
Overview Statistics
Overview stats help users get an macro view of the data to understand problem areas in the big picture. In our case overview stats informs user about total user installs and uninstalls with PNL summary for that specific time range which you can see below :
We clearly felt there are relationships between these numbers which were not being highlighted in the old UI.
Pie charts helped highlighting relationships between numbers like Installs and Uninstalls, Recovery etc. Related metrics are also grouped visually with separators.
Action buttons
Buttons simply help perform actions on your interface. Gestalt principle of proximity goes a long way for users to find relativity between actions based upon their style, placement & spacing.
Actions above can be divided into three categories :
1. Actions before generating a report (Generate, Cancel)
2. Actions after report is generated (Save, Download, Share)
3. Actions that control how user would like to view the report (Table, Graph)
A consistent family of buttons and their logical placement throughout interface makes easier for user to get their job done
Micro-interactions : Loaders
Any interaction taking more than 3 seconds on your screen needs feedback. Depending upon whats is happening in your UI and the time its taking you can use a variety of solutions.
Progress bars :
Looping Gifs cant be everywhere! (specially when your request takes long time to process) Our users faced the similar issue, Progress bar helped users get a fair idea about the load time
Loading animations :
An interesting loader animation helped us manage wait times for the user. It gave us an opportunity to surprise and delight while still maintaining simplicity
Skeleton screens :
A skeleton screen gives a visual cue to the user. It has been found that skeleton screens play a major role in the perception of users who appear to think that these are not as slow as spinners or progress bars.
Improving Tables
Horizontal scroll :
Scrolls helped navigate though tables that had more column than that could fit on the screen
Fixed header :
Floating headers on table make a lot easier to figure out the columns that user is viewing when scrolling down
Row hover :
Too many columns make hard for user to keep track on the rows, Rows that highlight on hover makes horizontal viewing at ease
Date picker
Date range setup in one go :
Its was clear that user had to navigate through 5 different fields to set up their date range. Our solution was to help user set up the date range all in one place.
Time range slider :
Selecting time of the day was also a problem typing text for time range was also a problem. We decided to introduce a time slider which can simply be dragged around by the user to select the right time range
Zero state screens :
Tips :
We utilised zero state screen for using shortcut tips that can enhance users efficiency and start building reports swiftly
Error screen :
An Error screen that guides user to possible next action improves user experience. In our case we used action button “Try again” to re-run the command.
Graphs :
Finally coming to the heart of the dashboard-graphs. A good visualisation of the data can give powerful insights to the users. On the other hand they can equally obscure the users vision if not presented properly. Below examples will cover some things we did for our graphs :
Horizontal bar charts :
Vertical bar charts are best for time series they do not go well with longer labels we introduced horizontal bar charts that provide enough room for labels
Limiting Pie charts to maximum 6 values :
Adding more than 5 values to a pie chart prevent the user from comparing the values visually rather use stack chart incase you have many values
Added stacked charts :
In order to see breakup of values over a time series we added Stacked charts to the interface
Thats pretty much it guys!
I should add that this process really uncovered a lot of design insights which I would have never known if I made these improvisations based on my perception about the users. I suggest borrowing ideas from the case study above keeping your users in mind.
Through this course I came across some awesome articles which you can use for your further studies :
Thank you for reading 👏👏👏
