The TLDR ↓
The TLDR ↓
Process starts here ↓
Process starts here ↓
This is the end of the case study!
Thank you for reading!
This is the end of the case study!
Thank you for reading!
© DISHA SIKARIA 2025
© DISHA SIKARIA 2025
© DISHA SIKARIA 2025
© DISHA SIKARIA 2025
8+ TYPES OF DATA SPEC'D
8+ TYPES OF DATA SPEC'D
8+ TYPES OF DATA SPEC'D
8+ TYPES OF DATA SPEC'D
30,000+
USERS IMPACTED
30,000+
USERS IMPACTED
30,000+
USERS IMPACTED
30,000+
USERS IMPACTED
Data Visualization
Design System for Finance
Data Visualization
Design System for Finance
Data Visualization
Design System for Finance
Data Visualization
Design System for Finance
Designed assets & documentation for 8 chart types that minimized design-to-engineering handoff time.
Designed assets & documentation for 8 chart types that minimized design-to-engineering handoff time.
Designed assets & documentation for 8 chart types that minimized design-to-engineering handoff time.
Designed assets & documentation for 8 chart types that minimized design-to-engineering handoff time.
Context
Context
Context
Context
Product Design Internship
May - Aug 2025
Kensho is S&P Global’s hub for AI innovation and transformation.
Product Design Internship
May - Aug 2025
Kensho is S&P Global’s hub for AI innovation and transformation.
Product Design Internship
May - Aug 2025
Kensho is S&P Global’s hub for AI innovation and transformation.
Product Design Internship
May - Aug 2025
Kensho is S&P Global’s hub for AI innovation and transformation.
Role
Role
Role
Role
Collaborated with Design Team, Engineers, PMs, and researchers.
Researched design system best practices.
Wrote extensive documentation to ensure engineers can implement designs with clarity and efficiency.
Iterated with feedback from front-end engineering.
Collaborated with Design Team, Engineers, PMs, and researchers.
Researched design system best practices.
Wrote extensive documentation to ensure engineers can implement designs with clarity and efficiency.
Iterated with feedback from front-end engineering.
Collaborated with Design Team, Engineers, PMs, and researchers.
Researched design system best practices.
Wrote extensive documentation to ensure engineers can implement designs with clarity and efficiency.
Iterated with feedback from front-end engineering.
Collaborated with Design Team, Engineers, PMs, and researchers.
Researched design system best practices.
Wrote extensive documentation to ensure engineers can implement designs with clarity and efficiency.
Iterated with feedback from front-end engineering.
Team
Team
Team
Team
Ginny Zhao (mentor + buddy)
Billy Janitsch (front-end eng)
Emiri Chan (manager)
Shirley Anderson
Adam Norbury
Ginny Zhao (mentor + buddy)
Billy Janitsch (front-end eng)
Emiri Chan (manager)
Shirley Anderson
Adam Norbury
Ginny Zhao (mentor + buddy)
Billy Janitsch (front-end eng)
Emiri Chan (manager)
Shirley Anderson
Adam Norbury
Ginny Zhao (mentor + buddy)
Billy Janitsch (front-end eng)
Emiri Chan (manager)
Shirley Anderson
Adam Norbury
You need to make a decision on when the system is enough.
It felt like there was no end to the design system. Hypothetically, I could keep going, find more edge cases to account for, find more types of charts to talk about. It was hard to find a stopping point for
It's important to fit the design system to front-end's process.
In the case of Kensho, front-end was not going to immediately create code templates and publish the design system. Front-end would directly use the system as a guideline. There would be no point to worrying about components if they would actually slow eng down.
Reflections
Reflections
Our previous design system touched on data visualization very briefly.
Our previous design system touched on data visualization very briefly.
Our previous design system touched on data visualization very briefly.
Our previous design system touched on data visualization very briefly.
This was not enough information for
front-end engineers to deploy charts quickly.
This was not enough information for
front-end engineers to deploy charts quickly.
This was not enough information for
front-end engineers to deploy charts quickly.
This was not enough information for
front-end engineers to deploy charts quickly.
Kensho’s platform requires a consistent way to visualize financial data across products. I took feedback primarily from front-end engineers and iterated on the documentation.
Kensho’s platform requires a consistent way to visualize financial data across products. I took feedback primarily from front-end engineers and iterated on the documentation.
Kensho’s platform requires a consistent way to visualize financial data across products. I took feedback primarily from front-end engineers and iterated on the documentation.
Kensho’s platform requires a consistent way to visualize financial data across products. I took feedback primarily from front-end engineers and iterated on the documentation.
Problem
Problem
Problem
Problem
I created guidelines, sample graphs, and assets to speed up data visualization for design and engineering. Check out this slideshow!
Solution
Solution
Solution
Solution
A couple things I learned from this research:
A couple things I learned from this research:
A couple things I learned from this research:
A couple things I learned from this research:
I had never created a design system before, so I started this project with research.
I had never created a design system before, so I started this project with research.
I had never created a design system before, so I started this project with research.
I had never created a design system before, so I started this project with research.
I looked at the best design systems out there, saw how people describe their designs well, and how the Kensho design system is presented internally. I spent 2 weeks reading papers, looking at videos, websites, etc.
I looked at the best design systems out there, saw how people describe their designs well, and how the Kensho design system is presented internally. I spent 2 weeks reading papers, looking at videos, websites, etc.
I looked at the best design systems out there, saw how people describe their designs well, and how the Kensho design system is presented internally. I spent 2 weeks reading papers, looking at videos, websites, etc.
I looked at the best design systems out there, saw how people describe their designs well, and how the Kensho design system is presented internally. I spent 2 weeks reading papers, looking at videos, websites, etc.
The colors used in a data visualization can shape how people interpret the information.
The colors used in a data visualization can shape how people interpret the information.
The colors used in a data visualization can shape how people interpret the information.
The colors used in a data visualization can shape how people interpret the information.
Consistency allows users to interpret data faster and more reliably.
Consistency allows users to interpret data faster and more reliably.
Consistency allows users to interpret data faster and more reliably.
Consistency allows users to interpret data faster and more reliably.
Clear examples and rationale help engineers and designers apply patterns without ambiguity.
Clear examples and rationale help engineers and designers apply patterns without ambiguity.
Clear examples and rationale help engineers and designers apply patterns without ambiguity.
Clear examples and rationale help engineers and designers apply patterns without ambiguity.
Good design systems don’t just define components; they explain why certain visual choices guide interpretation.
Good design systems don’t just define components; they explain why certain visual choices guide interpretation.
Good design systems don’t just define components; they explain why certain visual choices guide interpretation.
Good design systems don’t just define components; they explain why certain visual choices guide interpretation.
Research
Research
Research
Research
What I achieved ↓
What I achieved ↓
What charts would be most useful for financial use cases?
What charts would be most useful for financial use cases?
What charts would be most useful for financial use cases?
What charts would be most useful for financial use cases?
I studied leading design systems and realized the best ones were intentional. To bring that same clarity, I researched and narrowed ours to 8 essential chart types.
I studied leading design systems and realized the best ones were intentional. To bring that same clarity, I researched and narrowed ours to 8 essential chart types.
I studied leading design systems and realized the best ones were intentional. To bring that same clarity, I researched and narrowed ours to 8 essential chart types.
I studied leading design systems and realized the best ones were intentional. To bring that same clarity, I researched and narrowed ours to 8 essential chart types.
After my first pass at all the charts, I took feedback from a front-end engineer.
After my first pass at all the charts, I took feedback from a front-end engineer.
After my first pass at all the charts, I took feedback from a front-end engineer.
After my first pass at all the charts, I took feedback from a front-end engineer.
He said I was off to a great start but needed more flexibility — guidelines should be framed as suggestions. Since not all designers/engineers know data viz, he advised adding explanations for chart elements.
He said I was off to a great start but needed more flexibility — guidelines should be framed as suggestions. Since not all designers/engineers know data viz, he advised adding explanations for chart elements.
He said I was off to a great start but needed more flexibility — guidelines should be framed as suggestions. Since not all designers/engineers know data viz, he advised adding explanations for chart elements.
He said I was off to a great start but needed more flexibility — guidelines should be framed as suggestions. Since not all designers/engineers know data viz, he advised adding explanations for chart elements.
It was tough to make the guidelines feel flexible but still keep a consistent style
It was tough to make the guidelines feel flexible but still keep a consistent style
It was tough to make the guidelines feel flexible but still keep a consistent style
It was tough to make the guidelines feel flexible but still keep a consistent style
I made the language a little softer to try to convey the flexibility.
I also designed several chart subtypes to account for common cases.
I made the language a little softer to try to convey the flexibility.
I also designed several chart subtypes to account for common cases.
I made the language a little softer to try to convey the flexibility.
I also designed several chart subtypes to account for common cases.
I made the language a little softer to try to convey the flexibility.
I also designed several chart subtypes to account for common cases.
Responsiveness and componentizing were difficult for charts with so many parts.
Responsiveness and componentizing were difficult for charts with so many parts.
Responsiveness and componentizing were difficult for charts with so many parts.
Responsiveness and componentizing were difficult for charts with so many parts.
It's easy to componentize buttons, headers, slider-like assets.
What about whole charts? What do I componentize? How do I make something responsive, when things are dependent on # of bars?
It's easy to componentize buttons, headers, slider-like assets.
What about whole charts? What do I componentize? How do I make something responsive, when things are dependent on # of bars?
It's easy to componentize buttons, headers, slider-like assets.
What about whole charts? What do I componentize? How do I make something responsive, when things are dependent on # of bars?
It's easy to componentize buttons, headers, slider-like assets.
What about whole charts? What do I componentize? How do I make something responsive, when things are dependent on # of bars?
Understanding HOW front-end would use the design system solved many of my problems.
Understanding HOW front-end would use the design system solved many of my problems.
Understanding HOW front-end would use the design system solved many of my problems.
Understanding HOW front-end would use the design system solved many of my problems.
Since our front-end engineers were likely to first find the data and use an external template library, I realized there would be little use in me componentizing things. Instead, I focused on providing descriptions and examples.
Since our front-end engineers were likely to first find the data and use an external template library, I realized there would be little use in me componentizing things. Instead, I focused on providing descriptions and examples.
Since our front-end engineers were likely to first find the data and use an external template library, I realized there would be little use in me componentizing things. Instead, I focused on providing descriptions and examples.
Since our front-end engineers were likely to first find the data and use an external template library, I realized there would be little use in me componentizing things. Instead, I focused on providing descriptions and examples.
Design
Design
Design
Design
In-depth information on various parts of a boxplot.
In-depth information on various parts of a boxplot.
In-depth information on various parts of a boxplot.
In-depth information on various parts of a boxplot.
FLEXIBILITY
The same line graph styled differently to account for the emphasis on known data points vs. extrapolated data points.
FLEXIBILITY
The same line graph styled differently to account for the emphasis on known data points vs. extrapolated data points.
FLEXIBILITY
The same line graph styled differently to account for the emphasis on known data points vs. extrapolated data points.
FLEXIBILITY
The same line graph styled differently to account for the emphasis on known data points vs. extrapolated data points.
BUT, CONSISTENCY
Pointing out when alignment mistakes can be made if under the wrong assumption.
BUT, CONSISTENCY
Pointing out when alignment mistakes can be made if under the wrong assumption.
BUT, CONSISTENCY
Pointing out when alignment mistakes can be made if under the wrong assumption.
BUT, CONSISTENCY
Pointing out when alignment mistakes can be made if under the wrong assumption.
Accelerated implementation by enabling engineers to reuse chart components instead of building from scratch.
Accelerated implementation by enabling engineers to reuse chart components instead of building from scratch.
Accelerated implementation by enabling engineers to reuse chart components instead of building from scratch.
Accelerated implementation by enabling engineers to reuse chart components instead of building from scratch.
In my final conversations with front-end engineers + designers, they mentioned that they were really happy with my work, and foresaw that the time they would spend
In my final conversations with front-end engineers + designers, they mentioned that they were really happy with my work, and foresaw that the time they would spend
In my final conversations with front-end engineers + designers, they mentioned that they were really happy with my work, and foresaw that the time they would spend
In my final conversations with front-end engineers + designers, they mentioned that they were really happy with my work, and foresaw that the time they would spend
In fact, this design system is currently being used to display Kensho's grounding capabilities to clients!!
In fact, this design system is currently being used to display Kensho's grounding capabilities to clients!!
In fact, this design system is currently being used to display Kensho's grounding capabilities to clients!!
In fact, this design system is currently being used to display Kensho's grounding capabilities to clients!!
I’m so excited my work will be used in client-facing prototypes. The design system improves how we present our work. Our prototypes that we test with clients often focus only on the technical side, so this helps us take a step closer to a polished final product.
I’m so excited my work will be used in client-facing prototypes. The design system improves how we present our work. Our prototypes that we test with clients often focus only on the technical side, so this helps us take a step closer to a polished final product.
I’m so excited my work will be used in client-facing prototypes. The design system improves how we present our work. Our prototypes that we test with clients often focus only on the technical side, so this helps us take a step closer to a polished final product.
I’m so excited my work will be used in client-facing prototypes. The design system improves how we present our work. Our prototypes that we test with clients often focus only on the technical side, so this helps us take a step closer to a polished final product.
Outcomes
Outcomes
Outcomes
Outcomes
You need to make a decision on when the system is enough.
You need to make a decision on when the system is enough.
It felt like there was no end to the design system. Hypothetically, I could keep going, find more edge cases to account for, find more types of charts to talk about. It was hard to find a stopping point for
It felt like there was no end to the design system. Hypothetically, I could keep going, find more edge cases to account for, find more types of charts to talk about. It was hard to find a stopping point for
It's important to fit the design system to front-end's process.
It's important to fit the design system to front-end's process.
In the case of Kensho, front-end was not going to immediately create code templates and publish the design system. Front-end would directly use the system as a guideline. There would be no point to worrying about components if they would actually slow eng down.
In the case of Kensho, front-end was not going to immediately create code templates and publish the design system. Front-end would directly use the system as a guideline. There would be no point to worrying about components if they would actually slow eng down.
Reflections
Reflections
Reflections
Reflections