Frog

Building scalable design system for KGI China Development Financial’s Desktop platforms

At a glance
China Development Financial is a a Financial Holding Corporation in Taiwan, which provides banking, securities and venture capital services to investors.
I worked within Frog MDS Web Team to build KGI’s web platform design systems for all key susidiaries from the ground up—from creating fundamental design components, to combining and designing pattern libraries, to building and launching web team design systems on Zeroheight.
Role
Interaction Design - Design System
Team
2 product managers
1 UX engineer
1 design lead
2 Interaction Designer (including myself)
Duration
December 2021 - February 2022

We designed a pattern library that allows KGI’s design and development teams to build their banking platforms quickly and effectively.

THE CHALLENGE

KGI China Development Financial came to our team looking for a redesign for their 5 different tracks of banking platform design systems.  We used a platform-agnostic, component-based approach in our designs to ensure flexibility and scalability for future product roadmaps. The visual language we crafted focused on KGI’s branded banking experience across web and mobile.

Creating a Design System

As part of the Frog Design Language System team, I collaborated with pm and engineer in end to end design process for Card, Notice Bar Notification (aka toast), and Ratio Slider. I was also working with senior interaction designer on building pattern library with components that are easy to reuse, edit and combine together.

Frictionless Banking

My responsibility was to create a responsive design pattern library that would allow our small team to design and build over 100 brand websites quickly and effectively. In this case the end users of the product – a design system or pattern library – were our own design and development teams. My approach was to research existing design systems, understand patterns and involve the design and development team from the 'get-go' to participate with ideas and feedback.