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.
American Eagle Outfitters
UX Lead, Creative Technologist
Assess years of templates and create a module framework scaleable for all design needs.
Develop a prototype that showcases loading and micro-animations that help guide the user journey.
Assessmed more than two years of daily custom module designs and identified design trends of CTAs, headlines, copy, typestyles, and icons.
Designed a robust module framework that accommodates even the most custom designs. Developed with various desktop and mobile screen resolutions in-mind.
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.
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.
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.
Module Library Tool