Design System & UI Kit for M2P
M2P has a extensive range of products that fall into payments, lending and banking categories. Initially
crafted by developers who, while proficient, may not have prioritized user considerations, these
products faced consistent challenges, resulting in a not so favorable scenario . Despite their
persistent shortcomings, this predictability proved advantageous. Consequently, the development and
design processes became time-intensive, incurring elevated maintenance costs.
It wasn't a possibility for us to use a off-the-shelf existing design systems for the
financial products due to unique considerations that involve regulatory requirements, complex user
interactions, and the risks involved in financial transactions.
- M2P has acquired 3 different entities which again had their product lines. Goal was to deliver unique and unified design language across all products of M2P along with the acquired products.
- Acquisitions were reluctant of changes to their existing product experience.
- Objectively carry out a research internally on the products to identify the issues due to lack of a design system, and assess the impact on cost and time factors.
-
Team Engagement
- Educate development and tech teams on how a design system aligns with broader business goals.
- Highlight benefits: faster time-to-market, consistent branding, improved user satisfaction, and scalability.
- Emphasize workflow streamlining, consistency, and accelerated development.
-
Ensure stakeholders feel heard, foster a sense of ownership and reduce the resistance to change.
- Communicate with stakeholders to gather perspectives on design system implementation.
- Inform the teams about the potential but temporary declines in productivity.
- Convince and request additional allocation of time and resources to implement design system.
- Understand the customozation requirements in terms of regulatory requirements for various geographies.
- Above all, secure budget allocations for resources required for effective design system implementation.
- Identify the right talent set to plan, design, develop and implement a design system.
While existing design systems can provide inspiration and some foundational elements, creating a custom design system is often necessary due to the distinctive nature of the fintech domain. Both the stake holder insights and and desk research supported this finding. Some key points we considered were
- The security and compliance to be given the highest priority while building components and the kit.
- The design components should align with security best practices.
- Design system should directly contribute in building high level of confidence and trust, conveying the reliability, transparency and offer a sense of security.
- To support effective and meaningful data visualization
- Include educational elements within the design system to help users understand financial processes, terms, and features in the right context.
Over a duration of 6 months with a lot of collaboration with a lot of other teams, we successfully built M2P’s design system and rolled it out for testing on 2 products. This brought a lot of constructive feedback, and additional requirements and it also created the much needed impact.
- Slashed repetitive and monotonous tasks for designers by a substantial 70%, allowing them to concentrate on addressing significant challenges. . This transformation extended to front-end development as well.
- The speed of B2B customizations improved, delighting clients.
- A gradual shift towards more consistent product behavior is underway, albeit still a work in progress.
- Witnessing the advantages of the Design System, other products have voluntarily begun adopting it into their workflows without any persuasion from our end.