Custom Dashboard Builder

Custom Dashboard Builder

 
 

CHALLENGE

Nextiva’s customers need customized dashboards that would answer their business questions. However, steps such as downloading raw data, uploading them to spreadsheet tools and creating analysis etc. took away their time to focus on more valuable work such as thinking up strategies to improve their business. I was tasked to design a Dashboard Builder tool to solve their problems.

 

DURATION

MVP : Feb - May 18 (3 months)

MY ROLE

I was the sole designer on the team. I worked with a Product Manager (PM), Sales Partners and our internal users to research, explore and iterate. I also worked closely with my PM to decide on timeline and milestone.

SKILLS

  • UX

  • Research

  • Product Strategy

  • Information Architecture

  • Visual Design

 

RESULT

The total number of steps users needed to take to build a custom dashboard had decreased from 7 to 3, time spent had reduced from an average of 74 min to 37 min (nearly 50% decrease).

 

Number of steps for customizing a dashboard had reduced from 7 to 3.

 
 

ABOUT NEXTIVA

Nextiva-Logo_sm.png

Nextiva Inc. is a business communications software company that offers solutions such as business phone service, CRM, analytics, chat, and surveys to simplify business communications. Founded in 2008, they serve more than 150,000 businesses in the United States. 

 

 

DESIGN PROCESS

1. Who are the Users?

Without a formal research process, I made use of a survey I previously created for a query builder project and interviewed our sales & support team to find out more about our customers. There are 3 key findings:

  1. Users work in a small businesses of 1-50 employees. Besides being an analyst, they also juggles other roles such as a CEO or an IT person. "Building dashboards" is not a core task for them, they'd rather spend more time on identifying problems and solving them.

  2. Their knowledge on data analysis is intermediate. Their familiar data tools are Google Spreadsheet, Excel or Tableau. Almost none of them use programming languages to manage and understand data.

  3. They want to have dashboards that can also include external data sources (e.g. weather or social media data) and non-statistical elements (e.g. real-time support queue or social media feed).

 

2. Defining Key Goals

Based on the characteristics of our users, I identified 3 main goals the product should achieve in order to be successful:

 

TIME SAVER

It needs to be able to free up users time for other valuable tasks

MINIMAL LEARNING

It should feel familiar with applications that they are already using.

FLEXIBLE

In order to accommodate various types of components, the tool must be designed to be adaptable for expansion.

 

3. Competitive Analysis

I performed a competitive analysis over potential competitors as well as tools that our target users love. The goal of this analysis is to learn how well are other competitors solving our users' problems. These are the 5 things I focused on in the Analysis:

  1. Efficiency - How much time does it take to build and maintain a dashboard?

  2. Learnability - Does the product allow users to quickly become familiar with them and able to make good use of all their features and capabilities?

  3. Data Sources - The number of data sources a product can connect to directly.

  4. Affordability - Can our clients (mostly Small Medium Business owners) afford the cost of the product?

  5. Coverage - How many business use cases can they cover?

What I learned was that most tools that are doing better at solving users' problems have a steeper learning curve in creating components and are generally less affordable (except Google Data Studio which offers their beta product for free). This had confirmed my belief that we must make the tool as easy to use as possible.

 

4. Interaction Model

While performing the Competitive Analysis, I also learned that our competitors mainly use 2 popular Interaction Models (Single Worksheet Model vs. Atomic Model). I wanted to leverage one of these familiar patterns in my design. So I went on to learn about the pros and cons for each of them and discussed with our developers to understand their feasibility.

PROS:

  • Less storage on our server.

  • Users may be more familiar as it resembles the model of the tools they currently use.

CONS:

  • Elements cannot be recycled.

  • Users have to repeat steps each time they create a dashboard.

 

PROS:

  • Elements can be shared, users can learn from each other.

  • It can support components developed by other tools without having to disrupt the existing dashboard building flow itself.

  • Users can save a lot of time.

CONS:

  • Puts pressure on our server.

We picked the Atomic Model because its benefits are more in line with our key goals (mentioned above)!

 

5. Prioritization

Then, I listed out all the features that will help our users to solve their problems and discussed them with PM & engineers for prioritization. The main questions we asked were:

 
  1. How many users need this feature?

  2. How often do users need this feature?

  3. Can users solve their problems without this feature?

  4. How much engineering effort needed?

 Features Prioritization List

Features Prioritization List

We concluded that the MVP should allow users to create a dashboard with charts and KPI tiles of Nextiva products as well as to create KPI boards for TV display. In the future, we would also add other components such as non-statistical data (Agents availability, Real-time queues etc.) and external data (social media feeds, AWS databases)

 

