Problem & Goal
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 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.
Solution & Process
- Strategic UI Alignment
- Evolved the custom design of RogersBank.com by incorporating elements from Rogers.com, including a consistent header and unified visual styles.
- Balanced the needs of the banking platform with the parent brand’s identity, ensuring the user interface reflected Rogers’ broader branding vision while preserving functionality specific to banking customers.
- Reverse Engineering the Design System
- Without access to Figma files or official brand guides, I relied on Rogers.com as a style source, reverse-engineering their styles to replicate and adapt design elements for the RogersBank platform.
- This included recreating typography, colors, buttons, and layout structures while ensuring consistency across mobile and desktop versions.
- Enhancing Design for Future Unification
- Designed with scalability in mind, ensuring the new RogersBank.com UI could transition smoothly into the Rogers CMS ecosystem.
- Addressed challenges stemming from evolving brand standards by building a flexible design framework capable of accommodating updates from the parent brand.
The 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.
- Improved Customer Experience: Provided users with a consistent and familiar interface across banking and other Rogers services, enhancing trust and usability.
Core Strengths Highlighted in This Case Study:
- Strategic Problem-Solving: Reimagining a standalone brand identity to align with a parent brand's evolving omnichannel strategy.
- Attention to Detail and Subtlety: Reverse-engineering styles to create a seamless user interface without formal brand assets.
- Creativity and Adaptability: Working flexibly within constraints, including limited access to design files, while delivering a polished and cohesive product.
- UI Design Expertise: Building a scalable, visually aligned design system that bridges standalone and unified brand experiences.
