Dark Theme for Enterprise SaaS Application
London Stock Exchange / Yield Book
PROJECT SUMMARY
Design and implement theme-switching functionality and a dark theme for Yield Book's Single Security Calculator (SSC), an application for performing risk analytics on individual fixed income securities, allowing inclusion of SSC in the Refinitiv Eikon and Workspace platforms. The version we implemented utilized an existing design system, Halo, created by Refinitiv's design team.
My Role
Design Strategy
- Presented multiple dark theme options, ranging from full conversions following Eikon and Workspace design systems to minimal CSS changes for existing components
- Collaborated with Refinitiv design system governance team regarding usage and modifications
- Defined pages, views, and UI components to be changed, along with variations based on calculation types, security types, user states, and other variations
Project Planning and Product Management
- Created project backlog based on relative feature priorities, component dependencies and engineering recommendations
- Represented product function in team meetings and day-to-day collaboration with engineering
- Fielded product questions from engineering and served as first-line arbiter of priorities
Interaction Design and Visual Design
- Created early style explorations using CSS overrides
- Created style explorations showing strict design system adherence, identifying areas requiring changes
- Defined modified button and navigation styles outside design system definitions, to maintain usability standards within context of SSC
- Extrapolated based on defined Halo components to design additional and/or more advanced dropdowns, date pickers, tables, charts, and other components
Quality Assurance
- Provided spreadsheet lists of UI variations and sample securities for testing
- Regularly collaborated with development team to ensure components met visual and functional specs
Outcomes
- Project completed ahead of schedule, meeting all major feature requirements
- Numerous component enhancements became available for inclusion in Halo design system
- Project became a model for future platform integrations
PROJECT DETAILS
Background
In January 2021, London Stock Exchange Group (LSEG) completed the acquisition of Refinitiv, a global provider of financial market data and infrastructure.
At the time, I was a product design lead in LSEG's Yield Book business, working on a suite of fixed income analytics SaaS applications that included Single Security Calculator (SSC), a tool for performing risk analytics on individual fixed income securities.
(The name Single Security Calculator would later be changed to Yield Book Calculator, the name of a legacy application it had replaced.)
In early 2021, we began a project to integrate SSC into Refinitiv's Eikon and Workspace financial data, analytics, and trading platforms, including adding theme-switching functionality and a dark theme option.
Our dark theme needed to utilize a design system called Halo, which had recently been created by the former-Refinitiv design team.
Key project goals
- Allow Single Security Calculator to be used within the Eikon and Workspace platforms
- Have no loss of features or functionality for dark theme
- Adhere to the Halo design system as closely as possible without compromising usability
- Enable theme-switching in both the Eikon/Workspace version and the external version of the application
- Complete project prior to 2021 holiday code freeze, and within the allocated budget
Core project team
- Product manager (limited availability)
- Designer (me)
- Internal engineering manager
- Internal lead front-end developer
- Offshore development team
Support teams and stakeholders
- Eikon and Workspace product managers and designers
- Yield Book senior management
- Yield Book marketing
Pre-Project
SSC Light Theme
Below is an example of the SSC UI's original light theme.
SSC light theme
Halo Design System
Below is an example of components from the original Halo design system (not my work). The design system was relatively new, and this was the typical level of detail. The documentation didn't include any composed UIs, and there were only a few minor instances of the design system in use at the time.
Original Halo components (not my work)
Early Mockups and Design System Modifications
My first step after determining we would use the Halo design system was to mock up a typical SSC UI using those components. It was immediately clear that Halo was optimized for showing "current view" over calls-to-action. In SSC we wanted to emphasize our primary "Calculate" button, which necessitated some changes to the button and navigation styling.
Originally I wanted to engage with the design system governance process and submit a proposal for approved variations, but — I assume because the system was so new — the Refinitiv product manager and design manager responsible for Halo at the time essentially said, "Do what you need to do." Below is a comparison of SSC mockups using all original Halo components and with my modifications.
Mockup comparing original Halo components with my modified components
And below are formal specs for my button and navigation bar modifications compared to their original Halo counterparts. (The originals were in Figma and arguably didn't need to include specs. My dev team at the time wasn't familiar with Figma, so I opted to spec everything.) For the navigation components, I also needed to expand the functionality to match interaction patterns in use in SSC.
My modifications vs. original Halo buttons
My modifications vs. original Halo navigation bar
Expanding Design System
Given the then-recent introduction of Halo, most of the components were in a rudimentary state. In order to match the existing functionality in SSC, I needed to extrapolate to define more advanced components. Below are several examples.
Dark theme dropdowns
Dark theme tables
Dark theme charts
Dark theme date picker
Composed Interfaces and Specs
Dark theme - Price/Yield calculation page without specs
Dark theme - top nav & security info bars
Dark theme - Price/Yield calculation pricing parameters (i.e., calc. inputs)
Dark theme - Price/Yield calculation results
Dark theme - Matrix P/Y page
Project Planning and Development Team Support
I created and maintained the project backlog based on relative feature priorities, component dependencies and engineering recommendations, and represented the product function in team meetings and day-to-day collaboration with engineering.
Dark theme project backlog
Throughout the project, I continued to maintain the spreadsheet lists of UI variations and sample securities for testing we had used for an earlier project to migrate SSC from a legacy platform.
SSC UI variations
SSC sample securities
Implemented Styling
Dark theme Price/Yield calculation page
Light and dark theme comparison
Project Outcomes
- Project completed ahead of schedule, meeting all major feature requirements
- Numerous component enhancements became available for inclusion in Halo design system
- Project became a model for future platform integrations
