Kobble

Product UI/UX Lead

6 months

Figma

Project


The card issuing landscape was riddled with inefficiencies and outdated legacy systems, making it a cumbersome process for fintech companies.

At Yondr Money, we recognized that the traditional methods were not just inconvenient; they were barriers to innovation.

Our challenge was to transform the card issuing experience by surfacing the tedious processes and long pitfalls that often delay getting a card program to market. We aimed to leverage our own experiences with Yondr and Shouta to create a solution that would help clients skip the same issues we faced, ultimately changing the game through superior user experience.

The Approach


Leveraging our battle-tested knowledge, we architected Kobble with cutting-edge tech:

Microservices Architecture: Built a highly scalable, cloud-native platform using microservices, allowing for rapid iterations and seamless integration with various banking systems.

API-First Design: Implemented a robust API layer, enabling easy integration with client systems and third-party services. RESTful APIs with OAuth 2.0 for secure authentication became our bread and butter.

Mastercard Certification: Achieved Mastercard certification for issuing, integrating their APIs and adhering to stringent security protocols. This wasn't just a checkbox – it was our golden ticket to the big leagues.

Machine Learning for Fraud Detection: Implemented advanced ML algorithms to detect and prevent fraudulent activities in real-time.

The Game plan

Our approach was methodical and user-centric:

DISCOVERY PHASE 


• Defined product scope by co-creating Kobble features and ecosystem.

• Conducted extensive research, including qualitative evaluations and consultations with domain leaders.

• Explored domain-agnostic best practices in Enterprise Service design.

• Identified real customer pain points from our Yondr and Shouta market experiences.

DEFINE PHASE


• Crafted a comprehensive roadmap of services

• Established design principles aligned with brand extension and vision

• Created a governance model and success metrics

DESIGN PHASE


• Built on the Mantine design system, leveraging its flexibility and robust component library.

• Developed a custom design system for brand customization, ensuring adaptability across various client identities.

• Focused on functional design that felt familiar yet innovative, drawing inspiration from leading B2B enterprise UX (e.g., Figma's user role management).

• Implemented white-labeling capabilities, allowing businesses to showcase their brand identity seamlessly.

• Integrated KPI tracking and cost management tools for enhanced business control

Note: Due to Non-Disclosure Agreement (NDA) restrictions, I cannot share the final designs publicly. However, I'd be happy to discuss the design process and outcomes in more detail in a private setting.

Viability

The Technical Foundation

While my focus was on UI/UX, I worked closely with our technical team to ensure our design aligned with and leveraged our robust technical infrastructure:

Microservices Architecture: Our cloud-native platform using microservices allowed for rapid iterations, seamless integration with systems and scaling of services as we grow.

Mastercard Certification: We achieved Mastercard certification for issuing, integrating their APIs and adhering to stringent security protocols.

Machine Learning for Fraud Detection: Exploration of ML algorithms to detect and prevent fraudulent activities;

DIfferenciators

Unique Value Propositions

While my focus was on UI/UX, I worked closely with our technical team to ensure our design aligned with and leveraged our robust technical infrastructure:

White-Label Flexibility: Developed a system allowing clients to easily apply their branding, including logos, color schemes, and dark/light mode options

Seamless Manual Journeys: Designed intuitive processes for tasks like card expiry management, including bulk reminders and renewals

KPI Dashboard: Created a comprehensive analytics suite for real-time performance tracking and cost optimization

IMPACT

Our design strategy for Kobble transcended conventional UI/UX approaches, embodying a strategic fusion of form and function tailored for the B2B card issuing landscape. By prioritizing absolutely functional design, we crafted an interface that strikes a delicate balance between familiarity and innovation.

The white-label capabilities we implemented empowered businesses to showcase their unique brand identities, fostering a sense of ownership and customization crucial in the B2B space. Our focus on surfacing KPIs and integrating robust tracking mechanisms provided clients with unprecedented control over their operations and costs.

Perhaps most significantly, we reimagined mundane tasks like card expiry management into seamless, intuitive journeys. This approach not only streamlined operations but elevated the entire user experience, transforming Kobble from a mere tool into an indispensable business ally. Through this strategic design thinking, we didn't just solve existing problems – we anticipated and eliminated potential pain points, setting a new standard for B2B fintech solutions.

The Takeaway

In the rapidly evolving fintech landscape, the intersection of user experience and robust technology is where true innovation thrives. Kobble stands as a testament to the power of combining deep industry knowledge with cutting-edge design principles and advanced technical infrastructure.

By transforming our own challenges from Yondr and Shouta into innovative solutions, we've created a platform that doesn't just meet current needs but anticipates future demands.

The success of Kobble demonstrates that in fintech, the winners aren't just those with the most advanced technology, but those who can make that technology accessible, intuitive, and indispensable to their clients.

We aimed to push the boundaries of what's possible in card issuing, Kobble isn't just keeping pace with the industry – it's actively shaping the future of B2B fintech solutions.