VisionLink: Multi-Dashboard
This is a problem we solved while I was a lead with VSS. Here you will see the original dashboard, the updated design in the old design system, and then the revamped version!
The old dashboard
In all of our apps within the suite, we had one original dashboard. This was just a sole dashboard that had widgets you could arrange to your liking and click to dive deeper into the data.
The problem:
It was bad. We started getting a lot of sad-face hotjar comments regarding our dashboard. This drove me to start discovery and research on the issues and how to fix them. We met with approximately 15 users of different personas (service tech, foreman, fleet manager, etc) over the course of a week and uncovered that not only was the functionality lacking, but it wasn’t diverse enough. Most of these personas wanted to compare information here. “How is this geofence compared to another geofence” type info. Our current dashboard did not allow for comparison, gave you all of the widgets at once with no selection process, was hard to navigate on all devices due to a 3rd party plugin we were using, and wasn’t providing enough insight for the user to make any knowledgeable decisions.
The “new” dashboard
The solution:
We utilized our existing design system to create a user based “multi-dashboard” where you could have more than one dashboard (up to 10 for performance sake), that would be able to add whichever widgets you wanted. This provided flexibility and customization for the user, regardless of their persona. Perhaps you’re a fleet manager and need to keep track of the different job sites you’re leading and want to compare utilization data for cost analysis across all of them - great, we got you covered. Maybe you’re the foreman and you need to separate these dashboards out into working groups so you can compare efficiency between teams - hooray, you win too! Maybe you’re the surveyor and you need to compare the quality of the asphalt paving from one design to the next within the same job site - this is perfect for you. If you’re a smaller company and an old school VL user who doesn’t like change, great! - this made no difference for you as you could continue to just use the 1 dashboard.
By introducing tabs at the top, the user is easily able to tab through their dashboards and compare data for whatever scenario they were in. We also discovered that maintaining filters between sessions was extremely important so that a user could “set it and forget it” for the duration of their job.
List of features we uncovered and designed for:
1. Add/edit/remove new dashboard
2. Add/remove widgets to that dashboard
3. Filter and retain dashboards
The redesign
We had started implementing a new design system (that I also managed) and decided to even take this a step further while we were at it. We interviewed those same 15 people who had been utilizing the new design and got their feedback.
Things we uncovered:
1. The 3rd party app we were using was extremely difficult to use. It forced the user into an “edit mode” which introduced a ton of clicks, was super glitchy, and no one used it because of it, so they were actually missing the enhancements of reordering and customizing the widgets on your dashboard.
2. Our old design was really jarring and hard to focus on due to so many colors, bold shapes, and bootstrap-like features. We also had “action bars” in a lot of places that hid information from the user and it was hard for them to discover the ease of these new features.
3. The widgets were hard to see on tablets and our usage was decreasing for that device.
4. There wasn’t quite enough comparison still. These users wanted to have filter-able widgets - several of the same one on the same dashboard. So say you set up one dashboard for Job Site A. Within this job site, you may want to compare your work remaining totals across the different geofences in it to see where you are in your scheduling. Are you ahead? Are you behind? Should you move a team from Geofence C to Geofence D because they are way ahead?
The solution:
1. Work with the dev team to do the functionality in-house. This introduced the ability to reorder your widgets without having to enter into an edit mode, simply by hovering and dragging.
2. Use this feedback to design the basic nav of the new design system. Muted colors and simple shapes helped the user to focus on the data in the widgets without distraction. We brought out certain elements like the reorder functionality, and we added an “Add FAB” so that it was always upfront and visible for the user. We also added the ability to select the size of the widget (SM or L) so that the user could determine what is most important and utilize the larger size to focus on their tasks.
3. New design for a tablet that wasn’t just a condensed version of desktop.
4. Add the ability to place several widgets within the same dashboard and filter them individually.
I sincerely wish I could have seen the outcome of this design in metric form, but the redesign was never launched due to the separation of the parents in the Joint Venture. Shortly after this, I was hired on by CAT and started on a new project.