Design System & Component Architecture for ArcGIS StoryMaps & StoryMaps Express
ArcGIS StoryMaps and StoryMaps Express required a scalable design foundation to support growing features and users. We transitioned to a unified design system in Figma, improving consistency, collaboration, and iteration speed.
Product Designer, StoryMaps Platform & Design System - Worked on system-level design across ArcGIS StoryMaps and StoryMaps Express, scaling the design system and improving collaboration across product, design, and engineering teams.
Scaling StoryMaps Through a Shared Design System
As StoryMaps evolved, the design system began to outgrow the existing Sketch and Abstract workflow. Collaboration slowed, file management became complex, and supporting features like light and dark mode increased system overhead. A more scalable approach was needed to support multiple products and teams without sacrificing consistency.
Light mode token system defining base colors, surfaces, and interaction states.
Dark mode tokens mapped to the same system, enabling consistent theming without redesigning components.
Establishing a Shared Design System Across Products
Rather than migrating existing Sketch files, we rebuilt the design system from the ground up to support a shared foundation across StoryMaps and StoryMaps Express. This established a scalable system based on tokens, typography, and reusable components that enabled consistency and cross-product reuse.
Modal component in StoryMaps, built using shared tokens and interaction patterns.
Same modal component adapted for StoryMaps Express, maintaining consistency across products.
Designing Complex Components for Flexible Product Use
Designed a slide panel component used for configuring and editing story content within StoryMaps. The component supports flexible layouts and adapts to different content types while maintaining consistency through shared tokens and patterns, enabling teams to build and modify stories without fragmenting the system.
Slide panel component used to configure and edit story content, designed for flexibility and consistency across StoryMaps.
Applying the Design System: Map Tour (StoryMaps Express)
Applied the design system to enhance the Map Tour experience in StoryMaps Express, enabling users to reorder tour points, define custom starting positions, and structure their narratives more flexibly. By leveraging shared tokens, patterns, and components, these features were implemented efficiently while maintaining consistency with the broader StoryMaps system.
Slide panel in the StoryMaps builder, used to configure and edit story content in real time.
Change Tour Order for Flexible Story Sequencing
Introduced the ability to change tour order within Map Tour, allowing users to reorder points, define custom starting positions, and adjust narrative flow directly within the side panel. This provided greater control over how stories are structured while maintaining consistency with existing system patterns.
Accessing “Change Tour Order” within Map Tour settings.
Defining sequence type and starting point for tour order.
Outcomes and Impact
Established a scalable design system that improved collaboration, consistency, and development speed across StoryMaps.
Improving Workflow, Consistency, and Design Velocity
Migrated the StoryMaps design system to Figma, eliminating branch-based workflows
Improved collaboration through shared libraries and real-time updates
Increased iteration speed through reusable components and system patterns
Enabled efficient restyling and reuse across StoryMaps and StoryMaps Express
Established a scalable foundation for future storytelling features