Background

What's Simplii Financial?

Simplii Financial, a digital banking line of CIBC, operates multiple platforms, including a non-responsive Ember.js online banking site. As part of the Platform Modernization project, the secure site is transitioning to Vue.js for responsiveness, requiring a new, scalable design system.

Timeline November 2023 – July 2024

Problem

Non-responsive

Simplii Financial’s outdated Ember.js platform was non-responsive and inconsistent in design. Migrating to Vue.js required a modernized design system to improve responsiveness, usability, and scalability.

Solution

Scalable Design System Development

01

Global elements There are some foundational elements that are shared globally in all Simplii platforms such as, colours, logos, icons and typography sizes. I started to add them as variables, templates, and styles in Figma.

02

Component Audit I Identified inconsistencies across platforms and unified design elements.

03

Best Practices I studied Google Material Design, Apple, IBM, and Airbnb systems for inspiration.

Colour variables
Text colour variables
Font size variables
Layout size variables
Grid system
Spacing sizes
Spacing variables

Atomic Design & Naming Conventions

I organized the system using atomic design methodology: atoms, molecules, organisms, templates, and pages.

for consistent CSS class organization, I adopted BEM (Block, Element, Modifier) naming conventions

Component States & Instances

I created component states (default, hover, active, disabled) and instances for easy customization and scalability.

Light mode buttons
Dark mode buttons
Account cards

Dev Collaboration

We used Figma’s Dev Mode for efficient handoff. I addressed developer misunderstandings by annotating discrepancies and sharing feedback in PDFs. Our team followed agile bi-weekly sprints for iterative design and feedback loops.

Light mode links
Dark mode links

Challenges

Implementation Gaps

Developers often misinterpreted design specs, leading to spacing and typography inconsistencies. As the solution, Ihared annotated screenshots comparing Figma designs with implementations to bridge gaps.

Input fields
Action menu

Business impact

01

Reduced rework for engineers and designers by 50%.

02

Enhanced platform efficiency, consistency and user trust by +30%.

03

Delivered reusable and standardized components across platforms.

Global messages

Collaboration

Product Managers Aligned on priorities and business goals.
‍Front-end Developers Ensuring on execution and design implementation.
‍QA Team Supported Testing team for functionality
‍Accessibility Experts Met WCAG standards
‍Content Writers Ensuring on brand voice consistency