Who: People using the IBM Carbon Design System
What: Need guidance on time based complex charts in carbon style
Why: Several products require a gantt chart so their needs to be consistency across all 80+ products that may use a gantt chart
Impact: 30+ external hits on the gantt chart figma kit as well as +3000 IBM designers have access to apply it in their designs
Duration:
May 2022 - February 2024
Role:
Co-creator
Tools:
Mural, Figma
Overview
The Gantt chart component is a very unique design use case where the goal was to create a component and design guidance for what a Gantt chart data visualization would be for the Carbon Design System. This was a side project that made contributions to with only 2 hours a week. This was started and delivered by me. Me and one other designer worked on this from concept to being a Figma kit with two unique components. I worked on prioritizing issues to solve and what features to build, planned out presentations, designed the y-axis cards and timeline, and organized meetings across different IBM teams.
To learn more about the Carbon Design System check it out here:
What is a Gantt Chart
A Gantt chart is a project management tool that illustrates work completed over a period of time in relation to the time planned for the work. It typically includes two sections: the left side outlines a list of tasks, while the right side has a timeline with schedule bars that visualize work.
Deliveries and Playbacks
This work includes:
Gantt Chart card component
This includes all information needed about the task that is displayed in the task bar
Gantt chart task bar component
This is the visual representation of the task. The task bar is the width matches the timespan the task is scheduled for.
Playbacks
Creating a complex chart is not a small feat especially from designers that are not part of Carbon design team. We had numerous playbacks sharing our progress and mentorship from design principals to guide and give of feedback. Many other designers wanted to hear our story on how 2 product designers were able to create a highly complex data visualization for the Carbon Design System. We presented our story to more than 100 designers across IBM.
Release
We published our Figma kits and guidance on Friday Febuary 2, 2024
Reflection
It was different to design a data visualization that is widely known and to be part of style and structure to match a design system. The designers I work with become my users as well as doing extensive research on data visualization structures.
I learned a lot and grew with this project. I became a project manager and developed the skills to plan a project roadmap and decide what are feasible tasks to get done within the timeline we had. I became highly proficient in Figma and Figma file organization as well as content writing when creating design guidance. I was able to connect and work with designers who founded IBM’s Carbon Design System and highly decorated leads.
If I created another pattern or component for a design system I would set up a roadmap and set up meetings gather requirements on what is needed in order for the first release and then created deadlines. I would also set up deadlines to routinely test with other designers.