Admin Shell

UX & UI Design

This project involved a full redesign and rebuild of the admin shell framework to improve usability, scalability, and maintainability across internal tools. The existing shell was outdated, non-responsive, and inconsistent with modern design and accessibility standards. The revamp introduced a responsive layout, updated navigation structure, improved component alignment with the design system, and integrated support for the ability to switch between multiple admin products.

Impact

The new admin shell streamlines workflows, improves performance, and allows users to switch between multiple admin experiences without separate logins. It reduces friction, supports faster development, and provides a scalable, consistent platform aligned with modern design and accessibility standards.

What are the perks?

Unified Admin Framework

Users can seamlessly switch between multiple admin tools or experiences without logging in and out—improving efficiency and reducing context switching.

Scalable for
Future Growth

The new framework is built to evolve—supporting new features, branding updates, and role-based experiences without requiring a full rebuild.

Streamlined Workflows

Redesigned layouts and navigation reduce clicks, simplify tasks, and help internal users complete actions faster with less friction.

Responsive & Accessible Interface

A modern, responsive layout ensures usability across screen sizes, while updated accessibility standards support inclusive experiences for all users.

The Audit

An evaluation of the current admin experience revealed several critical issues affecting efficiency, usability, and scalability of the existing admin experience. Inconsistent UI patterns, lack of responsiveness, fragmented access across tools, and outdated technology have led to friction for internal users and increased maintenance for development teams.

These findings highlight the need for a unified, modernized admin framework that supports seamless navigation, responsive design, improved accessibility, and long-term scalability—paving the way for a more efficient and cohesive internal platform.

1. Outdated Technology and Performance Issues

The admin shell relies on legacy frameworks and unoptimized code, leading to slower load times, limited scalability, and higher maintenance overhead for engineering teams.

2. Outdated Library and Frameworks

Multiple admin tools use different layouts, navigation styles, and componentscausing confusion, poor usability, and a steeper learning curve for internal users.

3. Siloed Access Across Tools

Users must log into separate admin experiences to manage different parts of the system, creating inefficiencies, redundant workflows, and increased cognitive load.

The Foundation

Modernizing the shell improves the user experience, enhances performance, and reduces development risk. It enables faster development, supports scalability, and aligns with current web standards, positioning the platform for long-term success.

Horizontal vs Vertical Nav

The previous admin experience relied on a cluttered, horizontal navigation bar that lacked structure, made scaling difficult, and forced users to scan across the top to find core pages. As part of the redesign, we transitioned to a vertical navigation layout to improve clarity, organization, and scalability.

The new vertical navigation introduces clear grouping of related pages, a dedicated product switcher for seamless access to multiple admin tools, and a bank user switcher to support role-based workflows. This structure improves discoverability, reduces cognitive load, and creates a more scalable framework for future growth—all while aligning with modern usability and accessibility standards.

Product & User Switchers

To support a more streamlined and scalable admin experience, we introduced two key enhancements: a product switcher and a user switcher.

The product switcher allows users to seamlessly navigate between multiple admin tools within a single interface, eliminating the need for multiple logins or separate browser tabs. This unifies the admin experience and supports multi-product workflows with minimal friction.

The user switcher enables internal teams to easily toggle between different bank environments or user roles, making it easier to test permissions, troubleshoot issues, and manage role-based access. This is especially valuable in multi-tenant environments where teams manage multiple clients or user types.

Performance Improvements

Improving performance is critical to delivering a fast, reliable user experience and reducing bounce rates. The current shell exhibits sluggish load times and inefficient rendering, which negatively affects user satisfaction and engagement. Key areas that were looked into for performance optimization: asset optimization, code splitting, reduce DOM complexity, caching strategies, improve Initial render speed and performance monitoring.

Faster Load Times

Shortens time to content, improving user engagement and satisfaction.

Improved SEO & Accessibility

Better performance scores improve search rankings and support assistive technology.

Lower Resource Usage

Especially important for users on low-end devices or slow connections.

Higher Retention & Conversions

A snappier experience directly contributes to user trust and business outcomes.

User Interface and Patterns from Design System

The admin experience was fully redesigned to align with the new design system, bringing consistency, scalability, and efficiency to internal tools. The previous interface was built with outdated components, lacked responsive behavior, and had grown fragmented over time—resulting in inconsistent visuals, accessibility gaps, and slower development cycles.

By rebuilding the admin UI with the updated design system, we introduced a unified visual language, responsive layouts, and accessible, reusable components. This transition not only modernized the user experience but also streamlined collaboration between design and development teams, reduced maintenance overhead, and accelerated the delivery of new features.

Visual & Functional Consistency