Tag: business intelligence

Dashboard design

As a part of the HTML5 redesign of MicroStrategy’s self service analytics product, I was responsible for UX design for all visualizations including line, bar, area, bubble graphs, heat maps and network graphs. This write-up captures the UX design process of adding dashboard formatting and customization capabilities to the product.

Biggest challenges

  • 100+ properties in the legacy software: We analyzed, filtered, sorted and presented an ideal subset of these.
  • Keep existing power-users happy with flexibility, but make the core experience simple and clutter-free for new users.

Approach

  • Understand the what and why of dashboard customization through user interviews, card sorting exercises, studying existing customer dashboards, best practice for dashboard creation, frequently used properties, background of the legacy software
  • Based on this understanding as well as the product vision, ideate and create wireframes: iterative design process
  • Create simple working prototypes for user-testing smaller hypothesis, and end-to-end user studies at main checkpoints in the development process
  • Collaborate closely with visual designers and developers at every step to ensure fit-and-finish

What I did: User research | Card-sorting | Wireframing | Prototyping | User-testing

 

Background and vision

One of the biggest changes between the earlier version and the new proposed version as to enable flexible and powerful dashboard creation capabilities: being able to format the colors and styles on the dashboard, and add custom selectors and images and text. These capabilities are required for many different reasons – company specific branding, personal aesthetic preferences, more effective visual storytelling through customized colors and styles. While the full feature product MicroStrategy has does offer all of these, it is a product aimed at the BI and IT departments, not self-service analytics.
During this project, I worked closely with a UX designer and a UX lead, program managers, and quality engineers as well as developers across 2 different countries.
The project kicked off with multiple stakeholder interviews – we talked with members of product management and marketing teams to understand the big picture vision.

User Research

Exhaustive list of formatting options
Exhaustive list of formatting options
Dashbaord-design-users
Users and their roles (blurred out)
One of the big advantages while doing UX research at MicroStrategy is that many of our users are internal – our consultants, of course, but also teams such as finance and sales use the microstrategy BI suite. Preliminary user research included semi-structured interviews with internal users and an analysis of dashboards they had created with microstrategy’s earlier (feature-rich but hard to use) BI tool. To get some background about non-internal users, we analyzed our enhancement request system to see what features were most requested.
This phase also included competitive analysis where we partnered with our product teams to understand what kind of features are typically provided. In addition, we studied good dashboard design practices – one of the goals of our project was to make it easy for users to design good and useful dashboards with ease, by providing great defaults. We ended up with a large list of exhaustive properties that users currently used, our earlier product offered, or were requested by users. We also came away with a fair understanding of what kind of users typically need what kind of formatting and customization capabilities – which we kept refining over the iterative design phase.

Iterative Design Phase

With a good understanding of the typical workflows currently used by our users, we dove into our design phase.
The first step was trying to classify the exhaustive list of properties based on user research. There were more than a 100 different properties across different visualization!

Dashboard-design-properties-classification
Card sorting of the properties
Dashbaord-design-categories 1
Properties sorting based on object

 

Through multiple brainstorming and mapping sessions, we classified the list along the following lines:
(1) Properties that help analyze (all self service users) versus those that help beautify (dashboard design users)
(2) Properties classified by the type of object they belonged to
(3) Properties that are used very commonly by all most users versus those that are relatively uncommon
We conducted feedback sessions with internal users to update these categories and cut down the list. We also conducted formative usability tests to see if our internal users understood the categorization.

 

The second step was putting it all together into coherent workflows. We studied how a variety of products across different domains let user format – Microsoft word on one hand, keynote like applications on the other, our competitors as well as dedicated graphics programs like Adobe photoshop and illustrator.

Initial Wireframes – Different Ideas

This slideshow requires JavaScript.

 

I worked closely with the other UX designer on the team and we quickly sketched out multiple different ideas and workflows. These included
1. A dedicated mode for formatting where the users wouldn’t really interact with the dashboard in other ways (such as sorting or filtering) and would instead focus on just “beautifying”. This was based on our user research which indicated that users thought about analytics and dashboard design as 2 separate steps of the process. As such, we proposed an idea to completely separate these two. with over 50 properties available to customize each visualization, it also made sense that we tuck them away in a specific mode and only show them if the user really wanted to change something about the looks – colors, opacity, styles etc.
2. Formatting panel versus a popup – we proposed a panel to be used which could be collapsed in order to keep the experience lightweight.
3. Commonly used properties always available in context menus. This was based on user interviews and research pointing towards common properties used most often – changing the color of a particular shape, showing data labels, hiding the legend, etc.
4. Context sensitive toolbar – as against the initial formatting mode idea, this concept was about having a context sensitive toolbar that changed based on what kind of object you were working with (lines, text, shapes, etc.) This was discarded fairly quickly because formatting, although important, is not a part of the core functionality of any analytics tool.
5. Toolbar for quick formatting within the context menu: We proposed to use context sensitive toolbars that would appear if the user right clicked on an object and selected an option to format it.
6. Preset styles and colors that could be quickly applied

