SmartThings Analytics Dashboard
Making data easier to read, faster to understand.
SmartThings connects hundreds of millions of users to thousands of devices worldwide. The analytics dashboard behind it is used daily by thousands of users from various countries, spanning a wide range of roles including product and ops teams. Over time it had grown to nearly a hundred pages with most looking identical. This was an unrealized problem for most users as they tend to work with what they are given. The redesign was a challenge to improve the interface and, most importantly, how users interact with data.
Role
Product Designer
Years
2022-2023
Skills
Product Design, Design System, Data Visualizations, Dashboard
The Problem
The dashboard's main problem was the lack of visual hierarchy and categorization.
Hierarchy: Every card looked the same. Same layout, same visual weight, regardless of how important the data was. Less important data took up as much space as more important data, making every page unnecessarily long.
Categorization: Each page usually carried a few groups of related data, but they looked similar and repetitive. People understand data better when it's grouped with meaning.
Unclear hierarchy and disorganized data meant users had to read every card fully just to understand what they were looking at, and even longer to grasp the context within it. To help users reach their actual daily goal of making decisions and getting insight, the data had to be easier to read and faster to understand.
My Role
I was the product designer on this project, collaborating with my design lead and SmartThings Analytics Dashboard technical lead to get feedback and discuss technical feasibility. Otherwise, I conducted the entire design process until the final design handoff.
Discovery
I started by laying out most of the dashboard pages in Miro. I screenshotted each page so I could see them all at once, looking for recurring patterns. The dashboard's repetition was apparent. From there, the hierarchy and categorization problem became clear.
I also looked at other dashboard services like Tableau. What stood out was how much of the dashboard experience came down to design decisions rather than the tool itself. Tableau lets you customize almost everything, which made it clear that the quality of a dashboard lives in the choices the designer makes, not the platform.
Before moving into ideation, I conducted focused research on color usage in data-heavy interfaces. I found that soft, intentional colors and breathing room between cards made dense data seem manageable and not overwhelming. This became the foundation for the color direction in the next phase.
Ideation
I collaborated with my design lead in the ideation phase, exploring multiple directions before landing on three main ideas:
Use color and icons as context: Colors are used as a tool rather than decorative elements; they have meaning in the dashboard. Icons support recognition, helping users identify data faster than reading a label.
Strategic layout: The placement of the cards, both vertically and horizontally, has context.
Relevant data visualization: The right data visualization helps users understand data faster at a glance.
Not everything worked in early ideation. Larger cards were tested but dropped as they took up too much space without adding clarity. The color and layout directions showed the most promise. My design lead and I merged our approaches, and the combination became the foundation for everything that followed.
Usability Testing & Iterations
Since the dashboard is used by internal teams, I tested with product managers and data analysts within the company. They work with the dashboard regularly, making them the right people to test with. I iterated on the design based on feedback between rounds. A few key findings that shaped the final design:
Strategic layout worked: Participants said the strategic layout and icons helped them read and understand data faster.
Colors needed two separate systems: Dashboard theme color and data colors need to be different from each other. Mixing them created confusion about what the color was signaling.
Context of colors: A reddish color like salmon still signals danger to users when applied in a chart. Color meaning also varies by region. In South Korea, red indicates an upward trend. Since the dashboard would be used worldwide, we decided to avoid red-adjacent color altogether to keep a neutral tone. Red is only used when I want to grab attention, such as for declining data.
Space optimization: The more data that fits on one page without scrolling, the better. Other design elements should not compete with the key content of the page.
Design Principles
After testing, the three main ideas expanded into four design principles. Color and icons, originally explored together, were developed into two separate principles as each had enough depth to stand on its own. These principles guide the design direction and decisions throughout.
Color as Context
Colors are used to categorize, separate, compare, and overall create context. They are applied carefully throughout the dashboard. At a glance, users can categorize data and grasp the relationship between cards without spending too much time reading the label.
Two separate systems: The dashboard has its own color theme used for sidebar, buttons, and other accents (passed WCAG AA). The data color stands on its own, containing 12 colors that are expandable as needed.
Assigned per page: Data colors can be used across multiple pages, but their context exists within a single page, not associated with a certain data type. This keeps the system flexible, no need to create a new color logic for each page.
Designed for long viewing: The set of data colors are well-researched, specifically chosen for use in charts. They are bright but not too saturated, making them easy on the eyes and not exhausting for users who might spend time looking and analyzing the charts.
Icon as Visual Cue
People process images faster than text. A well-chosen icon helps users build familiarity quickly and navigate by recognition rather than reading. Each icon in cards can have data colors or a neutral color like grey, depending on the context needed within the page.
Card Optimization
The old dashboard had no visual hierarchy between the data. Everything felt equally important, which made nothing feel important. I reviewed each card and asked: what's the primary number here, and what's supporting context? Then I restructured accordingly to create clear hierarchy in the data:
Size: The primary metric gets the largest, brightest treatment. Supporting figures are smaller and less bright, visually secondary.
Position: The supporting data placed below the main data, signaling that it falls under the primary metric. The exact position may vary, but the order should always be consistent: main data first, then supporting data.
Data visualization: Where it improves the user’s experience in getting insight faster, I added relevant data visualization such as trend line or progress chart. The added visual changed how users engaged with the data.
Strategic Layout
Layout is a design tool as much as color is. Cards already have colors within them, so the next step is to place them strategically to make the data even easier to understand.
Position: Comparable data is placed side by side. More complex pages combine horizontal and vertical placement to guide the reading order.
Card Size: Card size is initially decided when optimizing the cards, but it can also be influenced by layout. In this dashboard the layout is divided into a 12-column grid with 5 predefined card sizes. The defined sizes help keep the layout well-structured and consistent.
Working with these four design principles creates a dashboard that is easier to read and faster to understand. To make these principles reusable and consistent across projects, I built them into a design system.
Design System
After the design principles is established, I created design system that translates the four principles into reusable components and guidelines for the SmartThings ecosystem. It helped tremendously in redesigning over a hundred dashboards, and turned out to be simple enough that data analysts on the team picked it up as well.
Final Design
The redesign changed how the dashboard displays data, from pages of identical cards to organized data with clear hierarchy built on a sustainable design system with a consistent color-as-context system, standardized card components, coordinated data color sets, and strategic layout.
Complex Case: Summary page
The same principles held up under significantly harder constraints. The Summary Page is displayed on a large screen in a meeting room at headquarters, a context that changes the design problem considerably:
Bigger canvas, but no scrolling. Everything must fit on one page.
Limited interaction. The primary viewing context is a meeting room, so the page has to communicate without anyone touching it. Detailed information is still available on click for analysts who want to explore further at their desk.
Instant readability. Viewers are VPs in a meeting who need to understand the page without prior context or time to explore.
The page started as uniform tiles of raw data with no grouping or hierarchy. Applying the four principles transformed it into a categorized, readable dashboard that communicates the right information instantly, without the viewer having to look for it.
Feedback
One month after release, users rated the new dashboard 9.7 out of 10. Users adapted to the new design quickly, and the feedback came from teams across regions.
What Came After
As of 2026, 3 years after the redesign, SmartThings Analytics Dashboard still applies the four design principles when designing new dashboards. More complex dashboards have been designed using the same system, showing its flexibility and sustainability through cases like the Summary page.
The design principles and system turned out to be flexible enough to apply beyond SmartThings. Other dashboard projects handled by the design team in Samsung R&D Institute have adopted the same system and principles. I have also shared the system company-wide as a reference for data-heavy design projects.