CITI GROUP

Citi Velocity® Charting is an advanced data strategy and online visualization analysis platform. It integrates data from various Citi Custody and Fund products through a Citi Private Cloud-based Big Data infrastructure, offering online functionality and visualizations for free-form interrogation of data and integration with other software and systems.

Velocity

"agory transformed Citi Velocity® Clarity into a user-friendly, efficient charting tool, enhancing data visualization and user workflows, resulting in a 30% increase in the user base and a 20% rise in application sales.
— it all looks very sexy too."

KENNY BARNES VP, SALES AT CITY VELOCITY - NEW YOUR& HEAD OF BARRY'S X

95%

User Satisfaction: Positive feedback from users.

40%

Efficiency: Reduction in task completion time.

50%

Adoption Rate: Faster adoption compared to previous versions.

60%

Error Reduction: Decrease in data visualization errors.

CLIENT
Citi Group

LOCATION
NY, New York

SERVICES
RESEARCH
UX DESIGN
UI DESIGN
BRANDING
ENGINEERING
QUALITY ASSURANCE

CHALLANGES

Data Volume and Complexity: The Citi Velocity Charting App needed to manage over a million data series daily. Ensuring this massive amount of data was both legible and usable required innovative visualization techniques to break down and present key information such as plots produced, duplicated, lost, and lag time.
Time Sensitivity: In the fast-paced financial sector, real-time data representation was crucial. The challenge was to display highly accurate minute-by-minute data, enabling users to make quick and informed decisions without delays.
User Workflow Integration: Understanding and integrating the workflows of diverse user types, from analysts to executives, was essential. Each group had unique needs, necessitating a flexible yet robust design that could cater to all without sacrificing functionality.
Visual Design and Usability: Creating a visually appealing yet functional interface was a significant challenge. The design needed to simplify complex data visualizations, making them easy to understand without overwhelming the user.
Stakeholder Alignment: Aligning the product design with the expectations of Citi product owners and senior executives was crucial. Balancing their vision for future development with the immediate needs of end-users and the competitive market landscape required careful coordination and communication.

By addressing these challenges, Agory Design successfully delivered a user-friendly, efficient, and visually compelling charting app that met the diverse needs of Citi's user base.

SOLUTIONS

User Workflows Research & Analysis

Research: We conducted comprehensive research to understand user behaviors, needs, and motivations. This involved analyzing existing tasks, workflows, and user feedback to assess the impact of the current design. By identifying pain points and areas for improvement, we gained valuable insights into how users interacted with the charting app and what changes would enhance their experience.
Stakeholder Engagement: We collaborated closely with Citi product owners and key stakeholders to align the design with their goals and future development plans. This engagement helped us understand Citi’s vision for the product, the competitive landscape, and what would make the new version successful. Regular discussions ensured that stakeholder expectations were met and that the design addressed both current and future needs.

Design and Development

Sketches and Wireframes: To focus on interactions and chart functionalities, we began with hand-drawn sketches and wireframes. This allowed us to explore different chart types and their contextual uses without getting distracted by colors or styling. By iterating on these low-fidelity designs, we could refine the core interactions and ensure that the visualizations would be intuitive and effective.
Conceptualization: From the wireframes, two designers created distinct dark and light theme concepts. This provided users with options for look and feel, catering to different preferences and ensuring that the final design would be visually appealing to a broad audience. Each concept emphasized clarity and usability, with thoughtful color schemes and typography.
Task-focused Layout: We designed the new layout around common user tasks, simplifying the UI and enhancing the UX. This task-focused approach ensured that users could easily access relevant information and complete their tasks efficiently. By prioritizing key functions and streamlining workflows, we made the app more intuitive and user-friendly.
Advanced Features: We added advanced features to enhance the app’s functionality. Users could now manage tasks more efficiently and handle complex scenarios, such as back testing. The inclusion of transfer widgets and other tools provided consistent and efficient ways to manage tasks, improving overall productivity and user satisfaction.

By combining thorough research, stakeholder collaboration, and thoughtful design, Agory Design delivered a robust and user-centric charting app for Citi Velocity, significantly improving the user experience and meeting the needs of diverse users.