Designing a fintech SaaS platform with research, better UX, and a scalable design system

Designing a fintech SaaS platform with research, better UX, and a scalable design system

Designing a fintech SaaS platform with research, better UX, and a scalable design system

Tallied is a unified platform for launching and managing consumer and commercial credit card programs, offering secure and scalable solutions for brands and fintechs.

Tallied is a unified platform for launching and managing consumer and commercial credit card programs, offering secure and scalable solutions for brands and fintechs.

Tallied is a unified platform for launching and managing consumer and commercial credit card programs, offering secure and scalable solutions for brands and fintechs.

Summary

Summary

  • Worked closely with Philip, a senior designer with 20+ years of experience, focusing on perfect craftsmanship, detailed documentation, and UX best practices.

  • Worked closely with Philip, a senior designer with 20+ years of experience, focusing on perfect craftsmanship, detailed documentation, and UX best practices.

  • Collaborated with another product designer to align our designs with a pre-defined design system, ensuring consistency and scalability across the platform.

  • Collaborated with another product designer to align our designs with a pre-defined design system, ensuring consistency and scalability across the platform.

  • Collaborated with another product designer to align our designs with a pre-defined design system, ensuring consistency and scalability across the platform.

  • Designed and structured the platform from the ground up, ensuring a seamless and intuitive user experience for managing credit card programs.

  • Designed and structured the platform from the ground up, ensuring a seamless and intuitive user experience for managing credit card programs.

  • Created wireframes, prototypes, and high-fidelity designs, refining user flows and interactions based on feedback and usability testing.

  • Created wireframes, prototypes, and high-fidelity designs, refining user flows and interactions based on feedback and usability testing.

  • Balanced business goals, technical constraints, and user needs, delivering a functional, scalable, and user-friendly product for financial platforms

  • Balanced business goals, technical constraints, and user needs, delivering a functional, scalable, and user-friendly product for financial platforms

Role

Role

Product Designer

Product Designer

Duration

Duration

8 Months

8 Months

Period

Jun, 2022 - Jan, 2023

Period

June, 2023 - June, 2024

First Phase

Understanding

Research

Ideation

Second Phase

UX Audit

Low Fidelity Wireframe

Key Features Design

Third Phase

Atomic Design System

Design Implementation

Testing

Belmin Salkica

Philip McKay

Maria Jose Mizraji

First Phase

Understanding

Research

Ideation

Second Phase

UX Audit

Low Fidelity Wireframe

Key Features Design

Third Phase

Atomic Design System

Design Implementation

Testing

Belmin Salkica

Philip McKay

Maria Jose Mizraji

First Phase

Understanding

Research

Ideation

Second Phase

UX Audit

Low Fidelity Wireframe

Key Features Design

Third Phase

Atomic Design System

Design Implementation

Testing

Belmin Salkica

Philip McKay

Maria Jose Mizraji

Team

Philip McKay

Philip McKay

Head of Product Design

Zain Lakhani

Zain Lakhani

Director of Engineering

Co-founder @ Lightci

Maria Jose Mizraji

Maria Jose Mizraji

Senior Product Designer

Belmin Salkica

Belmin Salkica

Senior Product Designer

The Problem

Tallied had no existing platform, requiring us to build everything from scratch. We needed to design a scalable, user-friendly system for managing complex credit card programs while ensuring seamless navigation and usability for fintechs, brands, and marketplaces.

Tallied had no existing platform, requiring us to build everything from scratch. We needed to design a scalable, user-friendly system for managing complex credit card programs while ensuring seamless navigation and usability for fintechs, brands, and marketplaces.

Tallied had no existing platform, requiring us to build everything from scratch. We needed to design a scalable, user-friendly system for managing complex credit card programs while ensuring seamless navigation and usability for fintechs, brands, and marketplaces.

The Solution

We built Tallied’s platform from scratch, designing a clear, scalable system that simplifies credit card program management. With intuitive navigation and structured workflows, we made it easy for fintechs, brands, and marketplaces to launch and manage their programs efficiently.

