DocuSign Web

DocuSign's corporate marketing Web properties

Problem/Goal:

DocuSign corporate web properties was using Drupal 7 CMS to serve web pages which have 7m visitor a week.

Web pages were developed using Drupal template driven development.

Template Driven development Challanges

Limited 17 templates

Design involve with time

Grew Internationally

Creative team grew

Page specific design than whole brand

Code redundancy leads to repetitive code

Web performance

No shared styling leads to Inconsistent

Research:

Decoupled CMS/Drupal

Web Performance

Content-as-a-Service : Freedom to retrieve content to any endpoint

Third party integration using content API

Headless and self-running flexible deployment

Front-end developers are free to use their favorite frameworks and tools.

Traditional Vs Decoupled Content Management System

Ideation:

Module Development

Unlike similar websites, the Sony Design System did not rely on rigid page templates. Instead, we created a flexible system of modules that could easily be rearranged and customized, per page.

Built DocuSign modular design/development using Drupal Paragraph to enable the content editor to make an easy image and content updates.

Ability to customize module content

Modules can be added and arranged

Base structure as styling

Easily maintainable – rebrand ready

Customizable

Reusable

Reorganizable

Template Vs Module

Deliverables:

4x the amount of pages compared to last year

Implemented the newly rebranded site in Brazil, Japan, Germany, and Netherland to grow DocuSign international presence.

React Module Library

Components

Components are basic atoms which will be use to build React Module Library modules.

For Example: Heading, Button, Section, Card, and, more

Modules

Modules are reusable react component.

Gibson will publish modules to npm artifactory

For Example: Hero, Multicolumn, Copy

Site compiler will use React Module Library modules to build web pages.

Html Vs Module Vs React

Web performance

Improved DocuSign.com Web performance by reducing page load time from 19.23s to 5.62s using CDN deployment, image optimization, reducing the number of requests from 124 to 60, reducing the file size of the page from 1.6mb to 120kb.