CASE STUDY

Experience Platform

Product Design, Design Leadership, Product Strategy

CLIENT — Condé Nast Co/Lab
UX DIRECTOR — Peter Knocke
UX DESIGNER — Jomi Cubol
LEAD DEVELOPER — Phil Gold
DIRECTOR OF PRODUCT — Charl Porter


Challenge

Condé Nast recently completed the development of a custom content management system for use across the firm’s 22 brands. The firm looked to it’s internal design organization, Co/Lab, to envision how best to leverage the new shared architecture for rapid digital product development.


Setting the strategy

As the team began the project, we quickly established 6 core principles to lead our design process. The massive scope and scale of this project could lead our work in many directions, but the principles allowed us to focus our scope upon what would create the most organizational impact.

Core Principles


A continual process 

Once our principles were set, how would we determine where to start? Each brand within Conde Nast has a different digital footprint with various levels of interaction provided within each experience. We established 3 categories of Universal Experiences to be able to analyze experiences across brands. 

Universal Categories


We would tackle each of these experiences one at a time while also cycling back to ensure constant interaction occurred as the project moved along. Next we established a 5 week sprint process to provide specific time frames to conduct research, determine standards, and produce the content, code, and documentation of the platform.
 
Sprint Process and Activities


This sprint process allowed us to center our work in a particular experience while allowing for cross-department review and revisions of previous sprints. 


Defining a shared vocabulary

As we dove into the project, it quickly became clear that each brand had  it’s own lexicon for building and running their digital presence. We set out to quickly establish and define a shared vocabulary to reduce communication errors across brands.

It was essential to define Experience Platform categories, templates, and components.  Additionally, in defining our shared vocabulary, we unearthed examples where brands held variations in what common elements such as Header or Caption truly meant. Additionally, we had a constant eye upon specific viewport sizing and mobile optimization.

  
Defining Components and Viewport Variations


A true open door policy

Fostering open communication, our team established an open door policy for our main collaboration room. At any time, anyone could swing by our room, view the current process, leave notes, or spark up lively debate. It became one of the most popular places to swing by on the way back from lunch for a quick collaboration session all in the name of improving the experience platform.

  
Component Naming Process


Live examples built natively

Thanks to our new custom CMS, we we able to directly upload our content within the CMS. This model allowed for instant viewing, skinning, and copying of live component code. Providing these live pages to stakeholders across the organization provided an outlet for instant feedback as we build out the platform.


Page Example Structure


Built to grow and evolve

Collaborating with all departments of the digital organization, we were able to align on naming, interface patterns, and a set of modular components. Cross-brand insights quickly became common as teams used the new platform to transfer organizational knowledge quickly and without confusion.


Component Examples



Template Styles


Project outcome

Our established process, platform structure, and vocabulary were
transferred to the next team to continue development of the Experience Platform. At the completion of this project we delivered the core system along with the initial set of content, components, and business rules. The Experience Platform continued to evolve in content and components allowing Conde Nast to quickly act upon shared business insights and prototype new products for each brands’ audience.

FINAL DETAILS

  • Interactive component library running on custom CMS
  • Content and interface inventory across 22 brands
  • 36 global components designed and defined
  • Live code snippets and customizable component samples