VS-dyn-type-laptop-mockup.jpg

A DYNAMIC TYPOGRAPHY SYSTEM

 

MY ROLE

Victoria's Secret was ready to expand its international online reach. My job was to create a dynamic typography system to be used on features throughout the site, for both desktop and mobile. The system needed to translate creative content into multiple languages more efficiently and cost effectively than the previous embedded type system, while maintaining the flexibility that visual designers need to represent the brand in the most elevated way. Our first iteration would support Spanish, German, French and French Canadian.

 

Competitive Research

The first step in the process was gaining an understanding of the competitive landscape. With this project, we looked at other companies that were translating their sites into multiple languages in order to understand how they were approaching it. This started to inform our thinking about how we could build in flexibility for our creative partners as well as ease for our set-up partners.

 

Competitive patterning from international retailers

 

Stakeholder Alignment

The business, visual design, set-up and development all had a big stakes in this project. Gaining alignment was a process that required continual education and an emphasis on empathy for all those involved. The business was looking for a way to translate the text on the site efficiently and cost effectively to support international growth. Visual design wanted to maintain as much flexibility as possible in order to continue creating the elevated brand projection that Victoria's Secret is known for. Additionally, the final system would need to be agreed upon by visual design teams from both Victoria's Secret and PINK.  Producers wanted a system that would not add incremental work for the set-up teams, and could be easily understood by remote set-up partners, all without annotations. Developers wanted clear, achievable, acceptance criteria. To help align these sometimes disparate points of view, I led multiple stakeholder meetings that were focused on education, understanding, and transparency all the way through the process.

 

Working through options for typography and layout

 

Designing a System

 

I led multiple work sessions with developers and visual design partners to understand what was technically feasible and how our ideas could be integrated with our CMS. Eventually we finally landed the layout system, the typography themes and specifications, as well as margins and padding that would work for both brands and all devices. 

Type combinations for Victoria's Secret and PINK

 

sharing the vision

I created prototypes to share our vision, design, and strategy. I presented the work to executives and senior stakeholders, which helped to evangelize ideas, gain alignment and drive decision making.

 

BUILD & LAUNCH

As the project moved into the development phase, I worked closely with our developers to ensure that the visual design was effectively translated into the code. I also worked extensively to document the system and onboard visual designers and producers from both brands to ensure wide adoption. The final result is an system that respects Victoria's Secret's brands, the producers workflow, and the business' need for a cost effective way to grow international business.

 

 

Bridget is diplomatic, agile, efficient and good-humored. Her ability to juggle priorities, translate design requirements, intermediate between design teams and adjust to changes that were sometimes sudden, late, or ambiguous is beyond commendable.

Aaron Ibrahim, Lead front end web developer, Victoria's secret Digital

 

THE FINAL SYSTEM

Layout: type can be placed in 14 different positions, relative to the image.

 
 

 
dyn-text-pink.jpg
 
dyn-text-sport-mbl-video.gif

All Brand, All Devices: a flexible system that accommodates the look and feel of all the Victoria's Secret brands

 
 

 
dynamic-text-VS-english copy.jpg
dynamic-text-VS-spanish.jpg

Consistent Brand Projection: promoting the Victoria's Secret Fashion Show in English and Spanish