Background

Simplii financial is one of the line of businesses for CIBC. It is a digital banking company that offers bank accounts, credit cards and lending accounts.

Simplii Financial have different platforms such as, public site, secure site, Native apps. Each platform has its own webframe work. For example, Simplii.com (Public site) is AEM(Adobe Experience Manager), Simplii online banking is (Ember.js) and it’s non-responsive.

As part of Platform Modernization project, Secure site Design team are changing the web framework from non-responsive (Ember) into responsive (Vue). This comes with creating a new design system that contains scalable and modernized components and patterns.

TIMELINE

November 2023 to March 2024

my role

Design Systems Manager & Contributor

business issue

Simplii Financial's old non-responsive Ember.js online banking platform requires migration to Vue.js for responsiveness, therefore it needs a new design system to modernize components and patterns as part of the Platform Modernization project.

Project Goals

• Design System Development: Having consistency and scalability across the platform
• Enhance UX: Improve the reponsiveness and usability of the platform
  
• Platform Modernization: Successfully transition the online banking platform to Vue.js

Design Analysis & Concept

There are some foundational elements that are shared globally in all Simplii platforms such as, colours, logos, icons and typography sizes. So I started by adding those colours, spacing as variables in Figma and creating frame templates and typography styles.

Then, I conducted a thorough audit of all platform components, identifying inconsistencies in design elements and seeing where I can improve them by unifying styles.

To get inspiration and insights on the best practices, I studied Google Material Design along with design systems from industry-leading companies such as Apple, IBM, and Airbnb.

Also, I reviewed CIBC components since Simplii developers use them as a foundation and base, and they customize only the CSS in their framework rather than building components from scratch

The Challenge I faced

The discrepancy between the design specifications in Figma and the actual implementation by developers during demo sessions.

Despite the effort I put into having detailed design guide, I frequently notices deviations in spacing, typography size, or overall UI. This happened because they might misunderstand the design specifications in dev mode in Figma or the limitations of dev environment.

To address the issues, I tried to communicate the differences by taking screenshots from their work and put it next it my figma design, annotating on them and sharing it as a PDF file with the dev lead so that it can be shared with all of the developers.

Atomic Design Methodologyaced

I structured our design system library using the principles of atomic design. Defining Atoms first, then Molecules and Organisms followed by templates and pages.

BEM Naming Conventions

In our design system, I adopted the BEM (Block, Element, Modifier) naming convention for better organization and consistency in naming CSS classes.

Using BEM naming conventions helps maintain a clear and consistent naming structure, making it easier to understand the purpose of each CSS class and enabling collaboration with developers.

States & Instances

I created the component states and instances within the design system, defining various states like default, hover, active, and disabled for components to ensure consistent user interactions.

I also make component instances that can easily swap icons and text, making it easier for designers and developers to work efficiently while keeping everything consistent and scalable across digital platforms.

Visual Design Components for Dev handoff

The development team utilized Figma’s Dev mode to access and inspect the design specifications. Regular collaboration with them was crucial.

We adopted an agile methodology, organizing our work into bi-weekly sprints. This allowed for iterative development, with each sprint focusing on specific components of the design system.

At the end of each sprint, developers presented demos of their work. This was an opportunity for me to provide immediate feedback.

Business impact

• Reducing engineers and designers rework up to %50
• Enhancing efficiency and consistency
  
• Providing standardized and reusable design components
• Increasing user trust by 30%

people I collaborated with

• Product manager (aligning on task priority and design decisions with business goals)
• UI designer (getting help for creating components) name
  
• Front-end developers (ensuring that designs are implemented correctly)
• QA (helping QA team for testing and validating functionality for different devices), name
• Design director  (getting sign off on design concepts)
• User researchers (gathering insights on user preferences and behaviors)
• Content writer (aligning on language and tone with the brand voice) name
• Accessibility (ensuring on meeting accessibility standards and reviewing developer text)