Internal Design Language System

A design language system built to support decades of diverse software projects. Built to scale and be adopted while being developed, so that partner projects buy in and contribute early and often.

Design principles which dictated decisions for the system: Consistent, Efficient, Informed, Human-centered

Design principles which dictated decisions for the system: Consistent, Efficient, Informed, Human-centered

“Every time I work with Salem, I am absolutely impressed with their ability to facilitate dialogue with grace, diplomacy, and inclusion. They conduct meetings with a calm orchestration I have not seen the likes of before.”

 

My Role

I was brought onto this team when the previous project manager was promoted and the team was languishing without someone to manage scope. The seemingly unsurmountable task of designing something specific enough to be useful and reusable, while also answering every business need of a company so large, was overwhelming them and morale fell as scope grew.

I began meeting with as many projects across the company globally as possible to understand their needs, creating a backlog from this research mixed with a wide study of existing design systems. I then managed these partners, who we gave design advice and sneak peeks of progress to in exchange for their feedback and any reusable components they created.

I also messaged the status of adoption out to company stakeholders and drafted requirement guidelines for including user research, quality assurance, accessibility, and human-centered design. These requirements were folded into the greater company’s requirements for all new contracts.

 

The Project

The company needed a design language system to increase consistency across hundreds of products across 3 business units. The system needed to support a diverse list of tech and business needs while also being built by a very small team.

  • Creating component and pattern libraries that support a variety of products in multiple languages, beginning with React.js and C# WPF before expanding to handle other frameworks

  • Providing custom asset libraries such as icons, logos, a font family, and UI kits in multiple themes

  • Curating a list of the company’s many, many products and identifying POCs for each of them to coordinate adoption of our system

  • Overseeing recurrent adoption meetings with partner products including providing design and implementation consultancy

Quick Facts

  • 1 team of 8 building a system to support 8,000

  • 2 Githubs, 2 NPM packages, 1 Nuget package

  • 2 themes, 36 components, 15 patterns, over 70 icons

  • Over 70 active partner projects in regular correspondence

Problem Solving Sample:

The Problem: Upper management was not accepting progress reports in existing format, lacking understanding of milestones and holding expectations for completed features at unrealistic pace with resources allocated. This caused disruptions when stakeholders repeatedly asked for unplanned demos to show progress.


The Action: Drafted a report detailing iterative adoption of product by 70 projects in company, providing 8 milestones for adoption and reporting on status of each project in 7 different areas of adoption driven by development of features.

The Result: Stakeholders, grateful for report, ceased disruptions and used report to expand reach of product, bringing in additional partners and adoption of product.

Previous
Previous

Sample Project: Game-Based Training

Next
Next

Sample Project: Public Transit