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 collaborated to map out how developers use and contribute to Olive so we could refine and communicate our process to the organization, with the ultimate goal of increasing the efficiency of both Olive and feature development teams.
• We aligned 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.
• We identified friction points in the development flow.
• We proposed and ranked potential solutions to these friction points.
• We reviewed and prioritized the backlog of solutions for the coming quarter.
• We focused on building design systems that help products solve problems at scale.

DocuSign Olive Process

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 designers and developers, and providing clear, discoverable guidance around design and development best practices.

Olive Architecture

It includes UI components, layouts, colors, icons, typography, SVGs, linting, styles, and development documentation under the Olive team umbrella. The team also provides accessibility and front-end best practices support to DocuSign's product and marketing teams.

Olive Process

Newsletter

• We maintained constant communication using a monthly newsletter that goes out to users of Olive, containing updates and information about new features we're working on.

Deliverables:

Component Library

• Built a component library using React and Storybook 4.0.
• Olive is DocuSign's internal style guide and component library used by all front-end teams.
• This common library ensures a consistent look and feel across all products.
• It enables engineers to work faster by eliminating the need to continuously build duplicate components.

Olive Component Library Sites

Olive Component Library Sites

End-to-End Ownership

• As a Design System engineer, I had end-to-end ownership to support consumers.
• I owned the process from gathering component requirements to development and release.

Developed Design Multiverse Website

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

This was my first time using Webflow for web development. It took one weekend to develop the site with a basic layout and structure using the impressive features of Webflow's designer tool. Click here for the Dribbble design.

Design Multiverse Website

Organized Design Systems 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 participated in Design Systems Wednesday for over six months at different locations including Zendesk, Eventbrite, Facebook, and Airbnb. We brought knowledge from the design systems community back to the Olive design system.
• DocuSign was honored 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.

Challenges

• Converting from CSS to JSS
• Ensuring accessibility compliance
• Deciding between Higher Order Components vs. Render Props
• Defining component APIs
• Working with DevOps for continuous integration and delivery
• Automating visual and unit testing for components