FactSet: Fusion Design System
Problem
Upon joining FactSet in January, the user experience design team had just created a new internal website to host their two pattern libraries, known as nonresponsive and responsive. I was immediately tasked with maintaining both libraries and adding the documentation for all of FactSet’s UI components using Markdown. At the time, there were 100+ nonresponsive components being used in 30+ applications, and around 20 components in our responsive library. There was no proposed timeline as to when these components would be implemented. The main issue was, FactSet couldn’t keep up with their competitors, and the company’s applications were outdated in comparison, driving away customers. However, a new department director was hired, and he rebranded the responsive pattern library as our Fusion design system.
Time
Jan 2020 - Aug 2021
Design Goal
The director’s goal was to leverage Fusion and integrate the components into FactSet’s applications over the next few years. This new design system featured modern components and patterns, given the nonresponsive library was outdated. From here, the official Fusion Design System team was created within the Visual Design department.
Design System
My main responsibilities included moving all of these new components from the concept stage to the finish line. The design system team acted as gatekeepers for the Fusion library, where every new component/pattern idea and enhancement request funneled through our team. We ensured everything in the library stayed consistent, and once we received new components, we broke them down into two different themes, densities, states, etc. in Figma, and built them properly using tokens, atoms, and Variants, before sending the specs off to the UI Standards engineers.
Fusion and UI Standards merged into one team at the beginning of the new year. We met daily and incorporated design jams and API jams for the new components we were creating. This ensured we had a better understanding of what the engineers could code, and we could explain our vision for new components and how each component was supposed to function. Below are a few examples of the components and patterns I specifically worked on.
Component - Menu Item:
Challenges: Number of variants / Piecing together Menu
Chart - Donut Chart:
Challenges: Individual pieces / Scalability
Pattern - Wizard:
Challenges: Screen repositioning / Scalability
Component - Accordion:
Challenges: Additional slots / Chevron placement
Conclusion
Numerous components and enhancement requests were added over the coming months, pushing FactSet further along in reaching the director’s five year goal of incorporating the design system into a majority of the company’s applications.