The develop – test – design cycles

Development sprint 1: After hashing through our ideas with PMs and getting some preliminary feedback from internal users, we chose the workflow with a formatting mode and provide commonly used properties at all times via RMC. Design-wise, we chose to go with a panel of properties, classified according to what part of a visualization they helped format. There were other details such as highlighting and reverse-highlighting between the panel and the object being formatted, context sensitive toolbars in formatting mode, and global quick formatting for all visualizations on a dashboard.

Through the development – test phase, we learnt that no amount of preliminary user interviews can replace the value of getting even a semi-working prototype in front of users to get their feedback.

The biggest feedback we got was that even though users in theory like the idea of a separate mode, while actually using it, they found it too heavy and a little confusing. We created some quick interactive prototypes in keynote based on a lot of this feedback and conducted multiple rounds of mini-usability tests.

Development sprint 2: Based on user feedback from the usability tests, we completely got rid of a separate formatting mode, instead focusing on lightweight formatting capabilities on demand. The user could right click and select format on any of the different parts of the graph to be shown the toolbar instantly. They could also see the exhaustive list of properties in the panel for that object. Clicking anywhere would quickly dismiss the toolbar, keeping the experience lightweight. We also added selection and hover highlights at all times to give adequate feedback to the users as to what exactly they were formatting.

The example below shows our final workflow for axis labels. It showcases some of the complex problems we were dealing with – formatting is only a secondary action, the primary action is analytics – changing the axis scale, origin, sorting, etc. The highlights and workflow try to make this distinction as clear as possible.

Dashboard-design-new-workflow
New workflow after user feedback and usability tests

 

The devil is in the details

Although that captured most of the big-picture design process, there were multiple smaller details that we had to iron out along the way.
1. Getting the highlights right: We highlight the object is being formatted to give feedback to the users. These highlights needed to be clear, able to show the effect of making changes, be visually coherent as well as make conceptual sense.

I worked with the visual designer on our team to get the highlight effects right based on our workflows, and worked with developers to ensure they were not too high-cost to implement

Overview of the effects
Overview of the effects

2. Mini complex workflows: There were a lot of minor workflows that needed to be tweaked, optimized for common use-cases and in general be simple for the user to understand (even though complex to implement).

One such example which didn’t really end up using was about selecting data elements by single clicking, double clicking or lassoing. Single click was considered as a high-level selection (all elements of a particular color) and double click was considered low-level selection (an actual single data point).Shape formatting new_Page_1

The formatting capabilities received a lot of good feedback during the beta testing phase of product launch, and we are continuing to iterate on the workflows going forward.

MicroCharts Widget – Design for the iPhone

The microcharts widget is one of the most popular, data-dense widgets that MicroStrategy offers.
Some of its salient features include a sparklines and sparkbars, bullet graphs, and an outline tree mode.

My job was to design this widget to work well on the iPhone – and come up with a design to keep it data-dense yet clutter free!

 

The existing web widget looks like this:
Microcharts-general-web

The redesign process started with a study of existing widgets MicroStrategy offered for mobile devices, the competitive landscape, and cross-team discussions with consultants, tech support engineers and product management to understand the mobile use cases.
We concluded that:

  • Customers will typically use this as power-version of a regular table, and as such, would expect an interaction rich widget. All of the main functionality needed to be in there, we couldn’t remove too many features that existed in the web or iPad versions.
  • Even though there were design as well as functional challenges with supporting an “outline” mode, we would need to figure out ways to resolve these as it was a very frequently used feature and make a smaller display that much more useful.

Design Challenge 1

Support multiple columns in a user-friendly way

Users on an average have between 2-7 columns that display metrics in different formats: simple numbers, sparklines, or bullet graphs. There are different established interactions patterns to deal with such cases – showing just one column at a time that can be toggled, swiping through multiple columns, fixing the leftmost (attribute) columns and horizontally scrolling the overflow.

We chose the 3rd option and added some design tweaks to make the customer’s job easier:

  1. The column sizes can vary, in order to support graphs and number gracefully. This enables them to see multiple metrics on the screen at the same time and compare them, as long as they fit.
  2. Customers can quickly pick a density setting – normal, high or low, and we calculate the column sizes for them.
  3. Customers can perform a “slow drag” to move the columns gradually or a “quick swipe” to move the next column to the leftmost position within the non-fixed panel.

Design Challenge 2

Support a tree-hierarchy with easy and intuitive opening and closing of the outline structure.

The web version of microcharts uses indentation for the outline mode. For the mobile version, we did not want to use indentation due to space constraints as well as general ux. We went with a visual separation showing the hierarchy with subtle drop shadows.

We also supported gestures for quick opening and closing of an entire level – pinch open and close.

Linlin-light-theme-changesmicrochart-mobile-smooth-scroll