© sarah hakimah 2024
SmartThings Analytics Dashboard
Redesign – Improving functionality by visuals
Analytics Dashboard offers various data visualization of SmartThings data. As of now, SmartThings has over 200 million users and thousands of devices. The dashboard carries a lot of data on almost a hundred pages. With such a monotonous nature of the dashboard, how can to redesign it and improve user experience?
Role
Product Designer
Date
Jul 2022 - Feb 2023
Phase
Samsung Research Indonesia
Client
SmartThings
Problem
-
Requires users more time and energy to engage with the data as they have a very repetitive design and rather long dashboard pages
Repetitive design of the cards, almost all of them look the same even though they carry different data
Card and number size take up too much space
Solution
-
Break up the data by colors and layout, putting them into context
-
Combine charts and data into one card to save space
-
Adding icons as visual anchors, and applying well-researched and suitable soft colors on the data for better engagement
Discovery
I started by laying down almost all the dashboard pages, looking for anything that could be improved. My method is putting the dashboard screenshots in Miro, and analyzing from there.
Note: the details of the dashboard have been altered to protect the company's privacy.
There are few areas that I would like to improve separately, such as the layout, components of the cards, and aesthetics.
I also took a look at another dashboard such as Tableau, finding insights that the use of soft colors is great for a page with a lot of data as they do not look and feel overwhelming. Giving space to breathe between cards is also important.
Ideation
From the discovery, we create a few design ideations for the dashboards. The main ideas were:
-
Use color as context: colors have meaning in the dashboard
-
Deliberate layout: placement of the cards (vertically and horizontally) has context
-
Add more appropriate and helping data visualization so it would not take up so much space
As you can see from the picture above, the ideation design on the right already saved so much space on the dashboard.
Usability Testing & Iterations
We tested the usability of the design ideations and iterated the design from there. Some of the key feedback that we gain from the Usability Testings:
-
Deliberate layout and icons help participants read and understand the data faster
-
We need to define colors for the theme and differentiate them from the data
-
Do not use intimidating colors like red for the data, as it can indicate declining data
-
Space optimization: buttons and the top bar doesn’t have to be too big, as the space we had in this dashboard is precious; the more data to be shown on one page, the better
We did a couple of Usability Testings and many iterations before defining the design requirements.
Design Requirements
The new dashboard design principle is to help the users digest the data faster and create better engagement with the data. Every design choice in this dashboard should follow this requirement, without ignoring design fundamentals.
Color as Context
Colors play a big role in this dashboard, as we use them carefully to put context for the data.
Card Optimization
Optimizing cards by combining charts or cards into one card. It's done by combining related data or using the right data visualization to save space and put the data into context.
Icon as Anchor
Using icons can help users tremendously. We have developed years of noticing an icon in split-seconds, rather than reading texts.
Deliberate Layout
When space is used correctly, a lengthy page can become much shorter. A deliberate layout can also really help users separate the data, thus reading and understanding them faster.
Color to create context and icon as anchor
In the new Analytics Dashboard design, colors are used to separate data and create context. Color is used per dashboard, meaning that multiple dashboards can have the same colors. The colors are not associated with certain data or context. The colors are bright but not too saturated, making it easy on the eyes and pleasing the user who sees it. We also make sure the text color passes the WCAG test. The colors used are well-researched (which color works for data visualization).
There are color themes (for the sidebar, buttons, and accents) and a set of colors for the data and dashboard. The dashboard color comes in a set, to accommodate data that relates to one another.
Icon and other visual cues are used carefully around the dashboard. On each card, they have icons that represent the data. So users can memorize them for faster consumption of the data
Card Optimization
With a lot of data, space is very important as the page can be very lengthy. Looking at the older charts, we come up with a better idea of how to display them.
Before
The weight of the information feels the same because top to bottom the data displayed does not have much difference
After
-
The main information has the largest display, while the supporting information has smaller display and is less bright, to create context
-
The Registered iOS (Cumulative) and (RU iOS) / RU fall under the first data, so it is presented below the first one, indicating that the data is included in Registered.
-
The data are combined into one component to create context and make the user digest the data faster
-
Aside from offering more insight, the line chart is added to invite users to engage with the data
Deliberate Layout
We put the placements of the cards by design for the user to read them more easily.
With this new placement and use of colors, the user can get the information that purple represents data A, and orange represents data B. We deliberately place the purple data on the right and orange data on the left. In the two cards below, the data are compared. Multiple bar chart with different colors helps the user to gain insight faster.
Final Design
Feedback
Shortly after the release of 2.0, we asked user for our feedback. The feedback was positive, with an overall rate was 9,75 out of 10. They like the use of soft colors in the data visualization, the new way of presenting the data (colors with context and combined charts), and overall the new fresh feeling of the dashboard.
Updates
We keep on working on improving the dashboard, continuing to ask the user for their feedback so we can have more insight into what works for the user and what is not. Analytics Dashboard China will also be released next year, with a different color theme.
