Dow Jones owns 15+ products across news, risk, and energy, each with their own look and feel. Previously, designers and engineers were regularly reinventing the wheel for each individual product.
    The designs had very little alignment with code or consistent standards across (and sometimes within) products, and there was little to no sharing of patterns or assets. Index arose as a response to that.

WHAT IT MEANS TO BE CROSS-BRAND ︎︎︎

A cross-brand system means creating assets that are generic enough to be useful to all, but opinionated enough to create that baseline of accessibility and behavioral consistency. It means creating a white-label contextual token set that is descriptive and concise, but also scalable.
    Index does this by maintaining a small set of core components for both web and app, and a white-label tokens set that is tailored to DJ's needs and industry best practices, both of which are tightly aligned with visually identical equivalents in code.
    These assets can be themed to any product within the system using variables, and are used to create product specific components and compositions that are optimized to the brand, but still fundamentally efficient and aligned.

DESIGN SYSTEM BUILDING BLOCKS ︎︎︎

Tokens
Ex. Color, Typography, Shadows, Spaces, Blurs

The smallest elements, essentially meaningfully named containers that can carry different values for each brand. For example, a token “button-fill” could be blue for one brand and purple for another.


Components: “Atoms” and “Molecules”
Ex. Button, Switch, Input Field, Tab

Small reusable pieces, built using tokens and other components, that can be themed to each product and used in components and page designs.


Components: “Organisms”
Ex. Cards, Headers, Footers, populated Modals

Larger pieces made up of smaller components and tokens.

The basic building blocks of Index are tokens and components. Each of those building blocks is tightly aligned to code, ensuring a baseline of alignment in larger complexity
individual needs. 

SOME NITTY GRITTY ︎︎︎

For a look behind the curtain of Index into its token mechanics. Reach out for the password protected version of this page.

We didn’t prioritize making gorgeous documentation (although we wanted to) because it wouldn’t be high impact. Instead we went for a quick and dirty approach, prioritizing tools and platforms that were accessible by default, easily shareable, and already integrated with the companies processes. 
    Nobody reads. We prioritized concise and straightforward wording, and documentation integrated with existing workflows and AI processes and therefore appear when relevant. 

Index is governed both at a core level, and a local level.  Both levels of governance are united around a set of standards, values and guidelines.
    This enables the system to be scalable, and distributes pressure and shifts responsibility from the core team to the users, encouraging an environment of teaching and local ownership.  I’m happy to discuss this more in person!

Index has brought improvements in many areas compared to our old design system:

Build time in Figma 
Building with Index (instead of old system) is projected to result in a 50% decrease in build time for designers.

Clicks to build
Building with Index (instead of old system) is projected to result in a ~47% decrease in the number of clicks–the time spent clicking around the screen to build things–for designers.

Component Weight 
When the same set of components is compared across Index and the old system, Index's set is ~62% lighter than its previous counterparts, and uses 77,864 less layers in their builds.

Build time in code
Utilizing Dev Mode with Index is estimated to speed up development of the handed off designs by ~25%.

Building Index has given me the opportunity to dig deep in this particular area of design. The microcosm of Design Systems is an interesting place full of passionate, logical, empathetic nerds. 
       Spending time in this space has taught me lots, and l’ve had the chance to share some of those learnings back into the community, at places like Virginia tech and the CSUN Assistive Technology Conference.