CloudTower Task Center Redesign

Led the end-to-end redesign of CloudTower's Task Center (Web) to make complex task status tracking easier to understand and scale.

Built a standard component library by componentizing task cards with Figma variants as a single source of truth for future iterations.

In data center management, most operations are asynchronous—they don't finish immediately.

Users need to initiate a task and then switch to other work while waiting for the result. The Task Center acts as a unified hub, allowing users to track the status and outcome of all these background operations in one place.

As CloudTower introduced more complex features, the legacy Task Center design could no longer handle the increasing data density and complexity.

We needed a scalable solution capable of displaying intricate task details and supporting the platform's future growth.

Through user interviews, competitive analysis, and UI walkthroughs, I identified the current task types, user behaviors, and needs.

A task transitions through various states from initiation by the user to completion. Different task states influence the actions a user can perform and vary in importance to the user.

Regardless of whether it was a step-based task or a data transfer task, the same generic "In Progress" icon was used.

For most non-data transfer tasks, users had no visibility into the specific step, only seeing a spinning loading loop.

Designed distinct icons for each of the three states to help users visualize progress and prompt necessary actions.

Sorting strictly by "Start Time" pushed critical "Paused" tasks (which require user action) out of the viewport. Users were forced to scroll extensively to locate them.

The sorting logic is no longer strictly chronological (newest to oldest). Instead, I implemented status-based sorting.

Tasks requiring user attention are prioritized at the top, ensuring critical items are not pushed out of the viewport by new incoming tasks.

Completed tasks vanished immediately after the panel was closed (marked as "Read"). This created an unstable experience—if a user closed the panel by mistake, they were forced to navigate to the full "All Tasks" page to find.

I removed the volatile "Read/Unread" states. Recently completed tasks are now persistently displayed in the panel, ensuring a stable reference for users.

The panel's fixed maximum height severely limited the number of visible tasks. During high-volume operations, users had to scroll repeatedly within a small window to track their target tasks.

Removed the fixed height of the task panel. Instead, it now maintains a fixed 64px gap from the bottom of the screen, maximizing the available space to show more tasks.

The task center button did not reflect any status changes. Users had to click the icon to view any specific details about task execution.

By encapsulating the task cards into Figma Components with Variants, I created a single source of truth for all task states. This reduced design redundancy and improved the consistency and efficiency of future design iterations.