DocuSign Olive

Design System for digital products and experiences

www.docusign.com

Role: Development, Branding, Design System

Tools: React, php, CSS, Design system, Mobile, JS, Webpack

Problem/Goal:

Define the DocuSign Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Research:

  • We get together to map out how developers use and contribute to Olive so we can refine and communicate our process to the organization with the ultimate goal of increasing the efficiency of Olive and feature dev teams.
  • Align on an end-to-end process map of what it’s like to use Olive as a developer from first day on the job to shipping a finished feature.
  • Identify friction points in the flow.
  • Propose and rank potential solutions to friction points.
  • Review and prioritize backlog of solutions for the coming quarter.
  • Building design systems that help products solve problems at scale.
 

Ideation:

Design Systems is a product, serving products.

As DocuSign's official design system, Olive serves a wide range of designers and developers building digital products and experiences.

The goals of the system include improving UI consistency and quality, making the design and development process more efficient and focused, establishing a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.

Design System should support mobile, web marketing and web applications platforms.

Design System should support mobile, web marketing and web applications platforms.

Olive Architect

Colors, Icons, Fonts, Images, CSS baed components library and react components library falls under Olive team unbrella.

 

Newsletter

  • Constant communication using monthly newsletter that goes out to users of Olive and contains updates and new things we’re working on.

Deliverables:

Component library

  • Build component library using react and storybook 4.0.
  • Olive is DocuSign’s internal style guide and component library that is used by all the front end teams. A
  • common library ensures we have a consistent look and feel across all of our products.
  • It also allows engineers to work faster because they don’t have to continuously build duplicate components.
File Input Html vs React

File Input Html vs React

Olive component library Sites

 

End to end ownership

  • As Design System engineer, you have end to end ownership to support consumers.
  • Developer will own gathering Component requirements to develop it and release it on
Mind Map For Packages Deploying Npm Scripts

Mind Map For Packages Deploying Npm Scripts

Organzied Design System Wednesday at DocuSign

  • Design Systems Wednesday is an event organized by the San Francisco Bay Area design systems community. Designers, developers, and product owners from different companies come together and work in the same space.
  • The Olive team has been participating in Design System Wednesday for over the last 6 months at different locations like Zendesk, Eventbrite, Facebook, and Airbnb. We were able to bring knowledge from the design systems community back to the Olive design system.
  • DocuSign were honored to be able to host Design Systems Wednesday.
  • The event sold out with 30 people registering from various companies like Thumbtack, Uber, Abstract, Confluent, Riffyn, PayPal, and others.
Design System Wednesday At Docusign

Design System Wednesday At Docusign

Other Challenges

  • CSS vs JSS
  • Higher Order Component vs Object vs RenderProps vs Function
  • How to define API's
  • Devops for projects
  • Accessibility