Can we improve the Glasnostic console UI to be more intuitive and user-friendly with low-cost changes?


Chihling Kuo (Me, UX/UI designer)
Willy Liu (F2E, Phase 1)
Olga Andriychenko (F2E, Phase 2&3)
Ying-Ping Lin (F2E, Phase 3)
Zong-Jhe Wu (Front-end team leader)


Each phase average has:
3 weeks for design
2 weeks for implementation


Phase 1: Jun 2020
Phase 2: Feb 2021
Phase 3: July 2022

Three phases

Phase 1: Improve topology, metrics, and navigation bar
Phase 2: Add more classifiers and themes
Phase 3: Improve topology links, legend, and layout


User Observation
Feedback grid
Prioritization grid
UX competitive analysis
Color-blind simulation
Lo-Hi fidelity prototype
Moderated usability testing
Preference testing


UX analysis
UI design
Design system for two themes
Design spec
Review PR


The Glasnostic console was designed in 2018 by a previous designer. The CEO and CTO are uncomfortable with its topology graphic. Developer colleagues feel the console overall looks counterintuitive. Moreover, since we are a startup company, the timeline is rapid. Therefore, only low-cost changes are acceptable at the current moment.

What is the problem?

Our console is counterintuitive, learning from our potential investor's or customers' reactions. They can barely understand what our console communicates on their own. -Tobias, CEO at Glasnostic

Design process

My default image

Business constraints

Before heading you to my design methods, I want to remind you we do have some business constraints. Since we are a startup company, we are a small team and need to handle tasks in a rapid time. Moreover, Glasnostic doesn't have any formal users yet at this moment.

Adjustment limitation:
  • Keep the features the same
  • Do not add any new graphic type to visualize networks
  • The implementation of changes should be able to complete within 2 weeks.

1.Observe and define the problem

2018 version and observation tasks

2018 version and observation tasks

Observation and collect feedback

Since we don't have any formal users, I can only observe my colleagues. I sit next to my colleague and observe them one by one. Then, ask them to do the tasks. The benefit of doing the observation is that we can know HOW they interact with the current UI and WHAT the obstacles are to completing the tasks. Nevertheless, the downside of observing my colleagues is that they are not novice users. Therefore, I couldn't catch the natural behavior of novice users.
After the observation, I organized their behavior, feedback, and ideas into a feedback grid. According to the observation records, most of my colleagues became slower at reading the channel table. This is because the gap between each channel is too large and has similar colors to aggregate endpoints info. It dazzles their eyes. In addition, some are unsure why the UI needs to use five different colors to display the destination endpoints.
Discover 2018 old versions issues

Persona and Journey map

To learn more about our target users, I joined the DevOps group on Facebook, messaged some group members then conducted interviews. Here is the Persona and Journey map to better understand the users.


Discover more issues

I reviewed the console and found 17 issues, most of them are accessibility issues.
Discover 2018 old versions issues

Prioritization grid

I realized there are tons of ideas to do to improve the Glasnostic console. I started to list all potential solutions and ideas from feedback into a prioritization grid. Then, I ask frond-end colleagues to determine the feasibility of these possible solutions. Later, I discuss the priority with the CEO. We separated solutions into 3 phases and decided to start from the highly feasible solutions.
Discover 2018 old versions issues


Competitive Analysis

I choose Dynatrace, Datadog, and New Relic as direct competitors which provide similar products and focus on similar groups. On the other hand, I choose Azure DevOps, Grafana, and Google analytics as indirect competitors. Although Azure DevOps focuses on similar groups, it provides different services, focusing more on team collaboration and management. Therefore, it is an indirect competitor to us.

Key findings:
  • Most of their product matches branding.
  • Most of them have both the side menu and the top menu.
  • Almost all graphics have a legend.
  • All topology graphics show arrows to indicate the communication directions.

UX competitive analysis

3.Prototype & Test

Phase 1

Improve topology, metrics, and navigation bar.
2018 version v.s. 2020 version

Topology and metrics

I start with reducing the colors of the endpoints. To help reduce the cognitive load, let's not make topology looks complex. Eventually, we only need three colors to present endpoints—one for sources, one for destinations, and the last for the mid-endpoints. Moreover, I care about accessibility. For instance, if you check the blue and purple with a color-blind simulator, you'll realize you can't distinguish these two colors. Therefore, we must need to avoid using blue and purple together.

To show the branding on the console, I decided to use the green colors of our logo. So I use Stark to simulate color-blind vision and double-check if these green colors can easily distinguish with color-blind vision. I intend to make one green color approaching yellow and another towards blue. Another good tool is Adobe color wheels to check if these colors pass accessibility. Finally, I compared the endpoints' green colors with link line colors.


