.gif)
PROJECT
Airdeck platform design
Dashboard Redesign
AirDeck platform is a software-defined infrastructure for enterprise applications. It aims to offer customer a highly flexible and efficient cloud solution. By the start of 2019, the dashboard receded to a slew of disparate features that made the experience slow and complex to use. I was in the ambitious project to redesign the AirDeck dashboard experience.
TYPE
Work Project
(Development in progress)
(Development in progress)
WHAT I DID
UX Research, User Interview, UX Design, Visual Design, Prototype, User Testing
PROJECT LENGTH
3 Months
TOOLS
Sketch, Adobe Kits, InVison, After Effect
BACKGROUND
OVERVIEW
In four years since 2016, AirDeck platform gradually developed multiple functions. By 2019, The dashboard struggled to scale alongside the growth of the new functions. Fundamental usability was challenged. Disparate features competed for focus. Platform reliability and performance issues increased exponentially. A new dashboard with clear hierarchy and fluent user flow is needed urgently.
BACKGROUND
IMPACT
After the about 3 month of research, brainstorm, interview, design, testing, the new dashboard was lunched on June, 2019.
Before
After
BACKGROUND
The Challenge
Our high level goals were to:
Make it fast and easy for user to get what they need.
Give users more control of the platform.
Create a flexible and easy-to-use platform.
Make it fast and easy for user to get what they need.
Give users more control of the platform.
Create a flexible and easy-to-use platform.
BACKGROUND
My Role
I led the UX redesign of the dashboard and collaborated with two UI developers, one back-end developer and one QA. In addition, I worked alongside a product manager with early insights exploration. The dashboard launched on June, 2019.
Our product aimed to offer our clients a highly flexible and efficient cloud solution where they can manage the platform resources easily. However, the dashboard struggled to scale alongside the growth of the new functions. It started to show chaos and became complex to use.
As a result, our goal was to redesign the dashboard with crystal-clear hierarchy and easy management of the resources.
As a result, our goal was to redesign the dashboard with crystal-clear hierarchy and easy management of the resources.
EMPHASIZE
problem & vision
Users' Needs
The dashboard design has not been improved in 3 years.
In a user satisfaction survey, only 33% of users satisfied with the dashboard. Usually, average satisfaction is 51%.
Our customers request updated the user experience & visual design. Following are some selected feedbacks:
In a user satisfaction survey, only 33% of users satisfied with the dashboard. Usually, average satisfaction is 51%.
Our customers request updated the user experience & visual design. Following are some selected feedbacks:
" Too much information to look at."
" Too many distractions and chaos."
" The design is outdated."
" Should I click the button or the red type?"
" Too many distractions and chaos."
" The design is outdated."
" Should I click the button or the red type?"
Impact Perspective
The dashboard is the first page the users will see and it takes a 100% page view, which is the most important page on the platform.
It also leads users directly to the next step, which will contributes greatly to user engagement rate.
Improve the detail page will have the following impacts:
It also leads users directly to the next step, which will contributes greatly to user engagement rate.
Improve the detail page will have the following impacts:
Increase user engagement rate
Help user move to the next step efficiently
Spare user's energy and time, improve user satisfaction
Help user move to the next step efficiently
Spare user's energy and time, improve user satisfaction
EMPHASIZE
Early Insights
To narrow down the scoop of the problem, I worked with the product manager to launch an online survey via SurveyMonkey. Major user problems came into the following category:
Information
62%
of first-time users found it too much effort to figure out what is the first thing they should do. The design is a chaos with multiple colors and shapes. And the red warning color is prominent on the page which makes user even more confused. There is no clear hierarchy to see which information is more important and where to start first.
Navigation
56%
of users complained about the information structure. There is no organization of the contents and user would not know which link leads to which page. They have no idea whether the red link and the red button lead to the same page or separate ones.
EMPHASIZE
The Discovery
Problem statement
From the online survey and our clients' feedback, I addressed the four main design problems of the current dashboard:
1. Lack of information hierarchy
2. Confusing navigation and colors
3. Overwhelming red warning color
4. Prominent alerts
2. Confusing navigation and colors
3. Overwhelming red warning color
4. Prominent alerts
User Interviews
I conducted target user interviews to determine: (1) how they work and how our product help them, (2) how they define “dashboard”, (3) their frustrations and desires, and (4) how they currently tackle problems.
At the same time, I talked to our CEO to know our product's goal and direction, to implement our product strategy better.
At the same time, I talked to our CEO to know our product's goal and direction, to implement our product strategy better.
"The chaos on the dashboard is ok for me, since I deal with lots of things like this everyday. The biggest concern is to make it clear where to click. The nodes, the networks and storage is what I care most and hope to have a overview of them."
- Target user 1, senior engineer
- Target user 1, senior engineer
"Although I'm an engineer, I admire clear and pretty design. I think that makes a good or great product. Dashboard like this, with lots of alters, will definitely gives me a headache when I login in."
- Target user 2, senior engineer, admin
- Target user 2, senior engineer, admin
"We are aimed to offer our user a stable and easy-to-use cloud platform, where they can efficiently finish their daily work. Our priority strength is our elastic storage."
- Our CEO
- Our CEO
DEFINE
Reframing the Problem
Combing the user survey, user interview and competitive analysis, I reframe the problem as below:
A dashboard is an information management place that visually tracks, analyzes and displays key metrics and key data points to the health of a business. It helps user to overview the whole system and positions the problem. Poor information hierarchy lower the efficiency of the dashboard.
As a result, the main redesign focus is
“How might we help users to have a clear overview of the system on the dashboard?”
IDEATE
DESIGN OPPORTUNITIES
Based on the main focus, I formed the following questions:
How do we design clear information hierarchy?
What other contexts need to be considered?
What’s the most important data to the user?
These questions are the key perspectives to help building my my design opportunities and strategies:
How do we design clear information hierarchy?
What other contexts need to be considered?
What’s the most important data to the user?
These questions are the key perspectives to help building my my design opportunities and strategies:
Improve information hierarchy design
Use data visualization of the most important data
Improve navigation efficiency
To allow the team to have clear alignment on the goals we’re trying to achieve, we made goals which can be measured in user engagement and also user satisfaction:
To allow the team to have clear alignment on the goals we’re trying to achieve, we made goals which can be measured in user engagement and also user satisfaction:
Design Goal
Increase user engagement 14%+, from 16% to more than 30%+
Improve user satisfaction 20%+, from 33% to 53%+
DEFINE
DESIGN APPROACH
To understand the target users' behaviors, I worked with developers to get the following page view data from our platform:
What is the key information for users to overview on the dashboard?
IDEATE
Design Ideation
Based on the data and the design strategies, I designed the dashboard with the following principles:
DESIGN
Clear hierarchy
A good visual hierarchy saves work by preprocessing the page for us. Organizing and prioritizing its content in a way that we can grasp almost instantly. The original dashboard is in a chaos of shouting information. When everything on the page is clamoring for your attention, the effect can be overwhelming: lots of exclamation points, different typefaces, and bright colors.
To give a good visual hierarchy, I did three changes:
To give a good visual hierarchy, I did three changes:
1. Use cards to categorize the related information, which is based on the proximity design principle.
2. Using consistent sizes and clear relationships between elements to create patterns and visual flow, which is easy for users to scan.
3. Create data visualization interface to display the most important data, this helps the users to overview and monitor real time status of the system.
2. Using consistent sizes and clear relationships between elements to create patterns and visual flow, which is easy for users to scan.
3. Create data visualization interface to display the most important data, this helps the users to overview and monitor real time status of the system.
DESIGN
Standardized interactions
When we design a web page or an app, interactive components must retain sufficient cues to suggest clickability. Signaling clickability with cues such as borders, color, size, consistency, placement, and adherence to web standards can give interactive components the proper look. The original dashboard had multiple link colors which made users confused. To make these links clear, I chose to use same interactive color and pattern to make these links consistent and recognizable.
DESIGN
Appropriate Notifications
When embarking on notification design, the essential design principle to keep in mind is that they must assist people to perform tasks. when users come to see a page full of alerts, they will feel great pressure and become anxious. What I do is to get rid of the prominent red warning color and error notifications, make the alerts colors mild as cues and lead the users to secondary page to check the problems they should solve.
DESIGN
progressive disclosure
Sending people the right amount of notifications is a balancing act, and overdoing it is fraught with peril; the product may get a lot of negative feedback. The full-screen of critical problems and errors on our dashboard did not help build a good user experience. In this redesign, I put events on a card for all notifications and classify them on three levels: high, medium, and low-attention. By doing this, User can scan notifications and explore additional information on next step if they need.
PROTOTYPE
PROTOTYPE
When we design a web page or an app, interactive components must retain sufficient cues to suggest clickability. Signaling clickability with cues such as borders, color, size, consistency, placement, and adherence to web standards can give interactive components the proper look. The original dashboard have multiple link colors which make users confused. To make these links clear, I chose to use same interactive color and pattern to make these links consistent and recognizable. Based on all these changes, I accomplished the dashboard redesign and made the prototype in After Effect.
RESULT
Design Improvements
By redesign the dashboard in a data visualized way, the user satisfaction was over 64%, which was over our 53% design goal. And the user engagement was up to 28%, highly improved by the original 14% user engagement.
yuwangdesign@gmail.com
