GAP

The logo of the Stitch Design System along with the logo type on the right side of it.
UX Designer → Design Systems Manager
Overview
Gap Inc. needed a more consistent, system-driven experience across mobile, web, and in-store flows, while the business pushed hard on contactless and mobile growth. I worked across brands to standardize UI patterns and bring key journeys into alignment, then backed it up with the library, documentation, and rituals teams needed to adopt it.
My Contributions
  • Shipped seasonal and holiday animation patterns for mobile apps.
  • Tokenized core components, motion, and taxonomy across four brands.
  • Connected loyalty touchpoints across in-store and digital experiences.
  • Built and maintained a shared Sketch and Figma library to align product teams.
  • Ran a monthly pattern shareout and a bi-weekly newsletter to scale adoption and system thinking.
Diagram showing three groups named aStitch, iStitch, and eStitch with member icons, each linked to various eComm files with a stylized white thread logo on black backgrounds.
Loyalty Initiative to Design
We used the SyPi Synchrony integration to connect loyalty moments across the end-to-end journey.



I brought desktop flows up to parity with mobile-first designs so the experience stayed consistent across devices.




I partnered with teams across brands to define scope, set success criteria, and keep execution aligned through recurring checkpoints.
Library Management
I consolidated brand specs and shared assets into a component library that designers and engineers could rely on in daily product work.



I set quality expectations around accessibility and contrast, and partnered with engineering to make sure components were consumable, not just documented.


In Figma, I built system-friendly prototypes using Auto Layout, tokens, instances, and properties so patterns stayed flexible and scalable.
Documentation
I designed the information architecture for the CMS documentation and wrote specs that translated brand and component rules into practical guidance.




I audited real product usage across platforms to clarify states, behaviors, and edge cases, then documented what to do and what to avoid.



The goal was a single source of truth that supported version control and made ownership clear.
Webpage showing Visual Navigation Carousel documentation with examples for desktop and mobile layouts and fields required for CMS setup.
Brand colors chart displaying cross-brand accent colors in blue and dark gray with hex values, class names, Sass functions, React-stitch tokens, descriptions, and WCAG accessibility ratings, alongside a neutrals section listing grayscale colors from black to white with similar details and usage guidelines for multi-brand and marketing experiences.
Shareout Strategy
I treated adoption like a product problem. I used Figma library metrics, standup updates, and patch notes to publish a bi-weekly newsletter for UX and engineering.

I onboarded new cohorts by walking through the library, sticker sheet, documentation, and intake flow.


I also set up an intake system for feedback and worked with PM to scope and prioritize tickets weekly.
iStitch Stores Newsletter announcement detailing component statuses with categories for Recently Updated, Work in Progress, In Backlog, and Now Available, plus resources and office hours information.Diagram showing the process to submit a request with sections for New Enhancement, New Feature, and Defect, including a form for new requests and a Kanban board for tracking.
Impact
I helped move Gap’s ecosystem toward a more consistent, system-driven experience across web, mobile, and in-store surfaces by doing the work that makes systems usable in real delivery. I tokenized components, motion, and taxonomy across four brands to reduce UI drift, brought desktop loyalty flows to parity with mobile-first designs through the SyPi Synchrony integration, and improved adoption with a shared library, clearer documentation, and a repeatable intake and communication rhythm.

Visage to SWAN.

UX DESIGN
DESIGN SYSTEM
ANIMATION

Designing the system behind the design system. Taking SWAN from infancy to maturity.

Abstract geometric design of four blue overlapping triangles forming a larger downward-pointing triangle.