Accessibility of colors

Top navigation

We need to move the current control buttons to have a cleaner layout. It shouldn't be like a wall between graphs and metrics. A better place is to put it into the top navbar. We use icons to be our control buttons. However, these icons are not universal icons, so don't forget to provide a tooltip or text to explain what it is. When a user hovers over the buttons, the dropdown shows and can see the text on the top. One more bonus change is that I made the user can switch the environment directly from the dropdown. There is no need to show a pop modal which takes three steps to switch to another environment.

Top navigation variants

For a better performance, let's remove environments popup

The testing result shows that when a user edits the environment, the popup doesn't stop the environment from running. It continues running in the background but slows down the performance. While a user is editing the environment settings, a better way is to lead a user to another page and stop running the environment.

Show legend as popover

From my competitive analysis, almost every graph shows a legend which I agree we should have too. However, at the moment, our topology merely has three colors of links. It's super simple. Users might not need to see it as always on the graph area. Therefore, after discussing with the CEO, we decided to add a legend as a popover. While hovering on the question icon, the legend shows as a popover.
Legend of topology links


Phase 2

Revise the light theme, add a dark theme, and make the classifier switch.

Test, Reiterate and Repeat

Test, Reiterate, and Repeat

Redefine colors with elevation levels

Having a dark theme is my idea, and I insist on it no matter how difficult the proccess is. Consider users' environment, most of coding editor provides dark theme. The benefit of drak theme is it lower the harsh bright light from the screen. And of course not everyone prefer dark theme, therefore we should let user freely to choose what they prefer. However, designing a new theme for the console is a big challenge for me because it has tons of elements and won't be simply tweaked the lightness of light theme colors. Besides, the original light theme metrics colors also need adjustment. So I started by searching the methods of how to build a theme:
  1. I found elevation levels are an excellent way to support reorganizing and reviewing the current theme.
  2. Break down every element on the console and determine its level. To prevent adding too many new colors, I checked the colors we already used and tried to reuse them again.
  3. Generate colors, apply colors by levels, and do the A/B testing with colleagues, then continue to reiterate and repeat.
Completing the design of two themes costs at least 20 versions and countless experiments in generating colors. Nevertheless, I'm super happy with the outcome. It made our console a considerable difference.

Switch classifier and show legend

Switch classifier

Switch classifier and legend

When users switch the classifier, we show the corresponding legend immediately. It helps users to understand the topology color changes with specific meanings. They can realize the topology graphic with the selected classifier right away.

2018 vs. 2021 version

Let's see the outcome of phase 1-2 completion.
Isn't it a vast difference?
2018 vs. 2021
2018 vs. 2021 admin UI
2018 vs. 2021 admin UI

Phase 1 and phase 2 outcome

Phase 3

Make legend extendable, improve topology links, and let the view panel be collapsible
In phase 3, we want to improve our service map to be more intuitive to read and add a bit of flexibility for users to control how much information they want to see. For example, the thickness of the link depends on the loads: a more load, a thicker link. Flexibility includes allowing users choose between a simplified legend and a comprehensive legend. Furthermore, they can collapse the views metrics if they only want to observe the service map on the screen.
Extendable legend

Extendable legend

Topology improvements

Topology links

Flexible panel

Flexible panel

4.Final version

From 2018 to 2022 versions

Phase 3 outcome

Hear what others say

Thank you for the hard works. Console becomes so much better, dark theme is valuable indeed. I love to show it on company presentation. -Tobias, CEO at Glasnostic
I really happy with the improvements, it becomes much cleaner not dazzles my eyes anymore.- Alan Li, Back-end developer at Glasnostic
You made console visually be more professional, and more intuitive to interact with.- Peiming Wu, Lead developer at Glasnostic


  • What worked WELL?
    I appreciate my colleagues, for allowing me to do the observation at the very beginning. As a result, I collected lots of ideas and learned a lot from them. I won't be able to accomplish the revision without their support. Finally, I want to give a big thank to the front-end team. They are willing to share their ideas and determine the feasibility in every phase.

  • What DIDN’T go well?
    In phase 2, designing a new theme isn't a quick job. I failed lots of times in generating new colors. After the design is confirmed, it also takes much time to prepare the spec, review the PR, and check every color on the stage. I consumed more time than I expected.

  • What might I try NEXT?
    If we have more time, we should consider having the main side menu and redesign the confusing aggregate endpoint metrics. Also, provide a more flexible layout. Check our competitors, most of them allow users to choose what to show on their dashboard. On the contrary, we don't let a user see metrics only. We always present a service map on the console.
Other works