Redesign: Sites Tab

Sites tab is a key system interface where users monitor and configure deployment sites. The old Angular layout was outdated and inconsistent. I reorganized its information architecture, cleaned up the UI, and added alert signals so users could scan and troubleshoot issues faster.

Type

Web App

Design System

React

Role

UX Designer

Team

1 Product Manager

3 Software Developers

Duration

3 months

CONTEXT

Modernizing the last Angular page

The Sites tab was the last part of the Komprise app still running on Angular. As the company transitioned the platform to React, this page stood out with inconsistent styling, outdated components, and mismatched UI patterns confused users. As the UX designer, I led the effort to redesign the Sites tab using our modern React component library to create a more consistent and intuitive experience.

ASSUMPTION

Early exploration: rethinking information architecture

One of the first assumptions was that the flat layout made it hard to scan and understand. So I reorganized the settings into logical groups like Configuration and Access & Credentials. Grouping similar items helps users find what they need faster and with less effort.
As part of this restructuring, I also moved the site selection to the top navigation and turned the left panel into a dedicated settings menu. This new layout supports both better clarity and more scalable navigation.

USER INSIGHTS

"But, I like the old one better."

During user interview with our enterprise client and internal teams, I discovered something unexpected. Even though the old UI looked outdated and cluttered, users still liked it. IT admins said it helped them scan through multiple sites quickly using the left panel. I first suggested replacing the site list with a dropdown, but users didn’t like the idea. They said it would slow them down and make it harder to see problems across sites. So I kept the left panel for navigation and improved it. I added alert badges that show error and warning states right in the list. Users can now spot issues at a glance without opening each site. This approach kept the speed and familiarity users liked, while also making the interface clearer and more helpful.

KEY DESIGN DECISIONS

Balancing Familiarity with Improvement

The final solution wasn’t about reinventing everything, it was about improving within a trusted structure.

 I kept the core layout intact, but added new visual signals to improve monitoring speed.

 I also built and contributed new components back into our design system to future-proof this pattern for other tabs.

FINAL DESIGN

Final UI: Scalable and Responsive Design

As I redesigned the Sites tab, I focused on creating a scalable and reusable setting component that could also be applied across other admin areas. Each setting block was structured into four parts: label, status, description, and actions. This layout allowed users to quickly understand each item and take action directly. To ensure consistency across the platform, I followed our design token system for all spacing, typography, and color rules. I also defined clear interaction states like hover, selected, error, and empty. The layout was built with fluid responsiveness in mind. I specified how each element should behave across screen sizes and defined scaling rules at key breakpoints to keep the experience clean and predictable.

FINAL DESIGN

Sucessful shipment & direct impact

The new Sites UI was shipped successfully and is now live across all customer environments. I worked closely with engineers during handoff, documenting all components, states, and responsiveness rules directly in Figma. To ensure quality implementation, I tracked Jira tickets throughout the build process and stayed in sync with engineers. All core setting components from this project were added to our internal design system library.

Enter Password