Building a Foundation of Trust: A Scalable Design System for Rogers Bank

The core challenge was to create a digital platform that could balance the established Rogers brand identity with the unique needs of a financial services arm. This required building a complete design system and brand identity from scratch, as I was given no prior digital guidelines to work from. The platform had to feel trustworthy and professional, a goal that demanded a thoughtful approach to design in a complete vacuum.

The goal was to design a visually refined website built upon a sustainable foundation that I would define and create. This was defined by three core objectives:

• Intuitive Information Architecture to guide users effortlessly through a complex new product.
• A comprehensive design system built from scratch to ensure future scalability and consistency.
• A visually distinct yet brand-aligned identity that would establish trust for Rogers Bank.

Information Architecture & UX Design

I started by architecting the entire site structure, organizing complex financial and regulatory content into simple, self-serve sections. This foundational work was crucial to minimize customer confusion and reduce the need for call centre support. I then designed and tested user flows that streamlined the application process.

Scalable UI Framework Development

With no existing digital guidelines to draw from, I created a comprehensive, scalable UI framework for the website from the ground up. While leveraging Rogers' high-level corporate brand guides, I tailored the visual elements to fit the banking industry's need for trust and clarity, effectively defining the bank's digital-first aesthetic. This included a full suite of reusable components (buttons, forms, panels) to ensure consistency and accelerate future development, which included a number of back-end features, landing pages, and microsites.

• Refined Digital Presence: Delivered a polished, user-friendly website that established Rogers Bank as a credible and trustworthy player in the financial services industry.
• Scalable Design System: Built a comprehensive design framework from scratch that streamlined future updates and ensured brand consistency across new pages and features.
• Intuitive User Experience: Improved application completion rates by simplifying workflows and creating a clear, engaging navigation system.
• Long-Term Value: The platform's robust foundation supported years of ongoing enhancements, adapting to evolving business needs and customer expectations. As Rogers' primary brand guidelines evolved, so too did Rogers Bank, through a distillation of those components into the language of the bank.

Launching a sub-brand within a corporate giant requires a delicate balance of borrowing and building. This is especially true when starting with a blank slate. You must borrow high-level brand equity from the parent company while building a distinct experience from scratch that meets the specific expectations of the new sector. This project was a lesson in that strategic negotiation between brand consistency and contextual relevance.

Core Strengths Featured in This Case Study

• Creativity and Visual Design: Crafted a refined digital platform from scratch, balancing brand alignment with a unique identity for the bank.
• Strategic Information Architecture: Organized complex content into an intuitive structure, minimizing user friction and improving accessibility.
• Design System Expertise: Developed scalable UI components from the ground up, ensuring design consistency and operational efficiency where no system existed before.
• User-Centered Focus: Delivered an engaging experience that met customer needs while achieving business goals.