We built Tallied’s platform from scratch, designing a clear, scalable system that simplifies credit card program management. With intuitive navigation and structured workflows, we made it easy for fintechs, brands, and marketplaces to launch and manage their programs efficiently.

We built Tallied’s platform from scratch, designing a clear, scalable system that simplifies credit card program management. With intuitive navigation and structured workflows, we made it easy for fintechs, brands, and marketplaces to launch and manage their programs efficiently.

Application Rate Detailed Dashboard

Application Rate Detailed Dashboard

Cards Detailed Dashboard

Card Holder Dashboard

Cardholder Profile

Cardholder Profile

Cardholder Profile

Cardholder Profile My Card

Cardholder Profile My Card

Cardholder Profile My Card

Cardholder Balances & Payments

Edit Travel Notice

Edit Autopay

Mobile Designs

We ensured every screen was optimized for mobile, maintaining consistency with the web platform while enhancing usability for smaller screens. Each feature was carefully adapted to provide a seamless experience, ensuring clear navigation, touch-friendly interactions, and intuitive workflows.

We ensured every screen was optimized for mobile, maintaining consistency with the web platform while enhancing usability for smaller screens. Each feature was carefully adapted to provide a seamless experience, ensuring clear navigation, touch-friendly interactions, and intuitive workflows.

Understanding

Understanding the App and Its Complexity

Understanding the App and Its Complexity

Understanding the App and Its Complexity

In the early phases of the project, we dedicated significant time to research and discovery to fully understand the platform’s purpose and define its core functionalities.

In the early phases of the project, we dedicated significant time to research and discovery to fully understand the platform’s purpose and define its core functionalities.

In the early phases of the project, we dedicated significant time to research and discovery to fully understand the platform’s purpose and define its core functionalities.

Through extensive meetings with stakeholders and in-depth analysis of industry needs, we identified key features that would shape the product.

Through extensive meetings with stakeholders and in-depth analysis of industry needs, we identified key features that would shape the product.

Through extensive meetings with stakeholders and in-depth analysis of industry needs, we identified key features that would shape the product.

Since Tallied was being built from the ground up, this foundational work was essential to ensure we designed a scalable, user-friendly system that aligned with business goals and provided a seamless experience for fintechs, brands, and marketplaces.

Since Tallied was being built from the ground up, this foundational work was essential to ensure we designed a scalable, user-friendly system that aligned with business goals and provided a seamless experience for fintechs, brands, and marketplaces.

Since Tallied was being built from the ground up, this foundational work was essential to ensure we designed a scalable, user-friendly system that aligned with business goals and provided a seamless experience for fintechs, brands, and marketplaces.

Design System

Optimizing a Tailwind-Based Design System for Seamless Collaboration

Optimizing a Tailwind-Based Design System for Seamless Collaboration

Optimizing a Tailwind-Based Design System for Seamless Collaboration

For this project, we worked with an existing Tailwind design system, which provided a structured foundation but also introduced unique challenges. Since the system was already implemented on the front end, we had to optimize and adapt it rather than create components from scratch.

For this project, we worked with an existing Tailwind design system, which provided a structured foundation but also introduced unique challenges. Since the system was already implemented on the front end, we had to optimize and adapt it rather than create components from scratch.

For this project, we worked with an existing Tailwind design system, which provided a structured foundation but also introduced unique challenges. Since the system was already implemented on the front end, we had to optimize and adapt it rather than create components from scratch.

This constraint accelerated our process, as developers had predefined components ready to use, ensuring a smoother transition between design and development.

This constraint accelerated our process, as developers had predefined components ready to use, ensuring a smoother transition between design and development.

This constraint accelerated our process, as developers had predefined components ready to use, ensuring a smoother transition between design and development.

