Transforming an American icon

Gap

Every day, millions of users interacted with marketing content throughout their journey on Gap, Old Navy, Banana Republic, and Athleta.

In 2021, I joined Gap Inc. as a UX Designer for the launch and growth of their marketing Content Management System (CMS)

Role

UX Designer

Skills

Interviews

Wireframes

Prototypes

Usability Testing

Design Systems

Motion Design

Platforms

Web

Tools

Figma

Adobe XD / CC

Miro

Amplience

ZeroHeight

After Effects

Overview

Case Study

Overview

Gap’s iconic marketing is used to tell stories, help users find products, and highlight promotions

The existing process required development support, and a 10-business-day lead-time
Content was created as an image, rather than an interactive/coded element
UI elements, like buttons, lacked interactive states, meaning "unusable"
Copy couldn’t be read by search engines (SEO)
Unusable elements, and unreadable text are inaccessible (W3C non-compliant)

The existing process required development support, and a 10-business-day lead-time
Content was created as an image, rather than an interactive/coded element
UI elements, like buttons, lacked interactive states, meaning "unusable"
Copy couldn’t be read by search engines (SEO)
Unusable elements, and unreadable text are inaccessible (W3C non-compliant)

The existing process required development support, and a 10-business-day lead-time
Content was created as an image, rather than an interactive/coded element
UI elements, like buttons, lacked interactive states, meaning "unusable"
Copy couldn’t be read by search engines (SEO)
Unusable elements, and unreadable text are inaccessible (W3C non-compliant)

Outdated technology was holding marketing back

The existing process required development support, and a 10-business-day lead-time
Content was created as an image, rather than an interactive/coded element
UI elements, like buttons, lacked interactive states, meaning "unusable"
Copy couldn’t be read by search engines (SEO)
Unusable elements, and unreadable text are inaccessible (W3C non-compliant)

The existing process required development support, and a 10-business-day lead-time
Content was created as an image, rather than an interactive/coded element
UI elements, like buttons, lacked interactive states, meaning "unusable"
Copy couldn’t be read by search engines (SEO)
Unusable elements, and unreadable text are inaccessible (W3C non-compliant)

The existing process required development support, and a 10-business-day lead-time
Content was created as an image, rather than an interactive/coded element
UI elements, like buttons, lacked interactive states, meaning "unusable"
Copy couldn’t be read by search engines (SEO)
Unusable elements, and unreadable text are inaccessible (W3C non-compliant)

Give brands the power to publish content in hours, rather than weeks

By implementing a CMS lengthy development processes would no longer be needed
Content is now live, and features interactive UI elements
UI elements have interactive states
Copy can now be ready by SEO
Marketing content is now accessible (W3C compliant)

By implementing a CMS lengthy development processes would no longer be needed
Content is now live, and features interactive UI elements
UI elements have interactive states
Copy can now be ready by SEO
Marketing content is now accessible (W3C compliant)

By implementing a CMS lengthy development processes would no longer be needed
Content is now live, and features interactive UI elements
UI elements have interactive states
Copy can now be ready by SEO
Marketing content is now accessible (W3C compliant)

Content Templates made content creation fast, simple, and autonomous

Templates are the underlying structure of content produced by the CMS
Each template refers to a specific “type” of content used on the site
Each template is modular, and could be styled and used in a variety of ways
Through the CMS, authors select a template, and build creative through the platform
The result is brand-approved content, able to be previewed, tested, and published to the site

Templates are the underlying structure of content produced by the CMS
Each template refers to a specific “type” of content used on the site
Each template is modular, and could be styled and used in a variety of ways
Through the CMS, authors select a template, and build creative through the platform
The result is brand-approved content, able to be previewed, tested, and published to the site

Templates are the underlying structure of content produced by the CMS
Each template refers to a specific “type” of content used on the site
Each template is modular, and could be styled and used in a variety of ways
Through the CMS, authors select a template, and build creative through the platform
The result is brand-approved content, able to be previewed, tested, and published to the site

I was responsible for designing the Content Templates and validating their development

Wireframes
Design specifications of a Template
Authoring Wireframes
Visual of the authoring experience
Visual Samples
To reflect the modularity in a template
Team
Key partners through this project

