go back
Company
Unacademy
Year
2023
PROJECT OVERVIEW
Topology manager
Unacademy is one of the largest learning platforms in India, serving millions of learners across competitive exams.
Topology Manager is an internal tool designed to manage and structure courses, goals, topics, concepts, and sub concepts in one centralized system, directly impacting what students see on the platform.
The outcomes was to restructured with a focus on clarity, usability, and operational efficiency. By introducing better state communication, improved visual hierarchy, clearer validation messaging, and foundational enhancements to core components, the new experience reduced friction and enabled teams to manage topology updates with greater confidence and speed.
before and after
From complexity to clarity
The earlier experience lacked clarity in hierarchy, interaction states, and visual separation between nodes. Important actions and validations were not clearly communicated, making navigation and topology management feel dense and difficult to scan, especially as the structure expanded.
The redesigned experience introduced stronger visual hierarchy, clearer state definitions, improved node separation, and better communication of actions and validations. While preserving the familiar layout, the improvements made the system more intuitive, efficient, and scalable for internal teams managing complex academic structures.
layout
Redesigning the Topology Manager required rethinking how complex hierarchical data could be structured without overwhelming users. Early explorations included horizontal layouts, kanban inspired treatments, and multiple column based variations to test flexibility, readability, and scalability. The challenge was to improve usability without disrupting workflows that internal teams were already familiar with.
Through multiple iterations and discussions, the focus shifted from drastically changing the layout to refining the existing structure. Improvements such as clearer separation between nodes, defined interaction states, better visual hierarchy, and thoughtful spacing enhanced scannability and usability while preserving the mental model users were comfortable with.
foundation
Cracking the base components
As the topology structure grew deeper and more complex, navigating and modifying nodes became time consuming and inefficient. Users were familiar with the hierarchy, but locating specific goals or concepts required excessive manual scanning and multiple clicks. The absence of a powerful search and flexible node actions slowed down daily workflows
The redesign began by defining the core building blocks, node and sub node, and clarifying their behaviors, states, and actions.
Enhanced search capabilities were introduced to help users quickly locate and navigate across the hierarchy, while improved component functionality enabled actions such as reordering, bulk selection, copying, visibility control, and deletion. This strengthened both speed and precision in managing large scale structures
Design system
As multiple internal tools evolved independently, visual inconsistencies and duplicated components began to emerge across the ecosystem. There was no centralized system governing typography, color usage, spacing, states, or component behavior, which led to design inefficiencies and inconsistent user experiences.
To address this, a comprehensive internal design system was built from scratch, defining foundational elements such as color tokens, typography scales, spacing rules, and reusable components. This created a unified visual language, improved design and development efficiency, ensured consistency across products, and established a scalable foundation for future growth
