Rogers Bank Design System
•
Finance

Unifying a Sub-Brand: Aligning RogersBank.com with the Rogers.com Design System

Rogers Bank needed to align its standalone website with the parent Rogers.com brand to create a cohesive omnichannel experience.

Role:
UI Design. I led the UI redesign, reverse-engineering the parent brand's design system without formal assets to create a unified visual language.
Result:
Successfully aligned the two platforms, creating a seamless user experience and positioning the bank's site for future integration into the corporate CMS.
View Site:
www.rogersbank.com

The Problem

Initially designed as a standalone entity, RogersBank.com had a distinct visual identity separate from the parent Rogers brand. While this approach supported the bank's independence at launch, the growing emphasis on an omnichannel experience created a need for greater alignment with Rogers.com.

The Goal

The goal was to visually unify RogersBank.com with the parent brand's design language, paving the way for a seamless eventual integration into the Rogers CMS system while maintaining usability and compliance.

My Process & Design

  1. Reverse-Engineering the Design System
    1. Without access to Figma files or official brand guides, I used the live Rogers.com site as the single source of truth. I meticulously reverse-engineered their styles—replicating typography, colors, button states, and layout structures—to create a new, aligned design system for RogersBank.com.
  2. Strategic UI Alignment for Unification
    1. I strategically evolved the custom design of RogersBank.com by incorporating the reverse-engineered components, such as a consistent header and unified visual styles. I designed with future scalability in mind, ensuring the new UI could transition smoothly into the main Rogers CMS ecosystem when the time came.
Screenshots and other assets available by request

Solution & Results

  • Unified Brand Experience: Successfully aligned RogersBank.com with Rogers.com, creating a cohesive experience that reflected the parent brand's design language and values.
  • Omnichannel Readiness: Positioned the bank's platform for future integration with Rogers' CMS system, supporting the broader omnichannel strategy.
  • Design Process Innovation: Demonstrated adaptability by reverse-engineering styles and building a scalable, future-proof design system without access to formal tools or guides.

Lessons Learned

A design system is a process, not just a library. This project was a lesson in evolving a brand in reverse, aligning a legacy product with a parent company's identity without any formal assets. It demonstrated that through meticulous observation and a systematic approach, you can create pixel-perfect consistency and prepare a product for future technical integration, proving that constraints can often foster incredible resourcefulness.

Let’s create experiences that matter.
© 2017-2025 Sprucepop Inc.