However, working within a predefined system required extreme precision. Instead of designing freely, we carefully combined and modified existing components to create cohesive and functional UI patterns. While this approach limited flexibility, it significantly increased efficiency, allowing us to iterate and deliver results much faster than usual.

However, working within a predefined system required extreme precision. Instead of designing freely, we carefully combined and modified existing components to create cohesive and functional UI patterns. While this approach limited flexibility, it significantly increased efficiency, allowing us to iterate and deliver results much faster than usual.

Collaboration was key to making this process work. With multiple designers involved, we had to maintain constant communication, ensuring we were aligned and avoiding unnecessary conflicts in the design system. To minimize errors, we divided tasks strategically, each focusing on different sections of the platform.

Collaboration was key to making this process work. With multiple designers involved, we had to maintain constant communication, ensuring we were aligned and avoiding unnecessary conflicts in the design system. To minimize errors, we divided tasks strategically, each focusing on different sections of the platform.

Through this experience, I gained valuable insights into large-scale design systems, learned how to collaborate efficiently in a team environment, and mastered the balance between creativity and technical constraints in a highly structured framework.

Through this experience, I gained valuable insights into large-scale design systems, learned how to collaborate efficiently in a team environment, and mastered the balance between creativity and technical constraints in a highly structured framework.

Key Features

Enhancing Core Features for a Seamless User Experience

Enhancing Core Features for a Seamless User Experience

Enhancing Core Features for a Seamless User Experience

During the redesign process, we placed a strong emphasis on iterative improvements and competitor analysis. Understanding how similar products approached key user flows helped us identify best practices and avoid common pitfalls. We analyzed competitor dashboards, automation flows, and user management structures to refine our own approach.

During the redesign process, we placed a strong emphasis on iterative improvements and competitor analysis. Understanding how similar products approached key user flows helped us identify best practices and avoid common pitfalls. We analyzed competitor dashboards, automation flows, and user management structures to refine our own approach.

During the redesign process, we placed a strong emphasis on iterative improvements and competitor analysis. Understanding how similar products approached key user flows helped us identify best practices and avoid common pitfalls. We analyzed competitor dashboards, automation flows, and user management structures to refine our own approach.

Through multiple iterations, we tested different design solutions, making adjustments based on feedback and usability insights. Each iteration brought us closer to an optimal experience, ensuring that our final designs were both intuitive and efficient. This process allowed us to build a platform that not only met industry standards but also provided a unique and seamless experience tailored to user needs.

Through multiple iterations, we tested different design solutions, making adjustments based on feedback and usability insights. Each iteration brought us closer to an optimal experience, ensuring that our final designs were both intuitive and efficient. This process allowed us to build a platform that not only met industry standards but also provided a unique and seamless experience tailored to user needs.

Through multiple iterations, we tested different design solutions, making adjustments based on feedback and usability insights. Each iteration brought us closer to an optimal experience, ensuring that our final designs were both intuitive and efficient. This process allowed us to build a platform that not only met industry standards but also provided a unique and seamless experience tailored to user needs.

Tailored Dashboards for Managers and Cardholders

Tailored Dashboards for Managers and Cardholders

Tailored Dashboards for Managers and Cardholders

The Tallied platform was designed with two distinct user experiences: the Program Dashboard for managers and the Cardholder Dashboard for individual users. Each served a unique purpose in streamlining credit card program management.

The Tallied platform was designed with two distinct user experiences: the Program Dashboard for managers and the Cardholder Dashboard for individual users. Each served a unique purpose in streamlining credit card program management.

The Tallied platform was designed with two distinct user experiences: the Program Dashboard for managers and the Cardholder Dashboard for individual users. Each served a unique purpose in streamlining credit card program management.

The Program Dashboard provided a high-level view for managers, offering insights into key metrics like application rates, transaction volumes, and financial performance. This allowed decision-makers to monitor trends, track approval rates, and optimize credit card programs efficiently.

