Qualtrics Dashboards

A comprehensive overhaul of Qualtrics' principle reporting tool.


Qualtrics, 2018

 
 

Background & Role

As the centerpiece to Qualtrics’ product experience, dashboards are the primary component for showcasing data collected from market research, customer satisfaction, employee evaluations, and everything in between.

Toward the latter half of 2017, the discrepancy between the customer expectation and the dashboard product offering became increasingly poignant. Sales teams reported a growing number of losses attributed directly to the “look and feel” of our dashboards, while the research team uncovered user sentiments of confusion and repulsion.

I led the end-to-end redesign effort which involved cross-functional research, team brainstorming, design sprints, and hand off documentation. I sat down with multiple engineering teams during the implementation phase to work through resource constraints and ensure quality of the build.

 
 
 

Problem

Meet Dale. 

Dale works in the HR department at Awesome Corp. This year, he is using Qualtrics to put together an employee engagement survey. After collecting the survey data, Dale sets up the dashboard by laying out widgets onto several pages. It’s a time-consuming experience, and he’s pretty frustrated that despite his best efforts – the style and design of every element is crippling his ability to make a professional and attractive looking dashboard. Dale swallows his pride and hits the publish button.

Meet Emma. 

She also works at Awesome Corp as a manager on the engineering team. Emma receives an email that her team’s employee engagement results are ready to view, so she clicks on the link and is taken to her dashboard. She’s immediately overwhelmed by all the data and statistical jargon, and she has no idea where to start. She stumbles her way through the dashboard and takes several guesses at things she should note down and communicate back to her team.

 
 A peek at the old employee engagement dashboard. Dave and Emma, you deserve better.

A peek at the old employee engagement dashboard. Dave and Emma, you deserve better.

 
 

While the story is made up, the problems are very real. During interview sessions, my researcher uncovered stories that closely resembled Dale’s and Emma’s. While the data behind each dashboard was valuable, it was walled behind such a convoluted delivery that became a major headache for our users and our sales team.

How did this all come to be? Prior to this project, “scrappiness” was the name of the game and the majority of dashboard was hacked together without really any design support. The result can be summarized into the following issues:

 
 

Cluttered

The excessive amount of unnecessary elements increased cognitive load and discouraged users from diving into the data. Haphazard layouts and the lack of visual hierarchy made the entire experience feel disorganized.
 

Careless

Overall, there was a clumsy approach in spacing, alignment, type styling, color usage, and iconography. Accessibility was also concerning – tiny type sizes and insufficient color contrast were peppered throughout.
 

Complicated

Pages were filled with an exhausting amount of technical jargon, confusing error states, inconsistent labeling. Several half-baked widgets were so primitive that they ended up hurting the main story.

 
 
 

Process

Research

Since our assigned focus was on employee experience dashboards (opposed to customer experience) my researcher and I kicked off the research phase by interviewing internal managers about their experience dogfooding our dashboard product.

Shortly after, I reached out to every team that has helped build, implement, and sell our dashboards. I wanted to (1) provide company-wide visibility into our effort, (2) provide an opportunity for cross-team collaboration, and (3) gather unique insights from different perspectives. The teams included: UX, Sales, Marketing, Project Management, Engineering, Client Success, and Subject Matter Experts.

 
 
 

North Star Explorations

Armed with a better understanding of the problems we wanted to tackle, I started to explore several directions for what the future dashboard experience could look like. These studies helped to visually define a unified goal and generate stakeholder excitement.

 
 
 

Visualization Study

Visualizations are the bread and butter on which dashboards are built out of, so I did an audit of the charts, diagrams, plots, and tables that were supported in the product. Looking holistically across the family of visualizations, my goal was to create a cohesive design language – improving consistency across styles, eliminating distracting clutter, promoting accessibility, and building a strong visual hierarchy.

 
 Gauge chart explorations

Gauge chart explorations

 
 

The work included 20 visualizations including: bar charts (vertical and horizontal, single and multi-bar), distribution bars, pie and donut charts, line and area graphs, scatter and bubble plots, heat maps, tables, text responses, and number charts. 

 
 
 

Iconography

Iconography can be a strategic tool for communicating meaning at the atomic level. However, poorly designed icons will do more harm than good and can ultimately distract and damage the perception of an entire product.

The existing set of icons were plagued with several major issues: (1) off grid coordinates = blurry lines, (2) imperceptible details, and (3) wildly inconsistent styling in terms of proportions, stroke widths, corner radii. 

Quoting Scott Belsky, the founder of Behance, once said – “Design is very much the little things that make a big difference”. I truly believed that we could not relaunch dashboards without redesigning the icons, so I took it upon myself to hand craft over 80 pixel-perfect icons.

 
NewIcons.jpg
IconsProcess1.jpg
 
 

Employee Experience Widgets

After laying the groundwork for a style guide (type scale, color palette, visualization library, and icon set), we were able to step forward in a unified approach into the next design phase. I focused my efforts on the set of Employee Experience (EX) widgets, while my design partner focused on the dashboard framework (page navigation and filters).

EX dashboards share from the base widget library as the rest of the platform, but they also include several specially designed widgets to augment the employee engagement use case. Many of these widgets, however, were the greatest offenders of being half baked and filled with technical jargon.

 
 The old Key Driver widget: the whole point is to highlight the impact of each question, but it’s meaning is impeded by whatever “r” means.

The old Key Driver widget: the whole point is to highlight the impact of each question, but it’s meaning is impeded by whatever “r” means.

 
 

I worked with my PM and researcher to distill the problems and goals behind each widget, iterating on the design and validating our solutions with customers. We were intent on improving the understandability, value, and aesthetics while stripping away distractions and redundancy. We ended up designing 10 fully responsive widgets (they were fixed full width before), and  I was personally happy that our heatmaps now had more than 2 colors.

 
 The new, responsive key driver widget.

The new, responsive key driver widget.

 
 

Design Documentation & Implementation

I used InVision to house the style guide and widget specifications, and my engineers were able to rely on Invision’s Inspect mode to view pixel perfect design details. We had weekly meetings to go over progress, but much of the momentum happened during ad hoc meetings where I would sit down with them to iron things out directly.

 
 
 

Solution & Impact

We focused on getting a prioritized set of widgets out in time for our annual conference in March 2018 to give our customers a preview of the investments we were making on improving their dashboard experience. Both executives and customers raved about how good the main stage demos looked with the new design system. 

I worked with our product and engineering teams the following two quarters to deliver the end-to-end dashboard overhaul for our EX and CX customers, featuring:

  • Clean and cohesive library of visualizations

  • Easy to understand, fully responsive widgets

  • Thoughtfully crafted style guide for type, colors, and iconography

  • Revamped framework for page navigation and filters

_

A few quotes:

Ryan Smith (CEO) just saw our demo for the first time. He said he loves the way everything looks. He said, 'I wish all our stuff looked this good.' 

I just had a call with a large prospect and not only was I able to address all of their concerns but we hear phrases like “You just made us cry - in a good way” (exact words from prospect when we showed the heatmap functionality). The sales team looks good all the time because we’re on the forefront but you all are the real heroes.

FYI, we reviewed with the new dashboard design with a larger product team at Press Ganey. The feedback was positive with the bigger group. One person on the product team said "you should be proud" referring to the new design work.

Exciting. Just showed Alaska the new dashboards this morning, and they cannot wait to get their hands on it.

 
Q_Dashboard_Mockup_1.jpg
Q_DashboardHeatmap_Mockup.jpg
Q_Dashboard_Mobile_Mockup.jpg