Citi: All-round Fintech UX Practitioner
Citi Velocity is a web-based analytics tool in the Institutional Investor’s Global Fixed Income Research Poll. It delivers electronic access to Citi's capital markets services across Asset class management in Equities, Futures, FX, Rates, Credit, Commodities, Securitized, Municipals, Prime and Research, and Analytics tools covering portfolio builder and all-packed chart visualisation and analysation. Within the Velocity team, I am responsible for modular design in Equities, FX, Rates, Securitized, and Analytics Charting design.
CitiVelocity:
What we do: https://icg.citi.com/icghome/what-we-do/citivelocity
Work coverage —
My work at Citi mainly covers three aspects:
Task-driven design: Lead modules design for CitiVelocity, a web-based enterprise cross-asset trading platform, covering real-time trading data visualization for Asset Class, Equities, FX, and Analytics category;
Propose design for new tools including portfolio management and market data overview page;
Design iteration on existing page to onboard new features, and refactor to new design system;
Design system adoption: Responsible for Citi's new design system ICG migration, and external JS library Highchart and Ag-grid adoption. Established 10+ standard React components in support of team usage;
Collaborated with global business analyst BA and stakeholders to define and manage requirements, FE team to implement design, and QA team to perform UI quality and responsive checks.
Some of my featured works (password protected):
Take aways —
Interpret the requirements with the eye of a business analyst and critique with the perspective of a designer.
A fundamental requirement in the fintech industry is to comprehend the terminology and principles. Unlike other consumer-oriented industries, where stakeholders collaborate to design user workflows, designers in fintech often take a lead role. They typically work with a fixed, explicit workflow that is determined by an intermediary such as a business analyst. It is uncommon to conduct qualitative research directly with end-users, such as traders, which creates gaps in observing how stakeholders interact with the interface and identifying areas for improvement through usability testing. Consequently, designers must possess a thorough understanding of the context, prioritize information presentation, and deliver valuable designs. To achieve this, designers must immerse themselves in the requirements and think like both a professional trader and a designer. Superficially interpreting requirements is insufficient.
Efficiency is of utmost importance, with usability and aesthetics following suit.
In the realm of professional FX and rates trading platforms, optimizing velocity and efficiency takes top priority. The key to achieving this is by providing traders with a data-intensive dashboard that offers a wealth of information, empowering them to manipulate data and make decisive trading decisions. However, designing such a platform presents significant challenges for user experience, as it must cater to a professional audience that is well-versed in keyboard shortcuts, financial term abbreviations, and other efficient means of operation. Our analytics tools are a testament to this commitment to efficiency, as traders can type chart tickers with code commands, configure settings, and schedule batch market reports in a burdensome yet streamlined manner.
Advocate for accessibility and embrace a responsive mutli-screen size scenario
The universality and accessibility of the web are its greatest strengths, as it allows potential users to access it in any circumstance. As a designer of a trading platform, it is critical to ensure that the design meets the W3C accessibility initiative and ADA compliance standards. Accessibility holds significant value for our stakeholders, as it ensures accuracy in data interpretation, readability of charts, and handling of corner cases, among other things. From my experience, ensuring accessibility in data visualization is a formidable challenge. On one hand, we strive for high contrast among charts, backgrounds, and fonts. On the other hand, strict color contrast restrictions can lead to a considerable reduction in the color palette, making it challenging to distinguish between colors that convey critical meanings. A substantial portion of my web accessibility thinking is indebted to Shixie, an IBM designer. I strongly recommend delving into her body of work.
Leverage encapsulated cells but be aware of their boundaries
Citi's development cycle is characterized by agility, streamlining, and automation, and our CitiVelocity platform is built on a scalable web architecture that enables diverse market sales and fixed income teams to work within a uniform development environment. To deliver a successful design, it is not enough to be familiar with the internal development cycle. The ability to leverage external frameworks to enhance the design is also highly valued. Our Institutional Client Group Design System (ICGDS), Highcharts for interactive charts, and Ag-grid for rich data grids are enterprise-level design systems that we use. Delivering a high-quality page with designated behaviors marked in mock requires a comprehensive understanding of these tools' APIs, performance, and limitations.