I was tasked with the redesign of the Experience Insights dashboard, our core product. Through usage data (Pendo), customer interviews (contextual inquiries), competitive analysis and heuristic evaluation, I was able to put together a list of improvements.
New Platform = New Global Header Design for Experience Insights and all other Conviva apps.
Designed a scalable filters panel below the header. Current design only supported up to 5 filters max.
We have many users who put this dashboard up in NOCs with large TV monitors. They loved the DARK MODE option!
Design for Configurability: One of the configurable layout components allowing users to show large primary chart on top.
Design for Configurability: Secondary component which is a gallery of thumbnail visualization displays. Can scroll horizontally or be set to highlight each thumbnail in the larger chart above.
Design for Configurability: Compact design + impactful stats allowing users to show Error logs, notifications or trending data in the pinned-to-footer scrolling bar.
My Role
Similar to previous projects at Conviva, I took on a UX lead and researcher role in this project:
Spoke to existing customers and collected a list of feedback on how they currently leverage the dashboard, what challenges they face, etc.
Based on my findings, I prioritized the primary workflows and customizable components work
I conducted remote interviews as well as onsite studies to get user feedback after each iteration
I designed the primary user flows, lo-fidelity mockups, visuals and hi-fidelity protoypes for the SI dashboard
The components that were derived from this dashboard project allowed for flexibility on views/content. They were also added to our components library for leveraging across other product dashboards.
Created and presented project progress decks to management (CPO, CTO and CEO)
The Process
Research: Onsite Studies
Visiting the NOCs - I wanted to get a clear picture of the environment our users deal with so the Sales team agreed to arrange a few visits to the customer NOC (Operations Centers). We chose a few hardcore users such as the NFL who use our product suite intensely to closely monitor performance issues across their multiple apps and social media (video content). Additionally for the Superbowl, they actively used it for monitoring real-time streaming performance issues.
Findings - As I presented some initial concepts, we received positive feedback overall. Dark mode was something they really liked since most of their other monitoring tools had the Dark mode option. However, that wasn't at the top of the list. One of their biggest issues with our current dashboard was the lack of scalability.
"We have to open 5-6 instances (different tabs) of this Real Time dashboard to monitor activity for 26 NFL teams. There's currently a cap on showing only 5 applied filters. It would be great to see all of it in one instance of the app. The challenge in having 5-6 instances up is that they time out occasionally and we have to log out and log back into the app, essentially start from scratch."
Research: Brainstorming Ideas for a Scalable Dashboard
We had a range of customers whose use cases never went over 5 applied filters and then there were large orgs such as NBC and the NFL (26 NFL teams with each team having multiple social media accounts, websites and apps). We needed to come up with a simple model that could be scalable to address both ends of the user base spectrum. What's more simpler than starting with a table view to address many rows and columns of related data (metrics)?
Design Tradeoffs
Keep Applied Filters on Top Horizontal? - One of the challenges that came up was when we decided to move the filters vertically in the redesign. With the original, there was a max of 5 applied filters and placing 5 filters horizontally is easier than having to place 20+.
Simple vs. Advanced User Groups - In the A/B testing we actually had a split in opinions as some customers didn't want more than 5 and preferred the current dashboard format. I provided a solution to fit both sets of users which you can see further down the page.
Trend lines? - I wanted to see if it was possible to have trend lines for each metric/line item. Engineering pushed back saying page load will be greater than 5 minutes for customers with 10+ applied filters/lines. So we ditched that idea for simple status traffic lights.
Defining the Status - There were several patterns of statuses that were brought to our attention during the research phase. Most customers use the standard "Green is good" and "Red is bad" color guide to define statuses. However, some customers tracked multiple statuses using custom rules. For this reason, we decided to make the status component which would be red/green OOB and allow customers to configure it with rules and also show/hide the Status Key.
Design for the Simple User (< 5 Applied Filters)
As I mentioned that during our initial round of A/B testing we quickly hit a crossroad with a divergent set of users. Simple users who used less than 5 filters were basically fine with their current setup whereas we also needed a scalable design for the Advanced users.
Therefore, I created a flexible design which would display up to 5 filters similar to the existing dashboard format. Yet this version had vast improvements around other aspects, such as showing trend graphs, configurability of metrics and layout options. Additionally it would allow for a NOC View in Dark Mode.
I also revised how users do filtering. A user could type in the global search bar on top or click on the "All Traffic" default filter to launch the filter modal. The filter modal was redesigned from the existing format.
Design for Advanced User (5+ Applied Filters)
Using the "simple" design as a base, when the users set up more than 5+ applied filters, I designed a toggled view (List View). Users didn't need to set up their filters all the time since the view could be saved and accessed later.
The key changes in the Advanced User Design were:
Filters were placed vertically so scalable to accommodate 5+ filters.
Each filter was shown with a line item with configurable metrics column.
Instead of trends graphs, we showed simple cells with filter rows and metric columns along with status view.
To see details/trends info, user could click on a cell and immediately start the diagnosis workflow.
Adding a filter was different in this view; click on the "+" in the column header.
NOC View also available in Dark Mode with the Alert Panel
Capability to set your own status using "Settings" > Apply Status Rules
Introducing Dark Mode (NOC Displays)
And finally I designed the "dark mode" version of the pages for the Real-Time Dashboard. Our prime selling point of this app was of course the features and functionality but the Dark Mode style captured the audience attention. Users boasted about how usable dark mode would be for their large scale tv monitors in their NOCs, giving them ability to easily scan for issues. Additionally, since they had the option to enable/disable it, they could use the same app in normal (light) mode on their desktops to diagnose issues without eye strain.
Color & Components
Once we had finalized the layouts and visuals, I started exporting out the components for the UI team.
