Nori: A Flexible Figma Design System

Nori is a flexible web design system built to structure multiple brands under with the same functionality and components. It was designed for Organon to built their US consumer facing websites. Nori was primarily for this purpose however the design system functions in an agnostic manner giving the designer full flexibility to use it for whatever needs the client may have. This all in one system was built to house any brands specific colors, fonts, and brand vision to produce high fidelity outcomes regardless of style and use.

Year

2022

Client

Organon

Design Systems

Problem Statement

Organon were having difficulty bringing websites and changes to existing websites to fruition with their current processes and lack of cohesive design system across their multiple pharmaceutical products. They needed to:

Reduce redundancy and streamline workflows for internal team and outside agencies who build and maintain Organon web properties.
Build a flexible and centralized design system to house these web properties.
Increase speed to market while maintaining to strict internal regulation requirements.
Reduce the impact of legal requirements and provide a better user experience.

Research

We conducted interviews with potential users, ranging from experienced designers and developers to key internal shareholders. Key insights included:

Convenience is key: Users want a quick, hassle-free design and build process.
Legal requirements: Being able to clearly meet the legal requirements for pharmaceutical products was paramount.
Customization helps: Brands appreciate personalized stylings based on preferences and brand voice.

Competitive Analysis

We analyzed leading pharmaceutical platforms to identify UX strengths and gaps. Findings included:

Simple and intuitive browsing increases length of user experience.
Platforms with more humanity enhance product discovery.
Reducing Legal content fueled discovery and usablilty.

Design Process

Discover

The needs of the users

Define

Achievable goals and objectives

Deploy

Simple usable solutions

Support

Development team in execution

New Taskflow for outside AORs

The Nori Platform team works hand in hand with brand and content AORs in order to optimize UX on the web and to maximize speed to market for US consumer websites.

It is crucial that both the Nori team and AOR teams contribute to website efforts in the right way.

Brand & Content AOR

Key Focus

Ensure that the brand, campaigns, and content successfully reach Organon customers.

Responsibilities

customer research and strategy
brand and campaign strategy
branding
asset creation
content development for all channels

Key Deliverables

customer assessments
branding elements
creative assets
sitemaps
website copy

Nori Platform Team

Key Focus
Ensure that the web channel supports needs of the users and the goals of Organon.

Responsibilities

web digital strategy
website content frameworks
web design patterns
design tooling
development
content deployment

Key Deliverables

messaging frameworks
AOR guidelines
UI design patterns
new components
developed code

Building Blocks for the Design System

25+ Customizable Modules

Modules are our modular layout sections. They are used to build page layouts. The Nori design system provides a number of prebuilt modules from which you can build your designs.

75+ Customizable Components

Components are our smallest parts of the Nori design system. They are used to build modules. Every element of Nori from the text block to the card are all globally manageable and interchangeable pieces.