Oracle Dashboard 

A dashboard designed to help tech experts such as dev ops to monitor and track their application's performances. 

UI/UX Design | UX Research | Design Management

Tool

Sketch

My role

Lead Dashboard UX designer

Duration

3 years

Released On

Early 2019

Goal

To encourage IT experts who are both admin and viewers to create and customize dashboards, instead of relying on us to create dashboards for them.

Problem

The creation and editing of dashboards are painful and not user-friendly.

The status of dashboards is not clear when users need to both manage (edit) and view dashboards.

The filter and auto-refresh functions are hard to understand and lack flexibility.

Solutions

Improve the dashboard creation & editing user experience

Allow users to switch between view & edit mode.

Simplify the filter and auto-refresh components.

Impacts

The custom dashboard creation rate has been increased.

The average customer satisfaction rate towards dashboards creation & editing is higher than before (new: 4.5/5; old: 2/5).

Timeline

I joined the Oracle Management Cloud Dashboard team in early 2018. As the lead designer in the Dashboard team, I have led the research and design of this product for about 1 year. During the time, I was involved in a variety of design-related projects that help improve the overall user experience of the product.

Target Users

Goal

Tech experts in small organizations, where there was no dedicated dashboard management team, relied on us to create dashboards for them while complaining there was no easy way for them to customize or update their dashboards. We wanted to allow those customers to create and customize more dashboards by themselves. 

How can we design a dashboard experience to help admin users to create and customize dashboards?

Empathize With Users

Challenges

• Initially, there is no UCD process or researcher in the team.
• PMs and dev lead didn’t believe the importance of user research.
• PMs did not want to provide access to external customers 

Solutions

• Based on the results from an initial survey, I targeted the major issue, narrowed down the scope and generated a list of research questions.
  
• To help PMs and dev leads understand the importance of user research, I invited them to the user interviews, usability tests, and data synthesis sessions.
• By presenting to PMs and other stakeholders the research insights from initial user interviews, usability tests, and contextual inquiry with internal users, I got the approval to conduct further research with external customers.

Survey

A survey shows that, among the customers who need to create and manage custom dashboards, 66% of them feel that building and editing a dashboard is difficult.

User Journey Map

In order to learn more about users' problems, needs, workflows, and contexts, I decided to conduct user interviews and contextual inquiry before usability testing. In general, I conducted 7 user interviews with admin users: 5 are external customers and 2 are internal users.

Among them, 5 participants are both admins and viewers who need to create, manage and view dashboards.

User Problems

I mapped out all the user problems discovered in user research in a service blueprint. 

Key Insights

Define Requirements

Methods: Design sprint workshop

My role: Planner & facilitator

Outcome: List of user requirements with priorities

We wrote down the user needs or problems, and vote for those requirements. Each participant got 4 stickers to vote; PMs will be able to define the business value and customer value of each user need.

User Requirements With Top Priority:

• Improve usability when creating and editing a dashboard.
  • Simplify various settings for widgets, pages, and dashboards.
    
  • Allow users to add custom contents to the page.
  • Make adding and moving widgets more intuitive.
  • Make the status of dashboards clear to users (viewing, editing, favorited, unfavorited... etc.)
• Remove technical jargon and use a more user-friendly word.
• Provide user assistance when creating a dashboard.
  
• Allow users to use a global filter in a dashboard set.
• Provide more flexibility for auto-refresh.

Challenges

Different teams have different ideas about the priority of user requirements, and thus it's hard to reach an agreement.

Solutions

To ensure the success of design execution, collect diverse ideas, and come up with a plan working for everyone, I worked with other UX designers to invite all stakeholders, including PMs, Dev leads, QA leads, local developers, other designers into a 1-day ideation and prioritization session. I participated in the initial planning and was responsible for the preparation of facilities and the part for the Dashboard. 

Ideation & Iterations

1st Iteration

Usability Testing Feedback

• Participants want to update global filter options or sharing options in view mode.

• Participants love having view/edit modes but finding this option unclear now.

• It’s not clear that participants can add widgets from the side panel.

• The global filter options contain terminologies and unnecessary options.

• Dashboard set settings and page settings are not discoverable.

2nd Iteration

Usability Testing Feedback:

• The dashboard title bar is not responsive enough.
• Participants tend to relate auto-refresh with the time filter.
• The top bars are taking too much space.
• Widget settings contain too many options.
• Set as home option is redundant.

Final Design

(I've improved the visual design based on my preferences since the product has been released for a year).

Workflow (Admins & Viewers)

Cross-Platform Functions Checklist

Design

View Mode

The new design allows users to switch between view mode and edit mode. In view mode, users can only monitor applications and drill down to see alert or anomaly details.

Design rationale: 90% of his / her time, IT expert is viewing the dashboard, not editing.

Edit Mode

In edit mode, owners can edit the dashboard by adding, moving, resizing, or removing any visualizations or pages. 

Global Filter

In the new design, I provide options for users to simply add a global filter in each dashboard set.

Design rationale: The user interview showed that users do not need so many filter options, which confuses almost all users. Moreover, due to the lack of a global filter in the dashboard, users are not able to filter all the dashboards in a set at the same time.

By separating dashboard-level, page-level, and widget-level settings from the side panel, users will be able to find the settings more easily without memorizing anything.

Moving Widgets

In the old design, there is no indication to tell users that the widgets are movable. The targeting area for moving is also very small.

In the new design, users can drag almost any areas within a widget to move it in edit mode. As a result, the targeting area becomes much larger than before. According to Fitts's law, it becomes easier for users to move the widget.

Design For Accessibility 

I reorganized the widget setting menu to make it looks more clean and concise.

The reason for keeping “resize” and “move” options is due to accessibility & inclusive design concern. In general, users can also drag and drop to resize or move a widget.

Custom Widget

Design rationale: According to our user research, users want to easily add customized widgets (texts, HTML, images) to their dashboards.

Usability Tests

To test if the new UI design actually improves the overall usability, I conducted 11 usability tests on the new UI with target users. In those test sessions, I asked them to complete the exact same tasks, and ask them to give an overall rating at the end of each session. 

Sample Testing Results (Sanitized)

Collaborate With Engineers

Challenges

When I first handed over my design spec to the developing team, they could not distinguish the workflows between admin users and viewers. 

It's impossible for them to implement everything in one release.

Solutions

I created separate workflows for admin users and viewers. 

I worked with the developing team to create the lists of functions we need to implement for V1, V2, and V3 releases, making sure that each version meets our UX standards. 

Cross-Platform Design

Impacts

• The custom dashboard conversion rate has been increased by 25%
• The average customer satisfaction rate towards dashboards was increased by 125%.

Reflections

• Involving the dev team, PMs and other stakeholders in the design process can help everyone in my team understand the design and rationale behind it.
• Iterations should start early.
• Implementation can reveal a lot of design issues that were ignored previously. Thus it is really crucial to work closely with developers throughout the implementation process to make sure that all the corner cases are included in the design spec. 
• It is difficult for developers to code everything out in one release. Be prepared for dealing with intermediate implementation, offering user-friendly temporary solutions, making sure that each release meets UX requirements.

What's Next?

• Work on the user requirements with a secondary priority. 
• Make the 1-day design sprint a regular team exercise every once a month.