Scaling Systems: Shipt's Icon Infrastructure

Design System, Iconography

Between 2019-2023, I led a comprehensive transformation of Shipt's iconography system, consolidating 322+ icons across four separate libraries into one unified, scalable system. This initiative bridged gaps between Marketing, Member Experience, Shopper platform, and internal tools, ultimately forming the foundation for Shipt's design system.

 

Credits

Sr Product Design Director: Patrick Kelleher
Principal Product Designer: Jack Zankowski

Key Outcomes

  • Reduced icon discovery time from weeks/months to same-day by creating centralized documentation

  • Decreased icon request resolution time from 3-5 days to 24-48 hours through standardized processes

  • Reduced icon library from 322 to 266 assets across 4 separate libraries, decreasing redundancy by 17%

  • Established 11 standardized categories, streamlining asset discovery and implementation

Impact

  • Reduced icon development time by approximately 70% from 3-4 weeks to 1 week per icon through streamlined processes and clear documentation

  • Saved an estimated 540-600 hours annually across 90+ engineers and designers by reducing icon-related issue resolution time from 5 days to under 1 day

  • Established a scalable foundation for organizational growth through unified standards and documentation serving engineering, product design, and marketing teams

 

Challenge

Shipt's rapid growth led to fragmented icon libraries with inconsistent standards, creating operational bottlenecks and increasing technical debt. Teams across departments maintained separate libraries with distinct specifications, resulting in duplicate work and implementation inconsistencies.

Frequent complaints from designers include limited visibility, unclear usage and contribution guidelines, and design inconsistencies. Back-and-forth slack messages were common, resolving recurrent issues peicemeal.

 

Design inconsistencies: use of filled shapes, transparencies, and inconsistent stroke weights

Variations across different libraries of the same icon

Approach

Audit

I initiated a comprehensive audit of over 322 unique glyphs across 4 libraries, systematically organizing them into a spreadsheet, documenting:

  • Current icon names and variations

  • Team-specific usage patterns

  • Technical specifications

 

Workshop

After initial auditing, I led cross-functional workshops to:

  • Evaluate existing icons

  • Establish naming conventions

  • Understand team requirements

  • Build consensus for a unified approach

Transforming abstract complaints into tangible examples fostered trust through transparency and collaboration. Rather than imposing a top-down solution, this user-centric approach proved crucial for system adoption and long-term sustainability.

 

The Naming workshop was the first opportunity for teams to see the entire icon library. Using Figjam, I gathered the various ways teams referred to the icons, capturing usage patterns from real-world contexts. We built a shared language by grounding our naming conventions in how teams actually describe and use icons.

In our Assessment workshop, I facilitated an exercise to evaluate icons as needing refinement, unclear, or redundant. This process uncovered the full extent of the system's inefficiencies, including outdated icons and six variations of a "log out" icon.

Standardization

 

We implemented a purpose-based naming system aligned with the existing design token structure, adding searchable keywords to icon component descriptions.

We also created technical specifications for stroke weight, terminal styling, and corner radius standards.

Key Learnings

Bottom-up Collaboration Builds Trust

  • Engaged teams through co-design sessions and regular feedback loops, giving everyone a voice regardless of role

  • Proactively invited input from engineers, designers, and stakeholders during key decision points

  • Built ownership by incorporating team feedback into technical standards and documentation structure

Visibility Drives System Adoption

  • Captured real user feedback that revealed critical use cases a top-down approach would have missed

  • Documented and shared decision-making processes openly, helping teams understand the reasoning behind system choices

  • Created feedback channels that helped identify and address adoption barriers early

Cross-department Investigation Reveals True Needs

  • Bridged the gap between marketing and product teams by understanding their distinct icon requirements

  • Conducted user research across marketing, member experience, shopper, and internal tools teams

  • Unified disparate needs into a shared system that serves both marketing and product use cases while maintaining brand consistency