DocuSign Olive

Design System for digital products and experiences

www.docusign.com/blog/developers/docusign-olive-style-guide-to-front-end-system

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:

Olive design system is a product, serving DocuSign 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.

Olive Architect

It includes UI components, layouts, colors, icons, typography, svgs, linting, styles and development documentation under Olive team unbrella. Team also started providing accessibility and Front-end best practices support to DocuSign's product and marketing teams.

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

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

Developed Design Multiverse Website

DocuSign Product Experience(PX) team hosted our first fully remote mini-conference called Multiverse. I got a chance to collaborate with a few folx to create this website that served as one of the entry points for the 260+ attendees.

This is my first time using webflow for web development. It took one weekend to develop the site with a basic layout and structure using astonishing features of webflow designer tool. Click here for dribbble design.

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.