Topology manager
Overview of topology manager
The problem
As the company grew, the number of students on the platform grew as well. So our internal teams will added more goals each days into the platform.
Current topology was completely outdated and not great in terms of functionality. There’s a no logs or communications for any changes in made in topology, No search bar for adding or editing any topology it might feels frustrated to the users. If any topology made into live there is some validations before going to live but in current designs its not communicated properly.
Cracking the base components
In order to crack the Topology Manager, first we decided to crack the base components ie,.node and sub-node. We separate into two categories: One is current functionality of TG (Topology Manger) such as edit the title and Change the visibility mode, second things is what the users need? (Rearrange the order, Select multiple sub-nodes → Copy to different nodes, Change visibility & Delete)
After getting the feedback, We started the designs, Our goal is to be simple and easy to understand.
Subtle changes make it big impact
We started by showing some of the early table iterations we thought they would find useful. But this could have the opposite effect, as the user testing might not performewell in terms of experience.
After a lot of discussions and iterations we follow the old layout for this projects also is working well, Since if everything is working perfectly, there is no reason to touch and revamp the screen.
But instead of layout, we more focus towards the details like adding dividers between each sub-node, Finding the states how we can give more interactive and intuitive way of states. Some of they states are what happen when the node is expand, closed, hover,.. Added 2px divider between the two nodes will help the user to scan faster, Defined the colour code for each state will help them to give more accessible.
This worked! We got a good responses from our users small changes make it good impact from our teams.
Search
Search is a complex and challenging feature. We noticed that users are more aware about the structure and know where they want to make changes ( In business team they are well defined with topology when they want to add, where they want to add or edit ), but the problem is finding and clicking each topology, which is very time-consuming and tedious.
Making goal creation easier
In Topology manager, every minor change must be validated
For example :
If a user wants to delete a node, to make a goal live there is conditions. It applies to every single change, whether it is to make a goal live, to delete nodes, or to change visibility. Why do we need this validation? Because if you change something unknowingly, it will affect everyone as well as the business unit. So it’s very critical part of the topology manager.
Before we started design we wanted to know how the validations works in current topology? So we can talk to existing tech team because they only no how the current topology manager works. After lot of questions and fights we cracked all the validations
Our team has decided that we can go with every simple solution in version 1, such as displaying a modal if the validation is not satisfied
Design system for Atlas - defined along with Topology manager
One of the most important outcomes of the project was the Design system for the internal tool Atlas. Multiple teams were dealing with projects on Atlas, thus DS played a crucial role in consistent and speedy design delivery.
Reflections
There are few areas that are as rich, complex, and multi-disciplinary as, and where there’s complexity, there’s opportunity for design to shine. I was fortunate to work with so many brilliant and interesting people during the time of topology manager.
There’s was a lot of engineering magic going on behind the scenes to extract these logic and validations, but stitching them all together programmatically in a way that resulted in a beautiful creative was a challenge.Kudos to my PM was a huge help in sort out the validations.
