Retail Reply — Complete Front-End Overhaul

Context and Idea

The company managed four independent sites, each with specific purposes and different requirements: the public portal as a showcase and information center, the corporate intranet for internal tools and communication, the online course platform for course catalog and enrollment management, and the digital booklet system where users could deposit money into virtual booklets. The external UI studio guided the visual redesign, while the internal team — of which I was co-lead — managed the entire frontend implementation, translating prototypes into performant interfaces compatible with a legacy technical architecture.

Challenges

• Integrate an external design system across four platforms with vastly different structures and code
• Maintain consistency and quality across layouts and workflows that are completely distinct
• Improve cross-browser compatibility (especially Safari and Firefox) using only vanilla JavaScript
• Manage critical features like digital booklet reloading while ensuring stability and clarity in interactions
• Implement smooth micro-animations despite the lack of modern frameworks
• Work with a build system based on Gulp, custom bundles, and legacy code

The Solution

The work was divided into modules, tackling the four sites in parallel while following common and coordinated guidelines with the UI studio. Design System Integration: Adaptation of layouts and components provided by the UI studio, maintaining consistency across sites while respecting their unique functional nature. Code Modernization: Progressive refactoring of legacy JS with module reorganization, logic simplification, Gulp bundle optimization, and reduction of code duplication across sites. Custom Micro-animations: Smooth transitions, hover states, and interactions written by hand in vanilla JavaScript, with optimized performance even on older devices. Digital Booklet System Enhancement: Clearer and more dynamic interfaces to guide users through virtual booklet deposits, with immediate feedback and validation messages. Testing and Compatibility: Extensive QA work to ensure visual and functional uniformity across Chrome, Firefox, Safari, and Edge.

Approach

• Coordination with external UI studio for design system integration
• Modular work breakdown across four sites in parallel with unified guidelines
• Progressive refactoring of legacy JavaScript for improved maintainability and performance
• Custom micro-animations developed in vanilla JavaScript with optimized performance

Key Features

• Design system integration across four distinct platforms
• Custom micro-animations developed in vanilla JS
• Refactoring and optimization of legacy code
• Modernization of digital booklet system interface
• Advanced cross-browser support (Chrome, Firefox, Safari, Edge)
• Gulp-based workflow with custom bundling and optimizations

Development and Technologies

Vanilla JavaScript for custom logic and animations. Gulp for task automation and bundling with custom system. Legacy architecture supported and progressively modernized. HTML5 / SCSS with preprocessors and optimizations. Manual testing and minimal automations integrated into the Gulp workflow. Direct collaboration with UI studio to integrate prototypes and design guidelines.

Results

• Modern, consistent, and more intuitive interfaces across all platforms
• Tangible improvement in user experience through smooth and lightweight micro-animations
• Reduced cross-browser issues and greater overall stability
• Cleaner, more modular, and maintainable code
• Simplified and more reliable digital booklet deposit process

Conclusion

A complex project, with lots of sites and lots of people involved, that asked for discipline both in the code and in the organisation. Between the new design, the animations, and the refactoring, the end result was a set of more modern, more consistent platforms — proof that, with method, even legacy code can be brought back into shape.