Designing a customizable dashboard
Background
GEARS was a SaaS application for monitoring devices on corporate networks.
Administrators would define security policies for networked devices, and the application would report back any issues. We had recently added new metrics for triaging devices and needed to update the dashboard to reflect this change. This gave us the opportunity to make the dashboard more useful to customers with atypical network topologies.
Goal
Provide administrators with configuration options for personalizing their account dashboard.
My Role
Designed the interaction pattern and user interface for dashboard customization.
Process
- Mapped application data to meaningful visual representations
- Designed a modal window for configuring the visualizations
- Incorporated the configuration feature into the dashboard
Problem
How could I align user goals with the database schema to create something useful?
The application recorded device information across three dimensions:
- Device type
- Device location
- Security policies
The metrics applied to these dimensions were:
- Number of issues
- Issue Severity
I created tree diagrams to map how application data could be represented visually. I then used the tree diagrams as a rubric for the controls in the modal editor.
Frequency of Use
An important design consideration was how frequently administrators would configure the charts on their dashboard.
The primary use of the dashboard was to, all at once, give a bird’s eye view of the network while giving the administrator a way to effortlessly drill down into problematic devices.
I wanted to make sure that these actions remained prominent, while giving enough visual affordance to the chart configuration features.
Modal Editing
Configuration options were hidden behind an Edit Dashboard button; modality was created to safeguard against users accidentally moving the chart widgets when trying to click on chart elements. The colors would dim to cue the user of the state change.
Customizing the Layout
Chart widgets were designed to reflow based on a grid system, spanning either two, three, or four columns.
Outcome
My final design broke the dashboard into three modes:
Daily Use—using the dashboard as a springboard into devices that needed further investigation
Arrangement—moving the widgets around and resizing them.
Configuration—Editing chart widgets inputs through a modal window
The result was a highly configurable dashboard with an interface that was clean and goal-oriented.
Once all stakeholders had signed off on the user interaction, I cleaned up the visual style. In order to reduce visual clutter, I switched out the chart borders for a light gray background, and distinguished the left navigation by making it all one color.
