The World Bank Group
Image: The World Bank external website
Who are they and what do they do?
The World Bank Group is a global partnership of 189 countries, working to reduce poverty and promote shared prosperity. They offer financial and technical support, and innovative solutions to development challenges worldwide.
Project: Enterprise Design System
Business Unit: ITS Operations & Corporate (ITSOC)
Duration: 04/2020-08/2022
Audience: IT product teams within the ITSOC portfolio
Customers: Developers and designers
Product Team: In-house design team in ITSOC
Research: In-house design team and UX and Design Systems Agency
My Role: Manage the technical implementation of the component library and create shared ownership of the roadmap, strategy, vision, deliverables, and adoption across the department.
The Goal
Establish a design and code library to serve as a documentation site and repository for design and code standards for product teams
Manage and implement a collaborative and contribution model for the documentation site as a living product used by product teams across the department
The Challenges
Competing priorities and siloed workstreams prevented a common understanding and consensus about the utility of an enterprise-level design system
A relatively small dedicated team for the size, scope, and complexity of the project
Pushback and resistance from teams in the department that had created similar libraries on a per-product basis in the past
The Research
Acting as the primary liaison between our in-house design team and the information architecture agency, I/we evaluated the current state of the design system’s UI and code libraries and provided strategic recommendations and planning.
The research goals were:
Assess the current state of the design, code, and process
Recommend strategic changes based on industry best practices
Contribute to an operational plan
The Assessment
We conducted an audit of the current state of our design system, its development, and processes. We benchmarked our findings against other enterprise organizations, including Discovery Education, Salesforce, Morning Star, REI, Wells Fargo, Liberty Mutual, Target, Fidelity, Nationwide, and Verizon.
Recommendations
After several months of close consultation, assessment, and analysis, we landed on a set of key recommendations aimed at improving the design, code, and operations aspects of the design system.
Broadly speaking, these recommendations addressed:
Improving design system adoption across teams.
Validating the decision to migrate software and its utility for collaboration across teams and time zones.
Encouraging design system feedback and contributions from delivery designers.
Clarifying roles between competing development teams.
Adopting design tokens to connect design and development on a “single source of truth” for visual style.
Hiring key personnel and specific roles to strengthen the design system team.
Implementation
During the implementation stage, I led a team of 35 product designers, front-end developers, and UX researchers to migrate the design system from Sketch and InVision to Figma, with the goal of improving efficiency and communication. I also owned the technical implementation of the design.
Laying Out the Strategy
Design, Code, and Operations Timelines
Design system implementation timelines
Sketch to Figma Migration Timeline
Figma-Sketch Phase Out Timeline: Nov 2020 - Jul 2021
Technical Implementation
Design Tokens Libraries
Component-based Design Tokens
Assigned UI parts styles to component-based Design Tokens
Refactoring
Refactored UI Library components using Token styles
Design Tokens Exported as Json File
Handed over Json file to developers for implementation
Spec Sheets
Provided detailed handoff documentation, including redlines and specifications.
Usage Training and Onboarding
Created a channel with usage and onboarding trainings
Outcomes & Results
We achieved 100% adoption of the design system among product teams, significantly enhancing consistency and efficiency across our projects. The design system has contributed to the development of seven comprehensive component packages, seamlessly integrated into the core framework.
Collaboration
100%
of teams using and contributing to the DS
Standardization
Full suite
of apps adhering to the design system standards
Accountability
Seven Packages
of components built to date in the application development kit
Applications Showcase
The colors, typography, and overall system guidelines I created contributed to the development of several native and iOS apps. As the lead design system designer, I created templates, showcasing its versatility and effectiveness in delivering cohesive, user-friendly interfaces, ultimately streamlining the design and development process.
What’s Next?
Documentation Site
The next level of maturity for our design system is to consolidate and maintain an internal documentation site that communicates the design system’s foundations and holds the repository of components and library for design tokens. This site will serve as a “single source of truth” for our users (designer and developers) and audience (product owners) within the ITSOC department.
