Interac UI UX Case Study | Responsive Web Design
UI UX design for Interac Content Hub
This UX case study explores how I helped Interac, one of Canada’s most recognized financial technology brands, modernize its digital experience through a responsive Content Hub redesign and a new Chatbot interface design. As the Senior UI/UX Designer under contract with Zulu Alpha Kilo Advertising, I evolved static wireframes into a flexible, scalable design system that elevated Interac’s storytelling and customer engagement across web and mobile. The project demonstrates how strategic UX design for financial services and conversational interface design can transform complex ecosystems into seamless, human-centered experiences.
Project Overview
Under contract with Zulu Alpha Kilo Advertising, I joined the Interac digital team as Senior UI/UX Designer to bring their new Content Hub and Chatbot experience to life. The goal was to unify Interac’s growing library of articles, press releases, and brand storytelling under a single digital destination while exploring how conversational UX could further enhance user engagement and accessibility. Working closely with both Zulu’s internal creative team and Interac’s marketing department, I was responsible for transforming approved wireframes into final, production-ready mockups for both desktop and mobile. The project was an opportunity to merge brand expression with technical precision — extending Interac’s existing design system into new components, layouts, and interactions that would support a more modern, responsive experience across platforms.
Problem Statement
The original wireframes provided a functional roadmap, but visually they were static and utilitarian. They lacked the fluidity and hierarchy that a rich, editorial platform required. The design challenge was twofold: modernize the experience to feel dynamic and human, and at the same time, integrate seamlessly within the existing Interac design system without overhauling it. The layout had to support multiple content types — from press releases and articles to videos, podcasts, and spokespeople profiles — while maintaining a clear, intuitive filtering system. With Interac’s established visual identity already in use across their main site, the Content Hub needed to extend that system thoughtfully rather than reinvent it.
Problem Solution
I approached both experiences through a single lens: cohesion and usability. For the Content Hub, I reimagined Zulu’s wireframes into dynamic visual layouts, introducing a modular card system that scaled effortlessly across breakpoints. Each module carried clear visual hierarchy, generous white space, and contextual tagging to create a sense of movement and discovery. I evolved the Interac design system to include filter bars, content cards, and responsive grid templates, all optimized for mobile and accessibility. For the Chatbot, I designed a clean, intuitive conversation panel that emphasized clarity and task efficiency. The visual tone borrowed from Interac’s established palette — yellow, charcoal, and white — while introducing a softer typographic rhythm to feel approachable. I also designed a new chat icon that reflected Interac’s geometric simplicity while signaling real-time assistance. The bot design followed UX best practices such as visible system status, clear affordances, and contextual help options. Both projects shared a commitment to consistency and scalability — two qualities that would allow Interac’s digital ecosystem to evolve without reinventing its visual foundations.
Creative Process
The design phase began with a deep dive into Interac’s design system and Zulu’s functional documentation. I mapped each wireframe element to reusable UI patterns that would remain visually consistent across devices, then refined spacing, typography, and accessibility contrast for clarity.
Collaboration was continuous — I worked in iterative sprints with Zulu’s design and development teams, validating every interaction and ensuring responsive integrity. After internal approvals, I presented to Interac’s marketing team, walking them through how the new visual language modernized the brand while staying grounded in its identity.
In parallel, I helped define chatbot flows and UI states, producing several layout options for desktop and mobile. The final design balanced simplicity and warmth, while the custom chat icon became a key visual marker of the experience.
Key Features & Flows
The Content Hub introduced a richer browsing experience with dynamic filtering by topic, content type, and category. The addition of pinned content areas empowered the marketing team to highlight priority stories without disrupting automated content flow. Each article connected to a spokesperson or author profile, creating depth and continuity across Interac’s storytelling ecosystem.
The Chatbot experience complemented this by offering users a more immediate path to support and discovery. The interface displayed real-time prompts, simple action buttons, and confirmation states that reflected best practices in conversational UX. Together, the Content Hub and Chatbot created a cohesive ecosystem — one that blended content exploration and interactive guidance under a unified digital language.
Outcomes
The final designs transformed Interac’s newsroom into a cohesive, responsive content hub that improved discoverability, engagement, and accessibility across devices. The Chatbot experience introduced a new layer of interaction that humanized digital support while staying true to Interac’s trusted brand.
By extending the design system and aligning closely with both agency and client teams, I helped deliver a digital foundation that balanced scalability, usability, and brand integrity — setting a benchmark for future Interac initiatives.
