About Morgan Stanley’s Campfire Design System

This design system was created as a tool to align the four different internal design systems at Morgan Stanley.

The scale of Campfire Client: The Campfire design system supports 150+ designers and developers across 75+ experiences, this includes 65 components, 2.5k component variants, 100+ styles, 200 teams, and 50k+ average inserts per week.

The benefits of the design system: The Campfire design system offers designers speed, cohesion, and quality. Designers can now focus on the user experience and not waste time on nuances of individual design assets.

Handling adaptation and relationships with our partners: To ensure consistency across products, our small team of Campfire designers had a presence within every vertical. We were in all review meetings to offer guidance to UX design partners that streamlined and enhanced the user experience. Our presence in these vertical sync meetings greatly increased engagement and buy-in from Product partners expressing interest in using Campfire and becoming educated in Design Systems. We also utilized a “contribution intake form” which allowed us to track requests across teams in a single location, and over time gained some developer advocates as well.

Project goal

Working with our accessibility team and developer team, my goal was to create a “unified” design system that stylistically aligns the existing design systems of Morgan Stanley and those of their recent acquisition, E*TRADE. The focus was on building a future-proof system to scale using components, patterns, templates, and documentation.

My role

• System Designer

• UX/UI Designer

• Project Owner

Services provided

• Information architecture

• Visual design

• Usability testing

• Project Support

• Component based asset templates, mockups, and color and icon systems, and component proposals.

Tools used

• Figma

A Look inside the files

The Campfire Design system is seen internally as a “unified design system,” bringing together design language during the merger of two companies, taking the best aspects from each and resolving accessibility, consistency, user concerns, documentation, and cohesion. Working with one other designer, together we prioritized a list of all components, and worked methodically through them, building out researched proposals that cover the definition of the component, how it exists currently in all other internal design systems, what we want to carry forward, and any user or accessibility concerns. These proposals were used to get approval for each component before building them into a new unified system in Figma that followed all accessibility guidelines and maintained 1:1 with our codebase. Upon a component’s design and approval, a comprehensive documentation page would be designed in Figma and passed off to the development team to be built and published on the internal documentation website.

Please note, these are examples of my work over a three year period. If you would like to see additional work samples, please reach out to me and I would be happy to discuss further.

A design system focused on the future state of an existing platform

Before diving into more specific examples of workflow and component contributions, it’s important to showcase the transition that our systems were going through in the process of creating the Campfire design system. These examples showcase the design system as it was before the Campfire project, and the “future state” of the components as they underwent the design process. Keeping in mind the massive scale of the system, the vast support needs, and large audience that was required for adaption, each component was updated to not only look more contemporary but to also function in a way that is consistent with accessibility, design, and developer tooling that is used now as well as into the future.

Component Proposal Example: Icons

One of the earlier aspects of the system that I built out was a new and improved icon system. The goal for the system was to decrease the amount of E*TRADE branded purple that was on the screen (designers loved to use this color to draw attention to areas of their flows, but the brand guidelines and stake holders did not like how much the color has been over used.) while updating the icons to feel less dated.

Each of the component proposal presentations included the component, patterns that it was used in, suggestions for component usage templates, and the langauge that would be used in documentation.

Component Documentation Page Example: Tables

Using the research that went into the table cell component as a guide, the component documentation page has a tab for designers as well as developers. This allows us to organize and tailor the information for specific audiences. The table component is one of the more dense and complex components in the system, but is also one of the more important and frequently used components as so much of the E*TRADE and Morgan Stanley platform depend on this component to display data dense information to customers and consumers.