Designing Modular Frameworks

Crafting a modular responsive template library for American Eagle Outfitters.

aeo-bg

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

icon-circle-blue

UX

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

icon-triangle-green

Development

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

icon-circle-blue-small

Intake

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

aeo-old-modules

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.

aeo-responsive
aeo-wires

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.

aeo-module
icon-triangle-green-small

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.

aeo-int-submodules

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.

aeo-filter-tool

Deliverables

aeo-mobile

UX
Wireframes

DESIGN
Design Comps
Design Specs

DEVELOPMENT
Animation Library
Module Library Tool

aeo-screen

say hi!

I love hearing from you! Reach out to me at:
info@stevenwakabayashi.com´╗┐

Connect with me

Subscribe to my Weekly Newsletter

Each week, I send project updates and my whereabouts, along with mindfulness content I love. Read a preview of Mindful Moments