Case Study

UO Design System

Urban Outfitters
Systems
2021

Intake

Previously only utilizing Sketch, Urban Outfitters and our family brands where met with the directive of implementing Figma across the URBN enterprise. Doing so would allow our site and app styles to be shared transparently between the UO brand team and our white label team at URBN. On a more granular level it also presented the opportunity to create a new component library within our internal design system - a feature unique to the Figma platform - which would allow us to implement updates globally across our design files. Page elements, color and text libraries would now align names with their codebase counterpart, enabling seamless language amongst developers and designers.

Design

Creating Live Global Components

A global component library not only gave us the opportunity to make visual updates as needed but to also create live prototypical elements living directly on high fidelity mockups.

Simple & Complex Interactions

with 30 + live components living across the UO web experience complexity varied on each, inviting our team to look at all possible use cases and user outcomes within a given element. Shown to the left are the Add To Bag CTA - with three states and our Size Selection module with nine interactions each linking to over 60 possible outcomes.

Outcome

Once migration is complete Urban Outfitters along with our family of brands will utilize Figma across the workflow. Allowing us to share designs and ideas seamlessly while keeping within our individual brand experiences.