The Program Dashboard provided a high-level view for managers, offering insights into key metrics like application rates, transaction volumes, and financial performance. This allowed decision-makers to monitor trends, track approval rates, and optimize credit card programs efficiently.

The Program Dashboard provided a high-level view for managers, offering insights into key metrics like application rates, transaction volumes, and financial performance. This allowed decision-makers to monitor trends, track approval rates, and optimize credit card programs efficiently.

Reaching the final design for the Program Dashboard was a process of continuous iteration and refinement. We explored multiple variations, testing different layouts, data visualizations, and user interactions to find the most effective structure.

Reaching the final design for the Program Dashboard was a process of continuous iteration and refinement. We explored multiple variations, testing different layouts, data visualizations, and user interactions to find the most effective structure.

Reaching the final design for the Program Dashboard was a process of continuous iteration and refinement. We explored multiple variations, testing different layouts, data visualizations, and user interactions to find the most effective structure.

Through competitor analysis and user feedback, we identified key pain points and optimized the dashboard to present critical metrics in a clear and actionable way. By fine-tuning navigation, improving data hierarchy, and ensuring consistency across components, we created a dashboard that provides users with real-time insights while maintaining an intuitive and scalable design.

Through competitor analysis and user feedback, we identified key pain points and optimized the dashboard to present critical metrics in a clear and actionable way. By fine-tuning navigation, improving data hierarchy, and ensuring consistency across components, we created a dashboard that provides users with real-time insights while maintaining an intuitive and scalable design.

Through competitor analysis and user feedback, we identified key pain points and optimized the dashboard to present critical metrics in a clear and actionable way. By fine-tuning navigation, improving data hierarchy, and ensuring consistency across components, we created a dashboard that provides users with real-time insights while maintaining an intuitive and scalable design.

Cardholder Dashboard

Cardholder Dashboard

Cardholder Dashboard

On the other hand, the Cardholder Dashboard, seen here, focused on individual users managing their credit and transactions. This view prioritized clarity, showing current balance, statement information, and a transaction history with advanced filtering options.

On the other hand, the Cardholder Dashboard, seen here, focused on individual users managing their credit and transactions. This view prioritized clarity, showing current balance, statement information, and a transaction history with advanced filtering options.

On the other hand, the Cardholder Dashboard, seen here, focused on individual users managing their credit and transactions. This view prioritized clarity, showing current balance, statement information, and a transaction history with advanced filtering options.

By enabling users to easily track spending, set up autopay, and manage rewards, we improved the overall financial experience while maintaining a seamless connection between cardholders and program managers.

By enabling users to easily track spending, set up autopay, and manage rewards, we improved the overall financial experience while maintaining a seamless connection between cardholders and program managers.

By enabling users to easily track spending, set up autopay, and manage rewards, we improved the overall financial experience while maintaining a seamless connection between cardholders and program managers.

Card Holder Profile

Card Holder Profile

Card Holder Profile

For each feature, we explored multiple versions, wireframed different approaches, and tested variations to ensure we were addressing the most crucial parts of the app.

For each feature, we explored multiple versions, wireframed different approaches, and tested variations to ensure we were addressing the most crucial parts of the app.

For each feature, we explored multiple versions, wireframed different approaches, and tested variations to ensure we were addressing the most crucial parts of the app.

Through this process, we identified pain points, validated solutions, and made data-driven improvements. In the end, we focused on the most impactful changes—those that truly enhanced usability and streamlined workflows.

Through this process, we identified pain points, validated solutions, and made data-driven improvements. In the end, we focused on the most impactful changes—those that truly enhanced usability and streamlined workflows.

Through this process, we identified pain points, validated solutions, and made data-driven improvements. In the end, we focused on the most impactful changes—those that truly enhanced usability and streamlined workflows.

Card Holder Card

Card Holder Card

Card Holder Card

This is the Cardholder Profile Page, designed to provide users with an intuitive and secure way to manage their personal information. The page centralizes key details such as name, contact information, and address, ensuring everything is easily accessible in one place.

