Designing Modular Frameworks

Crafting a modular responsive template library for American Eagle Outfitters.

Challenge

Since American Eagle Outfitters launched their first website, every page had been created as a custom page. They approached the agency with an ask to create a module framework for their rapidly growing website and newly launched CMS platform.

CLIENT
American Eagle Outfitters

AGENCY
SapientNitro

ROLE
UX Lead, Creative Technologist

Process

UX

Assess years of templates and create a module framework scaleable for all design needs.

Development

Develop a prototype that showcases loading and micro-animations that help guide the user journey.

Intake

Assessmed more than two years of daily custom module designs and identified design trends of CTAs, headlines, copy, typestyles, and icons.

Responsive Module Framework

Designed a robust module framework that accommodates even the most custom designs. Developed with various desktop and mobile screen resolutions in-mind.

Instructional Module Library

A library of over fifty modules was designed, each module had a framework with design specs, design with labeled fields corresponding to the framework, and example design module.

Creating Animations

As part of our design exploration, developed an animation library with various micro-animations for lazy loading, hover states, and page transitions. Each animation provided with animation specs including speeds, opacity levels, and triggers.

Module Library

As part of helping onboard American Eagle Outfitters, our team sat down with various business units to understand the hurdles around adopting this new framework. A major pain point was translating marketing needs into design comps. With such a vast library, only the designers working directly with the modules knew what was available to them.

To help translate marketing needs into designs, developed a module library search tool that quickly filtered modules based on a variety of marketing needs including content, number of call-to-actions, and dynamic functionalities.