Problem/Goal:

DocuSign's corporate web properties were using Drupal 7 CMS to serve web pages, handling 7 million visitors weekly.

The web pages were developed using template-driven development, which presented several challenges.

Template-Driven Development Challenges

• Limited to 17 templates
• Design evolved over time
• Growing international presence
• Expanding creative team
• Page-specific design rather than cohesive brand experience
• Code redundancy leading to repetition
• Poor web performance
• Inconsistent styling due to lack of shared components

Research:

Decoupled CMS/Drupal Advantages

• Improved 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

Ideation:

Module Development

Unlike similar websites, our approach 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's modular design/development using Drupal Paragraph to enable content editors to make easy image and content updates
• Created modules with customizable content
• Designed modules that could be added and arranged as needed
• Established base structure with consistent styling
• Developed components that were:
  • Easily maintainable and rebrand-ready
  • Customizable
  • Reusable
  • Reorganizable

Deliverables:

• Created 4x the number of pages compared to the previous year
• Implemented the newly rebranded site in Brazil, Japan, Germany, and the Netherlands to grow DocuSign's international presence

React Module Library

• Components
  • Basic building blocks (atoms) used to build the React Module Library
  • Examples: Heading, Button, Section, Card, and more
• Modules
  • Reusable React components
  • Gibson published modules to npm artifactory
  • Examples: Hero, Multicolumn, Copy
• Site compiler used React Module Library modules to build web pages

DocuSign React Module Library

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, and reducing the file size of the page from 1.6MB to 120KB
• Won 1st prize at DocuSign hackathon for customer adoption and Google Mobile Web Performance hackathon

Personalization

• Website personalization is the process of creating customized experiences for visitors
• Rather than providing a single, broad experience, website personalization allows companies to present visitors with unique experiences tailored to their needs and desires
• Developed engaging personalized experiences for DocuSign visitors with Demandbase and Acquia Lift, which increased conversions and engagement by 89 percent
• Previously, DocuSign provided a one-size-fits-all web experience
• The personalization resulted in a significant increase in homepage engagement and click-through rate (CTR)
• Organizations that nurture leads with personalized web experiences and content typically see a 19% uplift in sales opportunities

DocuSign Website Personalization

Other Challenges

• Worked on redesigning the Pricing Page and Navigation (Header and Footer) by coordinating with cross-functional stakeholders in Marketing, Creative, and E-commerce
• Developed various A/B tests using Google Optimize and analyzed results using Google Analytics
• Reviewed developers' and remote team Pull Requests (PRs) to maintain Continuous Integration Workflow (CI) and Code-Driven Development with minimal manual interaction on environments
• Developed SEO tools for DocuSign WordPress and Drupal CMS platforms to increase month-over-month and year-over-year organic traffic performance across DocuSign's global web properties