Design Systems
& UI Kit
for Fintech
My Role
Lead Designer,
Collaborator
Duration
Planned - 6 months
Actual - 9 months
Design Team Size
3 (Researcher,
Junior designers)
Key Responsibilities
Led design and development
Established and maintained design systems and UI kits
Ensured smooth design system adoption by actively gathering stakeholder perspectives and managing change
Overview
Fintech's diverse suite of payments, lending, and banking products were initially built with a primary focus on functionality. Though proficient, this later presented significant usability challenges. This resulted in a predictable yet unfavorable user experience, consequently leading to time-consuming product development and high maintenance costs for designers.
Because of the unique regulatory, security and complexities of financial products, we had to create our own design system instead of using off-the-shelf systems.
Key Challenges
The challenge involved integrating the design language across M2P's existing products as well as products in three newly acquired entities, aiming for a unified and cohesive user experience.
Acquisitions were reluctant of changes to their existing product experience.
We traveled to different branches to understand the newly acquired businesses better and hear from its product owners. This was so we could get their support and make the change easy.
How?
Problem Identification & Impact Assessment
Conducted an internal product research to objectively identify issues stemming from the absence of a design system and quantify their impact on cost and time.
Team Engagement & Advocacy
Educated development and tech teams on the strategic alignment of a design system with broader business objectives, highlighting key benefits such as faster time-to-market, consistent branding, improved user satisfaction, and enhanced scalability.
Emphasized the advantages of workflow streamlining, design consistency, and accelerated development cycles.
Proactively engaged stakeholders to gather perspectives on design system implementation, fostering a sense of ownership and addressing potential resistance to change.
Informed the teams about the potential but temporary declines in productivity.
Understood and documented customization requirements specific to regulatory needs across various target geographies.
Secured budget allocations for the required talent and resources to successfully plan, design, develop, and implement the design system.
Insights from Research
Recognizing the unique nature of the fintech domain, we found that while existing design systems offered some initial guidance, a tailored approach was often essential. Both stakeholder input and our research confirmed this. Key factors we considered were:
Prioritizing security and compliance across all components and adhering to best practices.
Building trust and confidence through design elements that conveyed reliability, transparency, and security.
Facilitating effective and meaningful data visualization.
Incorporating educational elements within the system to enhance user understanding of financial processes.
Evolution of Design system
Over a collaborative six-month period, we successfully built and launched M2P's design system, initially rolling it out for testing across two key products. This phase yielded valuable constructive feedback, identified additional requirements, and ultimately demonstrated the impactful nature of the design system.
Evolution of UI Kit
Crafted UI Kit with covering extensive use cases to cater multiple product requirements across M2P and acquired products.
Help designers to make use of the appropriate block in a informed manner
Promote consistency by channelise everything only through Design system
Taking away visual decisions made by every single designer
Keep even less experienced designers from making any obvious mistakes that hinder the product
The UI Kit enabled us the designers and our developers to focus more on solutioning the problems than building the bricks every time.
A quick snapshot of the Designed components
IMPACT
The implementation of the design system significantly reduced repetitive design tasks by 70%, freeing designers to focus on higher-impact challenges and streamlining front-end development.
B2B customization time was halved, leading to enhanced client satisfaction.
The product is steadily moving towards more consistent user experiences.
Recognizing its value, other product teams have independently integrated the design system into their workflows.