A Design System that maps foundations, components, patterns, and tools to be scaleable and reusable for a B2B/B2C fintech product used for multiple clients within the banking industry. Password to Figma files: Kagy
.png)
Consumer Studio is a robust online banking platform developed by FIS Global, designed for consumer interactions across web, mobile, and native applications on iOS and Android. The product provides a user-friendly interface, enabling customers to manage their banking needs efficiently. It incorporates various features that cater to the requirements of modern banking, including account management, transaction history, and secure communication. The project required organized documentation and version control to clarify the core functionalities of the product and its customizations.
The objective is to reverse engineer a cohesive design system for an existing product, consolidating multiple Adobe XD files from various designers into a unified framework. This initiative aims to establish a single design system within figma that promotes consistency across all teams, enhances collaboration with Quality Assurance to uphold design standards, and provides a clear "true north" for future development. Additionally, the design system will incorporate rebranding capabilities to accommodate the product's one-to-many nature, ensuring flexibility and adaptability for diverse user needs.
We prioritized creating a modular and rebrandable framework, similar to CSS, to accommodate varying client needs. Drawing on our previous experience in development, my co-designer and I leveraged the Atomic Design Methodology, formulated by Brad Frost, to break down features into fundamental components—atoms, molecules, and organisms. We also incorporated principles from Bootstrap frameworks to ensure consistency and maintainability.
To align the team with this vision, we started by educating them on Atomic Design concepts and providing concrete examples that demonstrated how this methodology could be effectively integrated with our existing assets.
On the Atomic Level we started with text styles, colors, and icons. This meant we screenshot each state in the environment and then laid it out within Figma. Then we began to reverse engineer entire features in every state so we could break them down into the previously mentioned atoms, molecules, and organisms.
While working through each of these features we needed to also map the colors, text, icons, all to components so that we could assist clients with branding the product to their company brands. This meant testing each state to make sure it was mapped correctly and creating mapped styles for things that didn't already have them.
.gif)
.gif)
1) Decomposing Big Steps
In tackling large-scale projects, we discovered the importance of breaking down extensive tasks into manageable components. Early on, we found that vague instructions like "Build it and Map it out" led to inconsistencies. To address this, we adopted Atomic Design as our foundational methodology. This approach resonated well with CSS principles, facilitating the mapping of tokens and variables within our components.
2) Promoting Effective Communication
With multiple designers contributing to various features simultaneously, the potential for overlapping work was significant. To mitigate this, we established a prioritized list of essential elements and components to create first, such as Navigation, Headers, Footers, Buttons, Toggles, Input Fields, and Icons. This proactive strategy ensured that foundational components were ready before moving on to more complex features. Additionally, we organized designers by pairing them with similar tasks, utilizing real-time updated roadmaps to visualize who was working on what.
3) Implementing "Harvest Boards" for Custom Work
To streamline custom design requests, we developed "harvest boards" using Figma. Whenever a custom design was needed, it was logged on the board, complete with linked work and relevant tags. This allowed team members to easily search for and reference existing designs related to specific features, such as "CD Withdrawal" or "Account Enrollment," maximizing the efficiency of our design efforts.
4) Emphasizing Progress Over Perfection
A crucial lesson learned throughout this project was that sometimes "done" is better than "perfect." While this may seem contradictory in UX design, we recognized that to maintain momentum, it was essential to complete tasks and refine them in later stages. This approach kept the project progressing without unnecessary delays.
5) Fostering Adaptability
Throughout the duration of the project, we faced numerous challenges where solutions were not immediately clear. Initially, this uncertainty led to stagnation, which hindered the team's progress. However, by embracing adaptability, I learned to pivot my approach, enabling the team to move forward. This lesson reinforced our earlier insights about the necessity of change in process to maintain progression.
This project underscored the importance of structured methodologies, effective communication, collaborative tools, and adaptability in UX design. By implementing these strategies, we not only improved our workflow but also delivered a cohesive user experience across various features.
.png)