Wireframes
Design specifications of a Template
Authoring Wireframes
Visual of the authoring experience
Visual Samples
To reflect the modularity in a template
Team
Key partners through this project

Wireframes
Design specifications of a Template
Authoring Wireframes
Visual of the authoring experience
Visual Samples
To reflect the modularity in a template
Team
Key partners through this project

Marketing could now move faster than ever before

Content update lead-time

Case Study

Research

“Our brand is our most important asset, and a lot goes into it maintaining that asset”
Creative
“There are thousands of assets and they’re changed often ... we’re always underwater, and we never slow down”
Marketing
“Our biggest hurdle, time and time again, is starting a project with accurate requirements”
Development

“Our brand is our most important asset, and a lot goes into it maintaining that asset”
Creative
“There are thousands of assets and they’re changed often ... we’re always underwater, and we never slow down”
Marketing
“Our biggest hurdle, time and time again, is starting a project with accurate requirements”
Development

“Our brand is our most important asset, and a lot goes into it maintaining that asset”
Creative
“There are thousands of assets and they’re changed often ... we’re always underwater, and we never slow down”
Marketing
“Our biggest hurdle, time and time again, is starting a project with accurate requirements”
Development

Inventory
All marketing across the platform was documented over the course of a month, and laid the foundation for work to come
Style Guides
Each brands unique typography, color systems, and visual language was translated for use across platforms
Design Systems
Each brands CMS specific design system was added to the core platform, and built into Figma and XD libraries
Documentation
Each content type, and its capabilities, construction, and uses, were documented within ZeroHeight

Inventory
All marketing across the platform was documented over the course of a month, and laid the foundation for work to come
Style Guides
Each brands unique typography, color systems, and visual language was translated for use across platforms
Design Systems
Each brands CMS specific design system was added to the core platform, and built into Figma and XD libraries
Documentation
Each content type, and its capabilities, construction, and uses, were documented within ZeroHeight

Inventory
All marketing across the platform was documented over the course of a month, and laid the foundation for work to come
Style Guides
Each brands unique typography, color systems, and visual language was translated for use across platforms
Design Systems
Each brands CMS specific design system was added to the core platform, and built into Figma and XD libraries
Documentation
Each content type, and its capabilities, construction, and uses, were documented within ZeroHeight

Design

After the first development sprints, the project was in crisis. Key milestones had been missed, and users were frustrated.

“Most of the content were seeing out of the CMS for the first time doesn’t look good”
Creative
Documentation was confusing, and design resources weren’t helpful
“I am spending at least 30 minutes trying to author a single piece of content - this isn’t realistic”
Marketing
Authoring experiences were not clearly defined, and built ad-hoc by developers
“The churn is killing our team. We can be stuck on a single template for months.”
Development
Poor requirements and documentation created unnecessary churn

“Most of the content were seeing out of the CMS for the first time doesn’t look good”
Creative
Documentation was confusing, and design resources weren’t helpful
“I am spending at least 30 minutes trying to author a single piece of content - this isn’t realistic”
Marketing
Authoring experiences were not clearly defined, and built ad-hoc by developers
“The churn is killing our team. We can be stuck on a single template for months.”
Development
Poor requirements and documentation created unnecessary churn

“Most of the content were seeing out of the CMS for the first time doesn’t look good”
Creative
Documentation was confusing, and design resources weren’t helpful
“I am spending at least 30 minutes trying to author a single piece of content - this isn’t realistic”
Marketing
Authoring experiences were not clearly defined, and built ad-hoc by developers
“The churn is killing our team. We can be stuck on a single template for months.”
Development
Poor requirements and documentation created unnecessary churn

I decided to redesign the wireframes and compositions to directly address the user feedback

Impact

The project was able to get back on schedule, and relationships with business partners was better than ever

average time for a user to create a new piece of content
average time to develop a new template

average time for a user to create a new piece of content
average time to develop a new template

average time for a user to create a new piece of content
average time to develop a new template

Reflections

A hugely rewarding experience

I was able to understand the intricacies of standing up new technology on a massive scale, and create real value for users, inside and outside the organization.

Personally, I’m grateful I had the opportunity to solve complex problems, and transform iconic brands, all while building relationships with the smartest, kindest and hardest working people I’ve ever met.

Return to top

Transforming an American icon