Vapor/Redwood

Context

In 2018, I joined the Oracle Data Cloud design team as a fully remote employee. With working remotely comes the importance of being intentional about communication, and being on the same wavelength as your teammates.

Introduction

As a part of my onboarding was the learning of style guides, and the way the design team approached a new project. While doing this, I found that the design team did not have one single source of truth as far as style guidelines, and certainly not a design system to build new projects with cohesively across different products and team members.

The Vapor Logo

Finding Value

The project was received well, but that doesn’t mean building it became a top priority the next day. We still needed to get buy-in from engineering leadership to begin building the one React library the would help bring cohesion between what design had started dreaming up. We also needed product leadership to give engineering priority to do that work of uniting us all.

If We Build It

A design system team began forming, made up of myself as the lead from the design stand point working closely with a lead from the engineering side. To make sure the entire team felt involved in decision making and understood where they could contribute, we started holding weekly meetings discussing new needs for the design system.

Vapor Button States
Vapor Input States
Vapor Control States

Migration & Adaption

About a year and a half after started to build Vapor as a library design and engineering referenced to create cohesive interfaces and experiences, allowing us to have implemented these visual and technical changes in much of our product, Oracle proper released their design system called Redwood.

Redwood Spatial Scale
Redwood Page Notification Alert
Redwood Button

Sharing & Usage

With a distributed team in an enterprise company, distributing the design system can be a challenge. Limiting access to VPN’s and file syncing software restricts the ability to sync the design system assets easily with constant updating.

Vapor Left Panel Template
Vapor Full Page, Right Panel, and Takeover Templates
Sketch Data Examples
Redwood Documentation for Colors, Icons, and Typography

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store