Integral Ad Science | Morton Design System

When I joined Integral Ad Science, the design system lacked structure and visibility. I led its formalization and elevation by defining its identity, naming the system, and creating a clear, accessible internal presence to drive adoption.

Overview

I oversaw the evolution of the system (Morton), including a navigation redesign, the establishment of guiding principles, and expansion of the component library, including a comprehensive typography overhaul. I partnered with UX, engineering, and product leaders to run workshops, conduct competitive analysis, and shape a strategic roadmap.

To sustain adoption, I established and lead a bi-weekly Design System Community of Practice, fostering collaboration, gathering feedback, and reinforcing best practices across the organization.

Read More: In January 2020, I spoke at the Vista Equity Partners UX Summit about my work on IAS’s design system. You can view my presentation here and my subsequent blog post here.

 

Why “Morton”?

Morton is named after the beloved street in Manhattan’s West Village that our office is located on. We named our design system Morton because we wanted a name that was easily remembered and near and dear to our hearts.

This is why you’ll see that our logo is the Morton street sign itself, and that we continue to use the metaphor of wayfinding to represent how our design system helps show us the way.

 
 
 

Evolving the Design System

Phase 1

What I Inherited

When I joined IAS, I accepted that whatever came before me was “Phase 1” of the IAS design system. It had been around for a year or two. It was established in terms of having working components that people were using, but it was also relatively new.

In order to better understand what I was inheriting, I conducted workshops with the engineering team to understand the history of the design system, which then helped define where it could go in the future.

Phase 2

Planning and Executing the Evolution

This diagram outlines what we already had in the design system and what areas we could expand into. It was informed by an extensive SWOT analysis of our own design system and a competitive analysis where I looked at what other design systems have and what resonated with our needs.

Execution

Navigation Redesign

One of the first things we did was make a homepage for our design system. Originally, the component library was also more or less a developer’s toolbox with all of the components listed out in the left navigation. The homepage for our design system used to show our first coded component in alphabetical order, which happened to be our 403 error component. As a result, it literally looked like every time you landed on our design page that there was an error.

 

Card Sorting Exercise

In order to figure out the new navigational hierarchy, I conducted a card sorting exercise. The goal of this exercise was to take all of the existing components in Morton and categorize them. This categorization would then help inform the new navigational hierarchy of the Morton website.

In order to assess what the common categorizations were from the card sorting exercise, we inputted everyone’s responses into a spreadsheet.

 

New Navigation

The new navigational organization was produced from the results from the card sort exercise. It also included a cleaned up UI for Morton as a whole.

 

Defining Morton’s Guiding Principles

In order to define Morton’s mission and design principles, I organized a workshop to define Morton’s Guiding Principles, centering around 4 questions:

  1. What value do we bring to customers?

  2. What value do we bring to employees?

  3. What value do we bring to the company?

  4. What do you want Morton and our design system to look like in 5 years?

We established themes around each question from the results of the workshop, which then turned into Morton’s guiding principles.

 

Homepage with Guiding Principles

Instead of users landing directly on a component on the homepage, we redesigned the homepage and surfaced Morton’s newly established Guiding Principles.

 

Updating & Centralizing Component Resources

We leveraged Abstract to manage and share our Pattern Library, replacing a manual process of uploading Sketch files to Confluence that often led to version mismatches and outdated assets. With Abstract, the team always had access to the latest, centralized source of truth, and components could be seamlessly synced across files.

This significantly improved efficiency across teams, enabling faster high-fidelity prototyping, giving developers confidence in up-to-date designs, and allowing researchers to quickly build prototypes for testing. It also made the design system more accessible to anyone across the organization.

 

Domain Standardization and Accessibility

We replaced the long, hard-to-remember design system URL with a simple, branded domain and moved it behind corporate SSO. This allowed anyone with an IAS login to access the system without needing a VPN, significantly improving accessibility and adoption across the organization.

 

Awareness & Socialization

Morton Design System Logo

Logos are a huge part of branding identity. Creating a logo for Morton was another huge step forward in raising awareness for our design system. Making the logo was a collaborative effort. Our entire team was involved in the process and multiple people worked on explorations for the logo. We finally landed on a representation of the street sign that reflected our IAS brand colors.

Morton Design System Swag & Tagline

We made stickers of the logo and passed them out around the company to generate excitement around our new name and raise awareness about the advances we were making with our design system.

Morton helps show the way. We made a tagline for our design system that succinctly communicates its mission. We extended the metaphor of a street sign, giving directions, and way-finding into the tagline that a Senior User Experience Lead on our team came up with.

 

Tracking Design System Usage

We began tracking design system usage in Pendo to define future needs.

Design system work is never finished. We needed to measure the success of the changes we have implemented to inform future roadmap work.

 

Roadmapping for Phase 3

Our next phase focuses on defining the strategic goals for “Phase 3” of the IAS design system. As the system has matured through incremental improvements, this phase requires a more data-informed approach, leveraging user research, usage patterns, and analytics to prioritize the roadmap effectively.

To ensure continued momentum without a fully dedicated design system team, I established a model of reserving capacity each quarter for design system work. This included committing to at least one epic-level initiative per quarter, ensuring consistent, incremental progress and preventing the system from being deprioritized amid competing demands.