This is the Cardholder Profile Page, designed to provide users with an intuitive and secure way to manage their personal information. The page centralizes key details such as name, contact information, and address, ensuring everything is easily accessible in one place.

This is the Cardholder Profile Page, designed to provide users with an intuitive and secure way to manage their personal information. The page centralizes key details such as name, contact information, and address, ensuring everything is easily accessible in one place.

To enhance security and privacy, sensitive data fields are masked while still being editable when needed. We incorporated clear action buttons for editing details, verifying email, and managing addresses, allowing users to quickly update their information without unnecessary friction.

To enhance security and privacy, sensitive data fields are masked while still being editable when needed. We incorporated clear action buttons for editing details, verifying email, and managing addresses, allowing users to quickly update their information without unnecessary friction.

To enhance security and privacy, sensitive data fields are masked while still being editable when needed. We incorporated clear action buttons for editing details, verifying email, and managing addresses, allowing users to quickly update their information without unnecessary friction.

Card Holder Balances

Card Holder Balances

Card Holder Balances

The Balances & Payments section was designed to give cardholders a clear and organized view of their financial status. It provides an overview of their current balance, available credit, and upcoming payments.

The Balances & Payments section was designed to give cardholders a clear and organized view of their financial status. It provides an overview of their current balance, available credit, and upcoming payments.

The Balances & Payments section was designed to give cardholders a clear and organized view of their financial status. It provides an overview of their current balance, available credit, and upcoming payments.

Users can manage their payment methods, set up autopay, and adjust billing preferences with ease. The design prioritizes clarity and accessibility, ensuring users can quickly understand their financial standing and take action when needed.

Users can manage their payment methods, set up autopay, and adjust billing preferences with ease. The design prioritizes clarity and accessibility, ensuring users can quickly understand their financial standing and take action when needed.

Users can manage their payment methods, set up autopay, and adjust billing preferences with ease. The design prioritizes clarity and accessibility, ensuring users can quickly understand their financial standing and take action when needed.

Results

Results and Key Takeaways

Results and Key Takeaways

Being part of this project was an incredible learning experience, especially working under Philip’s leadership. His ability to guide, inspire, and communicate complex ideas with clarity was truly outstanding. His approach to leadership wasn’t just about directing but empowering—he had a unique way of motivating the team in a positive and constructive manner, which made a lasting impact on me.

Being part of this project was an incredible learning experience, especially working under Philip’s leadership. His ability to guide, inspire, and communicate complex ideas with clarity was truly outstanding. His approach to leadership wasn’t just about directing but empowering—he had a unique way of motivating the team in a positive and constructive manner, which made a lasting impact on me.

Being part of this project was an incredible learning experience, especially working under Philip’s leadership. His ability to guide, inspire, and communicate complex ideas with clarity was truly outstanding. His approach to leadership wasn’t just about directing but empowering—he had a unique way of motivating the team in a positive and constructive manner, which made a lasting impact on me.

His experience, coming from working with major companies like Sony, Adobe, and Oracle, was evident in the way he structured the design process and mentored us through every challenge. I learned so much from him, not just about UX and design systems, but also about team dynamics, leadership, and collaboration at the highest level.

His experience, coming from working with major companies like Sony, Adobe, and Oracle, was evident in the way he structured the design process and mentored us through every challenge. I learned so much from him, not just about UX and design systems, but also about team dynamics, leadership, and collaboration at the highest level.

His experience, coming from working with major companies like Sony, Adobe, and Oracle, was evident in the way he structured the design process and mentored us through every challenge. I learned so much from him, not just about UX and design systems, but also about team dynamics, leadership, and collaboration at the highest level.

Beyond Philip’s influence, the entire design team played a crucial role in shaping this project. Working alongside Maria and the rest of the team was a rewarding experience, as we tackled complex design problems together and refined our workflows to deliver the best possible product.

