What's FIS Global?

FIS Global is at the heart of the commerce and financial transactions that drive the global economy. As a leader in fintech, we are dedicated to helping businesses and communities thrive by enhancing the way the world pays, banks, and invests, serving over 20,000 clients and more than one million merchant locations across 130 countries.

What was the challenge?

The challenge involved creating a comprehensive design system for the mobile application, which included developing standard templates specifically tailored for both iOS and Android platforms. This process required a deep understanding of the unique guidelines and user interface conventions for each operating system to ensure consistency and usability across both environments. My focus was not on the visual aspects, but rather on establishing a robust framework that would enable designers to efficiently create new features and products. By providing clear guidelines for component usage, interactions, and layouts, I aimed to empower the design team to maintain a cohesive user experience while allowing them the flexibility to innovate within the established parameters. This strategic approach not only streamlined the design process but also enhanced collaboration between designers and developers, ultimately contributing to the success of the mobile application.

Strategic Approach to Developing a Design System

To initiate a new design system, I implemented a strategic approach that began with conducting an expansion design audit to identify existing components and pinpoint any gaps in functionality and consistency. This comprehensive audit involved analyzing current design elements across various products, including interfaces, workflows, and user interactions. By evaluating these elements, I was able to gather insights into usability issues, branding discrepancies, and overall design coherence. This foundational understanding allowed me to establish benchmarks for quality and consistency, ensuring that all future designs would align with user needs and business goals.

The audit not only highlighted areas for improvement but also served as a resource for best practices. I documented findings and recommendations, which provided a clear roadmap for the design process. This systematic evaluation enabled informed decision-making regarding which components to retain, refine, or develop anew, ultimately ensuring that the design system would be both effective and scalable.

Next, I defined clear design principles and guidelines to ensure a cohesive visual and interactive language throughout the system. These foundational principles served as a reference for all design decisions, promoting uniformity in user experiences. They encompassed aspects such as color palettes, typography, spacing, and interaction patterns, all aimed at creating a seamless and engaging user journey. This strong foundation not only guided the design process but also fostered collaboration among team members, ensuring that everyone was aligned with the overarching vision of the design system.

‍

Foundation

The foundation of the design system was built upon clearly defined design principles and guidelines, ensuring a cohesive visual and interactive language. These principles encompassed essential elements such as color palettes, typography, iconography, spacing, and grid systems, creating a unified aesthetic that strengthened brand identity. By establishing these foundational aspects, I created a framework for consistent design across all products, which not only enhanced user familiarity but also facilitated smoother collaboration among team members. This robust foundation empowered designers and developers to make informed decisions when developing new features or products, promoting scalability and adaptability within the design system. To ensure inclusivity, accessibility was seamlessly integrated into the UI kits using Stark, a tool that identifies and addresses accessibility issues in real-time. Stark enabled me to assess color contrast ratios and visual elements for compliance with WCAG standards, enhancing the user experience for all.

‍

‍

‍

UI Kit

UI kits play a crucial role in the overall effectiveness of a design system, offering designers and developers a comprehensive set of pre-designed components that streamline both the design and development process. These kits include key elements such as buttons, forms, navigation bars, icons, and other UI components, all meticulously crafted to align with established design principles and guidelines. This collaborative effort produced a versatile and scalable toolkit that empowered teams to efficiently create user-friendly interfaces while maintaining a cohesive visual language across products.

‍

‍

‍

Documentation

Documentation is a critical component of any design system, serving as a comprehensive guide that outlines the principles, components, and usage standards for designers and developers. In creating the design system, I ensured that the documentation was clear, concise, and easily accessible, providing detailed information on each UI component, including specifications, design patterns, and best practices. This thorough documentation not only facilitated onboarding for new team members but also promoted consistency in the design and development process. By including examples, usage guidelines, and code snippets, the documentation acted as a valuable resource that empowered teams to implement the design system effectively. Additionally, I incorporated a feedback loop within the documentation process, allowing for continuous updates and improvements based on user insights and evolving project needs. This commitment to thorough documentation ensured that the design system remained a living resource, adaptable to the changing landscape of user experience design.

‍

‍

Building an Intuitive Financial App Experience

To create an intuitive user experience for a financial application, I leveraged reusable components to streamline key functionalities such as transfers, account management, bill payments, deposits and others flows. My focus was on ensuring that the design was modular, allowing for seamless integration and navigation throughout the app.

To help all FIS designers build mobile apps, I meticulously tested each component, enabling them to assemble pages using Figma’s auto-layout, pulling components from the library like building Lego, piece by piece. I also created templates to help FIS designers build workflows faster. This approach not only simplified the process of constructing flows but also ensured that users could complete their financial tasks efficiently. By validating each component, I aimed to help FIS designers create a cohesive experience that would enhance user engagement and satisfaction across the app.

‍

Prototype

I created interactive prototypes that illustrated key functionalities, allowing stakeholders to explore the app's features before implementation. This iterative process facilitated valuable feedback, enabling me to refine the design based on real user interactions and preferences. By simulating the user journey through the app, I ensured that the flow was intuitive and aligned with user expectations. The prototypes served not only as a tool for validation but also as a collaborative platform for discussions among team members, ultimately contributing to a more cohesive and effective final product.

Final Reflections on the Project

The successful delivery of the financial application involved meticulous coordination among cross-functional teams, ensuring that design and development efforts were aligned throughout the process. As part of this effort, the UX/UI design team conducted training sessions on how to effectively use Figma and leverage components to create mockups and prototypes. This ensured that all team members were equipped with the necessary skills to contribute to the project. I facilitated regular communication with stakeholders, providing updates on progress and incorporating their feedback to refine the final product. By leveraging the design system and prototypes, I ensured that developers had clear guidelines and assets to implement features effectively. Rigorous testing was conducted to identify any usability issues before the final release, allowing for quick iterations and improvements. This collaborative approach not only enhanced the overall quality of the application but also ensured that it met the needs of team and stakeholders alike, leading to a successful launch and positive user reception.