State Street Design System - an enterprise, digital asset library
Client: State Street Corporation
Role: UX Designer
Intent
As part of a larger, five-year Hallmark program, State Street approached us with the opportunity to create an enterprise-wide design system. A few years prior, a consultancy had delivered an enhanced style guide, but State Street was requiring a more robust, experience-based library that would create consistency across its existing digital ecosystem of products and efficiency in the creation of new products. This new design system would be utilized by all product owners across State Street and maintained and governed by a central design and development team. State Street looked to us for guidance on how to build the new design system team, the tools and tasks, and systems required, a governance model for maintaining the design system, and an intake process required for updating existing and designing new products using the design system.
Impact
Increased opportunities for innovation due to gained efficiencies and start-up cost reduction.
Reduction in time to market in the next five years
$10K per month per agile team saved by developing common components once.
Our design thinking process:
We began our work by facilitating a 2-day Enterprise Design Thinking Workshop and creating personas for the users that would be utilizing this design system: Emma the designer, Austin the developer, and Rob the product owner. Through the eyes of our three personas, we empathized with their current state experience with the existing design system and ideated on what would be needed for a successful MVP, as well as to establish a roadmap for Release 2.0.
Emma, a newly hired designer, needs a way to quickly ramp up on State Street’s Design System in order to make an impact on services.
Austin, a very busy developer, needs a place where he
can easily obtain components and understand the experience values.
Rob, an organized product owner, needs a place where he can find information about experiences and design patterns to better inform his work.
Auditing the current state:
We began our work by conducting an audit of the current state. We worked closely with eight product teams to identify patterns, colors, data visualizations, and more used in their current products. We created a robust inventory which enabled us to organize our findings, identify duplicative components, and view the inconsistencies of patterns. We identified high-level experiences, or universal experiences, that existed across all these products. At the end of our audit, we identified five universal experiences and twenty-nine design patterns.
Creating consistent, reusable patterns:
With the extensive inventory, we began to consolidate and re-design the design patterns and components. Using UX and Visual Design best practices, we updated the design assets to be visually consistent, scalable, and accessible. Our design system grew into five universal experiences with templated examples, twenty-nine patterns, a UI icon library, a responsive grid and layout, and an accessible color palette and type scale.
We set the following four, key principles for the design system:
Unity
Thoughtful application of elements brings pieces together to create a cohesive entity. By creating a common connection among elements, you forge a strong brand and user experience.Intention
All content and visual elements should add value to the user and enhance their overall experience. Details and functionalities should be specific to each user’s needs.Transparency
Open, accessible, and comprehensible information provides a clear insight into how a product functions. Being clear with the intentions of a product build trust in the system.Clarity
Simple design and clear information eliminate potential frustration and create obvious actions for your users.
I lead the creation of the Sketch UI library of assets (branding, icons, patterns, and universal experience templates). Through detailed annotations, I documented UX guidance for each component. All components were configured as symbols to accelerate the State Street designers, speeding up time to market and the associated costs. Zeplin, a Sketch plug-in, provided red lines and tokens, to support the development team as they built the components and housed them in GitHub.
Applying the new design system:
As we redesigned the components and patterns, we served as design consultants, working with the eight product teams to apply the updated components and patterns and find new ways of visualizing data and displaying content in their products. Through clickable prototypes, we were able to visualize the new patterns and interactions and conducted several rounds of guerilla user testing and validation to ensure the new design system components and experiences were accessible and usable.
Communicating and sharing the design system:
With the delivery of the Sketch library, we created a website to host the new design system that would be accessible from State Street’s internal site to all employees. The website housed the five universal experiences and components with UX guidance and provided instructions for downloading and using the design system, a link to the framework in GitHub, FAQs, and a glossary of terms. The front-end developer and I created the organization, structure, and design of the website, ensuring that our three personas: Emma the designer, Austin the developer, and Rob the product owner, would find the resources applicable to them.
Onboarding the design team:
The final step in the process was to onboard the newly organized State Street design system team. Over the course of several weeks, we shared how we created and developed the design system, how to download and use the Sketch UI library, the process of creating new patterns and components, reviewed the intake processes and governance model, introduced design thinking training, and more. We wanted to instill and empower the design team to continuously evolve the design patterns and assets.