Contact me
You can contact me using any convenient method below
You can contact me using any convenient method below
Redesign app and design system for fintech
How I designed a design system from scratch and a new UX, reducing credit agent training time from weeks to minutes
Key poins
Project overview
The product is a complex B2B fintech platform—the primary work tool for over a thousand credit specialists in offline stores across the country. The system acts as a broker, processing client credit applications and sending them for scoring to dozens of banks simultaneously.
Life-case: When a customer comes into a store and chooses to make a purchase on credit, they go to the credit specialist's desk, who in turn forms a credit application in this exact personal account to send to partner banks.
The project is a comprehensive redesign of the credit specialist's personal account aimed at accelerating application processing and expanding functionality.
IMPORTANT! Commercial information and confidential data in this project are protected by an NDA; therefore, some parts will be shown censored or in general terms.
Before
30 min
to process one application
After
5 min
to process one application
My Role
For one and a half years, as a senior designer, I was responsible for the complete redesign of a complex fintech platform for credit specialists. My primary task was the redesign of the credit specialist's personal account. The key outcome of my work was a redesign encompassing over 1000 screens and the creation of a comprehensive design system from scratch, complete with a documentation library.
My role included full responsibility for all design steps:
- Redesigning the credit specialist's personal account
- Designing and implementing the design system
- Conducting research with credit agents
- Leading the initiative to create UX copywriting guidelines
- Conducting design reviews and quality control of the implementation in production
- Presenting design solutions to the team and participating in joint task grooming sessions
Pain points
Non-scalable Architecture
Over 10 years, the product became bloated with a massive number of features that were chaotically added to an interface not originally designed for them. This led to "temporary" solutions that remained in place for years.
Critical UX Errors
The product was initially developed without a designer, and the user experience was not considered. Every step in the credit specialist's workflow contained a specific set of errors that impacted processing speed.
Lack of Design Consistency
Hundreds of screens looked and behaved differently, creating chaos not only for users but also for developers, who would get lost in the mockups and were unable to maintain a unified product look and feel.
Interface redesign
My design philosophy for this project was built on two principles. First, iterativeness: for each task, I created multiple options, analyzing their pros and cons to ultimately arrive at the most robust solution.
Second, "defensive" design. I constantly imagined the agent's real context: "a customer is sitting in front of them, store music is playing nearby, there are many distractions." The interface had to not just be user-friendly, but also protect the user from errors and prevent them from freezing up in a stressful situation.
Design system
Problem: Chaos and Constant Distractions
Initially, the project had a partial UI-kit that was more like a file of components. This file lacked descriptions and component systematization. I faced a situation where "front-end developers distracted me several times every day" with questions about the logic, states, and configurations of components.
During a period of lower workload, I took the initiative and dedicated a month to completely rebuilding the design system from scratch. My goal was not just to create a component library, but a complete product for internal use that would become the "single source of truth" for the entire team.
Design system
Atomic Design
Components were developed based on the Atomic design principle: they consisted of nested elements of varying complexity. Additionally, for the convenience of modifying complex components, special master-components were developed. These served as the main structural elements on which additional parent components were based, providing a detailed layout of element states and display. This principle reduces the time required to modify components without losing connections.
A prime example is the modal window. I created a single window "skeleton" (header, content area, button footer), into which any new content could be embedded while maintaining consistency and behavioral logic.
Design system
Documentation
Each component had detailed documentation separately for developers and for designers.
Developer Documentation: To ensure accurate and fast implementation, the documentation contained: a description of the component and its purpose, the component's structure, all states, behavior, and a layout of sizes and properties for enabling and disabling elements.
Design Documentation: This also had a component description, as well as all the elements and parts used. For designers, the documentation file was also the place for editing parent components. All components were strictly labeled by their name, and where necessary, rules and limitations for use were described.
Design system
Components catalog
The design system was divided into sections based on element logic, and within each section, items were arranged alphabetically for convenience. To make it easy for all team members to use, especially those with little Figma experience, I developed a component catalog.
This catalog is the first page, so upon opening the design system file, the user immediately sees its composition. The catalog contains the same sections as the design system itself and displays components with previews, their file names, descriptions, and a link to the component's page. Additionally, each section had its own internal catalog for that specific section.
User Research
All work on the redesign and system creation was based on a deep understanding of the user. I conducted several rounds of qualitative interviews with agents.
The first round of research was conducted as interviews with 10 credit specialists using Figma mockups. For this, I prepared realistic prototypes that simulated not only successful scenarios but also errors, to observe how an agent would behave in an unexpected situation. The interviews followed a pre-prepared script, and afterward, an analysis was conducted and a report was generated.
In addition to qualitative interviews, I also prepared surveys for a quantitative poll of the pilot group to gauge the general sentiment and attitude towards the completed redesign work.
Outcomes
- For the user: The most significant achievement was that the new interface did not require weeks of training. From the pilot group of 500 agents, we received feedback that "agents weren't confused and oriented themselves quite easily... it was understandable right from the get-go, without weeks of instructions."
- For the business: The time to process one application was reduced from 30-30 minutes to 5-10 minutes. Although this was a joint achievement with development, which optimized the architecture, it was the new UX that made this speed accessible and convenient for the agents.
- For the team: The design system became the "single source of truth," eliminated chaos, and significantly accelerated all processes related to interface design and development.
