Line Chart
"How might we craft a user-friendly line chart component within the Design System team?”
Project Overview
We made 13 reusable components, like the Line Chart, which played a key role in reaching a total of $45 million in cost savings.
My Responsibilities
User Research, Component & Usage Guideline, Accessibility Guidelines, Usability Testing.
Tools
Figma, FigJam, Jira, SharePoint
Teams
Content Writer,
UX Researcher,
Lead UX Designer (Myself),
ADA Compliance Team
Duration
2 Sprints
<span data-metadata=""><span data-buffer="">Introduction
Say hello to our Line Chart in the Citi Bank design world! This chart is like the Picasso of numbers, turning data into a visual masterpiece. Need it to match Citi’s sleek style? Easy peasy! It’s not just a chart; it’s like a personal assistant for your financial info, making it easy to understand and even chat with. And guess what? It’s super friendly to everyone, ensuring everyone can get the lowdown on their finances effortlessly. Spice up your banking experience with the Line Chart – where your data becomes a work of art, Citi style!
<span data-metadata=""><span data-buffer="">Project Goal
As a researcher and designer on the Design System team, I was responsible for crafting a user-friendly line chart component. This component allows domain designers to effortlessly customize it to meet their specific project needs.
Research & Understand
Learn more about data visualization, designer’s needs & challenges. Also to understand the existing available components and development restrictions and the potential improvements.
Competitors Analysis
I started reading about different types of Line Charts, different usability scenarios, other competitors using Line Chart component already, and key features to create user-friendly line chart that any designer can make it fit perfectly into their project.
Cross-Team Collaboration
I started connecting with Designers and Creative Directors across different teams to see their current Line Chart work. Also, what works for them, and what doesn’t, will give a guide on how to set up a good base for creating a new component from scratch. Moreover, I connected with Developers to understand technical restrictions.
Acceptance Criteria
I initiated the documentation of acceptance criteria by synthesizing insights from research and fostering cross-team collaboration. This approach ensures comprehensive coverage of all crucial aspects related to the line chart.
<span data-metadata=""><span data-buffer="">Design Pain Points (I lost sleep over)
- How can I structure the design to allow for future modifications, enabling us to switch it to a Bar Chart, Gantt Chart, and more in upcoming projects?
- How can I ensure that it adapts to various screen sizes for a responsive design?
- How can I ensure it's customizable to suit the needs of designers?
- What is the recommended number of data points to include?
- What is the optimal number of graph lines for a designer to use in their project?
<span data-metadata=""><span data-buffer="">Problem Solving
After understanding the problem, focus on addressing the pain points through the solution.
Ideation Phase
Initially, I documented the essential features for easy modification through property panels. Subsequently, I crafted foundational grid lines, positioning the X-axis at the bottom and the Y-axis on both the left and right sides. I then tailored the design to dynamically resize according to diverse screen sizes, incorporating customizable options. These options include the ability to hide/unhide the X and Y Axes, as well as selecting the number of values for both axes in the property panel
Easy peasy, right? Well, it was a nightmare that woke me up in the middle of the night and made me scream, ‘Yes, I think that’s the solution!’ in the middle of the movie at the cinema. However, the next day, when I tried it, it didn’t work. Back to square one. I watched many YouTube tutorial videos and even bought a course on Udemy to figure out the solution.”
Result
After battling through epic nights and working days that felt like a never-ending sitcom, I proudly unveil my masterpiece – a Line Chart component for Citi’s design system that’s not only responsive but also winks at designers with a friendly “I got you, buddy!” vibe.
The outcome was not just a Line Chart component but a design system asset that exceeded expectations. Its versatility allowed it to be seamlessly integrated into various projects, providing a consistent visual language across the organization. The project’s success was not just measured by the completion of the task but by the positive impact it had on the entire design system at Citi.
<span data-metadata=""><span data-buffer="">Usage Guidelines
The usage guidelines are like a designer’s go-to manual for each component. They cover everything from how it’s structured, its flexibility, accessibility considerations (Keyboard interactions, screen readers, etc), to various ways it can be used in different scenarios, and more.
Live Example
Excited for the final result? Below is the example created for Citi’s Wealth project using our Line Chart component.
Project Achievements
We birthed 13 superhero components, including the mighty Line Chart, that swooped in and saved the day, helping us rack up a jaw-dropping $45 million in cost savings. Our code is the unsung hero in the world of finance—tightening belts and fighting spreadsheet crime, one reusable component at a time! 🦸♂️💻💰
This project became a cornerstone for the team, showcasing my ability to go above and beyond the immediate requirements. The Line Chart component not only met the current needs but also laid the foundation for future enhancements. Its successful integration into multiple projects served as a testament to its usability and the effectiveness of our design system. This achievement was not just about creating a component; it was about contributing to the strategic growth and adaptability of Citi’s design ecosystem.
Some key takeaways from
this project.
Design Leadership and Collaboration. This experience highlighted my capacity to tackle complex design challenges, collaborate effectively with cross-functional teams, and deliver solutions that have a lasting positive impact.
Importance of Proactive Communication. Being a good communicator is important. I realized that talking about things early and solving problems quickly is really helpful. It doesn’t mean you’re not good at your job; it shows you’re responsible and good at talking with others.