DocuSign Olive: From style guide to front-end system

Olive

In the beginning: style guide

Almost six years ago, DocuSign started designing and developing a new DocuSign experience. The Olive Style Guide was created to support this experience by making it easier to share reusable CSS across different web properties being built in-house. In essence, DocuSign decided to build its own version of the Bootstrap library

Fun fact: The team decided to name project Olive to support the first internal product name Martini. 

Olive Design System

Over the years, Olive has grown to serve the needs of developers and designers building modern tools, product, and applications experiences by providing standardized CSS and design patterns.

Olive

Following on its initial success, the goals of Olive's style guide evolved to incorporate improving UI component framework, design consistency, product design and development collaboration, company wide consistent linting solution to enable guest development cross project and establishing easy to follow instructions around design and development best practices.

From style guide to design system

Eventually Olive evolved from a CSS style guide to a design system

What is a design system?

Design systems enable product development and design at scale. A design system develops a design language which allows product and engineering to learn, innovate, build, and grow with a consistent user experience. They include everything from components, coding best practice, layouts, colors, icons, typography, styles and development documentation. 

The Olive team decided to use React for building its UI component library. During selection of the next UI development library, React came out as the winner due to its performance, open-source community support, online resources, and easy learning curve. React enabled us to wrap HTML and CSS with JavaScript to encapsulate logic, style, and ease integration and maintenance more directly in a framework of choice. Olive used semantic versioning and distributed through node Artifactory private npm(node package manager) Registry to deliver the UI component library to different product teams.

Olive

In the last two years, the Olive Design System has helped DocuSign innovate and build new products under the umbrella of the DocuSign Agreement Cloud. It also helped rebrand the newly acquired SpringCM as DocuSign CLM.

Olive Universe

Olive developers gradually learned to develop a reusable UI component supporting 99% of DocuSign products in comparison to developing a single-use product feature. At that point  the UI component library had 74 components serving 9 products across DocuSign. Within the span of a year the Olive design system became a product, serving DocuSign products. 

From design system to Front-end Systems and Design Systems

In 2020, the Olive team grew and split into Front-end Systems and Design Systems teams to better reflect the expanded responsibilities of both engineering and design. 

Front-end Systems is a new effort to provide web performance, accessibility, best practices, rebranding, theming, JavaScript linting, and front-end utilities support on top of our earlier design system support.

Olive Components

During this time, Front-end Systems also spun off a shared component library by following inner-source methods to allow product teams to develop shared UI and utilities components for DocuSign front-end applications. That includes components such as Footer, Date Picker, Comments, Color Picker, Header, Tutorials, and Translations.

Inner-source is the use of open-source software development best practices and the establishment of an open-source–like culture within organizations. 

DocuSign also puts accessibility at the forefront of the design of products, services, and environments for people with disabilities. To support this, Front-end Systems also started providing accessibility support across DocuSign by providing training to designers, engineers, and content creators. Front-end Systems helps product and marketing teams with accessibility audits on design, experience, and development to accomplish better accessibility at DocuSign. The Front-end Systems team also makes sure that every single component in our UI components or shared components library is WCAG 2.1 Level AA compliant.

Olive Training

Moving forward, the Front-end Systems roadmap includes building a theming engine that allows product teams to access design tokens; adding visual testing to UI and shared components; strengthening development and design documentation using Storybook 6; and continuing improvement to support DocuSign’s new brand.

Additional resources

Maitrik Patel
Author
Maitrik Patel
Senior Software Engineer
Published
Related Topics