NCL Design Language System

Client: Norwegian Cruise Lines

Project: NCL Design Language System

UX Role: Senior Experience Designer (Project Lead)

Agency Partner: Critical Mass

________________________________________________________

A organized creative landscape in both design and development cannot exist without a well structured and assembled Design Language System (DLS). In this project block I will share a small sample of the DLS created and maintained for NCL.

In the beginning of this project, it was a joint effort with an agency in New York called Critical Mass. The task was to build a DLS from scratch so it could be custom and cater to the specific visual needs of the organization and its branding. At the time, Sketch was still the goto choice for UX designers to build components and styles to spec. We had 3 visual designers and myself working on core style definitions to lay out the foundation of the library. Abstract was the secondary tool leveraged for sharing the files and specs with development. After about 1 year into the contract with Critical Mass, the relationship was ended and the library work was taken over internally completely. At this time we decided to transition the progress over to figma and begin to build the styles and components properly leveraging auto-layout and variant control for pixel perfect deliverables. The original Sketch files were ultimately archived assets and everything was migrated over to Figma and the visual design you see on ncl.com today is still leveraging this Design Language System.

Note: The full library consists of dozens of pages and hundreds of components. The below overview boards will represent a small portion of components built within each of our core libraries for Styles, Components and Block designs.