Transtar Reimagined

Project Overview

Transtar is a specialized web application used by banks, transfer agents, and corporations to manage bond and stock transfer processes. It streamlines bondholder and shareholder recordkeeping, serving as a critical tool for financial institutions and corporate entities.

When company management approached me about redesigning the application, they had noticed my previous frontend work and personal projects. What began as a request to reimagine the dashboard quickly evolved into a comprehensive UI/UX overhaul. I was given biweekly meetings with business analysts, developers, and management to gather requirements while maintaining creative freedom to develop unique solutions.

The project started with a Next.js mockup strictly adhering to their technology constraints: Bootstrap, CSS, HTML, and TypeScript. After positive feedback on the initial prototype, I was tasked with implementing these changes in the production system. As momentum built, additional developers joined to redesign other sections while I focused on the Login and Dashboard screens.

UI Transformation

Drag the slider to compare interfaces or use the expand button in the top-right corner for a larger view

Demo Video

Click to watch a demonstration of the new Transtar interface

Challenges

The original Transtar interface faced several critical issues that were hampering user adoption and satisfaction:

• Outdated visual design was consistently cited by clients as a major pain point, with some potential clients even citing it as a reason for not adopting the software.
• Poor dashboard utility meant most users bypassed the homepage entirely, instead manually searching for activities within the application rather than using it as a launching point.
• Ambiguous UI elements made onboarding new users difficult and created unnecessary friction in everyday workflows.
• Maintenance burden from supporting over 10 different themes, many with visual bugs that required continuous fixes.
• Technical constraints including a legacy TypeScript import system (triple-slash directives instead of ESM modules) and a custom frontend without modern frameworks.

The technical challenges were particularly complex. The frontend wasn't built on a modern framework but instead used a manual TypeScript project with custom HTML components and state management. This meant each change required extensive testing to ensure nothing else broke, and integrating third-party libraries demanded finding fully-typed packages with compatible licensing.

Solution

My approach centered on creating a universal design language that would make Transtar feel fresh and modern while remaining intuitive for existing users. The solution incorporated:

• Subtle glassmorphic effects for the application background, paired with neutral main elements (off-white for light mode, slate gray for dark mode).
• Depth through shadows to lead users' eyes and create visual hierarchy.
• Rounded rectangles with minimal borders for a clean, contemporary aesthetic.
• User customization options including light/dark mode, sidebar & navigation bar customization, collapsible sidebar, and extensive data filtering.
• Interactive elements like tile-flipping widgets that reveal additional content or functionality.

For the technical implementation, I worked within the existing stack (Java backend, TypeScript frontend, SCSS/Bootstrap styling) while carefully integrating specialized libraries like Tempus Dominus for date picking and minisearch for fuzzy search capabilities. Finding libraries that provided standalone declaration files and compatible licensing was a significant challenge, but GitHub topic searches proved invaluable for identifying suitable options.

One of the standout features I developed was the widget tile-flipping functionality. This allows dashboard elements to either statically display content on the backside or dynamically load it when needed. The favorite activities widget, for example, lets users add up to six favorites on each side, while the event calendar widget flips to display details when a user selects dates.

Highlighted Features

Tempus Dominus datepicker implementation for selecting the 'As Of' date

Fuzzy search matching finds relevant activities and highlights previous searches

When focusing on the search bar, users first see their most recently searched activities with a dark search overlay

Customizable hotbar provides quick access to frequent actions through a dropdown grid panel

Results

The redesigned Transtar interface was officially unveiled at the April 2025 user conference, where it received overwhelmingly positive feedback from clients. The modernized look and enhanced functionality addressed the core pain points that had previously limited user adoption.

Key improvements included:

• More intuitive navigation through the customizable hotbar and improved search functionality.
• Reduced maintenance burden by replacing the dozen themes with a cohesive design system and light/dark modes.
• Enhanced dashboard utility with interactive widgets that provide immediate value and clear pathways into the application.
• Improved first impressions with a modern, professional aesthetic that better represents the software's capabilities.

I'm currently working on addressing any bugs or feedback that emerge during expanded testing. The project demonstrates how thoughtful design can transform a utility-rich enterprise application into something that's both visually appealing and more functional, ultimately helping users work more efficiently.