Beyond Philip’s influence, the entire design team played a crucial role in shaping this project. Working alongside Maria and the rest of the team was a rewarding experience, as we tackled complex design problems together and refined our workflows to deliver the best possible product.

Beyond Philip’s influence, the entire design team played a crucial role in shaping this project. Working alongside Maria and the rest of the team was a rewarding experience, as we tackled complex design problems together and refined our workflows to deliver the best possible product.

Redesigning the game with a focus on better usability, clearer insights, and smoother gameplay flow.

Unfortunately, the project didn’t continue as long as we initially expected. Due to internal changes in leadership and company priorities, the decision was made to pause the design department and shift focus towards backend development.

Unfortunately, the project didn’t continue as long as we initially expected. Due to internal changes in leadership and company priorities, the decision was made to pause the design department and shift focus towards backend development.

Unfortunately, the project didn’t continue as long as we initially expected. Due to internal changes in leadership and company priorities, the decision was made to pause the design department and shift focus towards backend development.

The company needed to strengthen its infrastructure before expanding the platform further, which meant design efforts were temporarily put on hold. While it was disappointing to see the design phase take a break, the experience itself was invaluable.

The company needed to strengthen its infrastructure before expanding the platform further, which meant design efforts were temporarily put on hold. While it was disappointing to see the design phase take a break, the experience itself was invaluable.

The company needed to strengthen its infrastructure before expanding the platform further, which meant design efforts were temporarily put on hold. While it was disappointing to see the design phase take a break, the experience itself was invaluable.

This project pushed me to grow in ways I hadn’t before. It refined my ability to work within strict system constraints, collaborate seamlessly in a team setting, and balance technical feasibility with great user experience. Even though the journey was cut short, the impact of the work we did and the lessons I learned will stay with me for a long time.

This project pushed me to grow in ways I hadn’t before. It refined my ability to work within strict system constraints, collaborate seamlessly in a team setting, and balance technical feasibility with great user experience. Even though the journey was cut short, the impact of the work we did and the lessons I learned will stay with me for a long time.

This project pushed me to grow in ways I hadn’t before. It refined my ability to work within strict system constraints, collaborate seamlessly in a team setting, and balance technical feasibility with great user experience. Even though the journey was cut short, the impact of the work we did and the lessons I learned will stay with me for a long time.

"Belmin's knack for design is fantastic. He is trained well in using formal design systems well, which is very hard to find. He trained and mentored junior designers on our team and really went above and beyond. Anyone team lucky enough to be able to work with Belmin will have a great time and get an amazing value for their money."

Zain Lakhani

CEO & Founder, Lightci

"Belmin's knack for design is fantastic. He is trained well in using formal design systems well, which is very hard to find. He trained and mentored junior designers on our team and really went above and beyond. Anyone team lucky enough to be able to work with Belmin will have a great time and get an amazing value for their money."

Zain Lakhani

CEO & Founder, Lightci

"Belmin's knack for design is fantastic. He is trained well in using formal design systems well, which is very hard to find. He trained and mentored junior designers on our team and really went above and beyond. Anyone team lucky enough to be able to work with Belmin will have a great time and get an amazing value for their money."

Zain Lakhani

CEO & Founder, Lightci

Have a Big Idea? Let’s Bring It to Life!

Have a Big Idea?
Let’s Bring It to Life!

Have a Big Idea? Let’s Bring It to Life!

Let’s build something incredible together!

Schedule a free consultation call, or reach out to me on LinkedIn or via Email to discuss how I can help.

hello@belmin.design

Let’s connect

© 2025 Belmin Salkica

Let’s build something incredible together!

Schedule a free consultation call, or reach out to me on LinkedIn or via Email to discuss how I can help.

hello@belmin.design

Let’s connect

© 2025 Belmin Salkica

Let’s build something incredible together!

Schedule a free consultation call, or reach out to me on LinkedIn or via Email to discuss how I can help.

hello@belmin.design

Let’s connect

© 2025 Belmin Salkica