6. User Flow

With our key goals in mind, I designed a template flow that would adapt to multiple component types.

 
 Template flow for Dashboard Builder

Template flow for Dashboard Builder

 
 

7. UI Shorthands / Navigation Flow

I then proceeded to flesh out the details of each screen using UI flow shorthand. The shorthand helps me look at the paths of solving users' problems in a bird-eye view.

 

8. Wireframes

With the UI flows ready, I started wireframing to communicate my design ideas.

 

MAKE IT VISUAL

My vision for the Dashboard Builder was to make it graphic centric because it would be more intuitive for users. But I was told that Analytics team did not have the bandwidth to make this happen for the MVP and must replace them with text. To compensate for the less-graphical design, I decided that the text must be as descriptive as possible for users to be able to choose the best option for themselves.

 

MAKE IT CONVENIENT

I would also like to allow users to add a filter component so that dashboard viewers who only want a subset of data in the dashboard would not need to create another dashboard. But the idea was once again being pushed back due to the lack of engineering capacity. Finally I managed to negotiate for a global filter which has more restricted filtering functions.

 Dashboard Gallery with thumbnails of dashboards.

Dashboard Gallery with thumbnails of dashboards.

 Modal with Chart Gallery where users can preview the visualizations.

Modal with Chart Gallery where users can preview the visualizations.

 
Portfolio_DashboardBuilder_Wireframe_1.png
 

9. Unify System Messages

While creating the visual design, I noticed that system messages within the product were not consistent. So I created this flow chart to ensure every system message and Call-to-action button follow the same structure.

 

10. Hifi Design

After many rounds of iterations in wireframes, the product team decided to keep the tool as simple as possible. Instead of being graphic focused, the MVP would focus on using text to help users navigate through the tool.

 
 

FINISHED CUSTOM DASHBOARD

This is a finished dashboard Stephen created. It helped him to monitor the volume and the quality of work of his Call Center, so that he could take action when neccessary.

 
 
 
SmallBusinessOwner.jpg
 
 

MEET STEPHEN

Let’s look at how one of our users, Stephen, a CEO of a call center service with ~100 employees, benefit from using our Dashboard Builder.

 
Web 1920 – 18@2x.png
 

DASHBOARD BUILDER LANDING PAGE

Stephen comes into this landing page, he would first be deciding whether he’s building a brand new dashboard or editing an existing one.

  1. If he was to build a brand new dashboard, he would then decide whether this dashboard would be displayed on a large TV screen or a computer screen.

  2. If he decided to edit a dashboard, and if he already knew its name, he could search for it directly on the search box,

  3. if he doesn’t know, he could use the sort functionality to locate it. One of the most common use case is to sort it by “last modified date”.

 
 
 
 

BLANK CANVAS

Upon landing the blank canvas, it was clear that there’s only one action he could take - Add an element to the dashboard.

  1. He could choose the component he wants to add in a dropdown menu, in the future this menu would include other types of elements as well.

  2. A hint is given in case Stephen is not sure what he could do here.

 
 
 
 

ADD REPORT MODAL

Stephen wanted to start by adding some charts he wants to see in his dashboard, he knows that he need to add the charts for “Call Duration (Min)” and “First Contact Resolution Comparison”

  1. The checkboxes allowed him to add multiple charts at once.

  2. He knows that the chart was created recently, so he used the sorting function to locate the lately created chart.

  3. He can also search the chart by its name.

 
 
 
 

KPI TILE CONFIGURATION MODAL

Stephen then proceeds to add the KPI tiles to the dashboard. He wants to be able to quickly grasp the number of “Average Missed Calls” & “Total Calls” etc.

  1. For all the KPI Tiles, he wants to put the focuses on the percentage change. So he chooses the 2nd layout option which puts percentage in the middle of the tile.

  2. Since increasing Missed Calls has a negative impact whereas increasing Inbound calls is a positive event, he has to choose the color of the arrow carefully.

  3. Then, he chooses how the metrics would be calculated.

 
 
 
 

ORGANIZING COMPONENTS

Stephen wants to have all the KPI tiles on top of the dashboard, so that he can grasp metrics the first thing he glances at the dashboard.

  1. He first drag the pie chart to the right side of the dashboard,

  2. and then dashboard builder tool shows him an area where his chart can possibly fit.

  3. He could also use the handle and the bottom right corner to resize the chart but he doesn’t need it at this moment.

 
 
 

A Completed Custom Dashboard

 
 

Like what you see?

Let's chat!