Redwood Design System

Redwood is Oracle’s new user experience design language. Its mission is to unify the user experience of over 300 applications by putting the customer needs at the center of each interaction we design.

Opportunity

A fundamental piece of Redwood is its Design System. We started out by identifying 140+ components that make up the new design system. These components can be used either in their basic form or in conjunction with each other to create larger composites and patterns. 

Users

• Oracle application developers

• Platform developers

• Oracle product owners and designers

• External clients

Role

As a design lead, I have many responsibilities in this project.

• Define the end to end process identifying all the touchpoints in the journey of publishing a component spec. In every step of the way we interact with Developers, Product Teams and Product owners, Accessibility, Documentation and Internationalization teams

• Audit existing components and make recommendations on how to improve them

• Identify new patterns as they emerge from the latest designs

• Participate in the planning and resource allocation which occurs weekly

• Lead bi-weekly meetings for designers to share work progression receiving feedback from other designers 

• Promote cross-functional team collaboration between designers, developers and PM

• Assists and mentor designers with interaction specs, explaining the behavior of a component and its functionality across all of the applications while ensuring all the specs are completed and published for development

• Design, write and publish specifications documents for input components and patterns

Specifications

The deliverable of the work is a specifications document that is written for Oracle application developers, Oracle platform developers, Oracle product owners and designers, and external clients. Each spec covers Usage, Anatomy, Behavior, Visual and Motion Design. These components are designed mobile-first. However, in the behavior section, we cover touch, mouse, and keyboard interactions as well as responsive behavior.

I lead the following set of components, composites and patterns:

Input Components encompasses text input and text area, selection controls, and Form Layout.

Prototypes:

• Truncation behavior for text input with a suffix. Play prototype ‣

• Text input responsive behavior. Play prototype ‣

Attachments included document upload workflow, five data collections that hold attachments across devices, and Image Viewers.

Prototypes:

• Upload behavior on desktop. Play prototype ‣

• Upload error while during upload behavior in mobile. Play prototype ‣

Form Layout provided design, usage, and behavioral guidelines for consistency across forms in the application.

Prototypes/Specs:

• Responsive behavior for column direction. Play prototype ‣

• Responsive behavior for table shrinking. Play prototype ‣

Progressive Loading defines the loading of individual components as well as page loading patterns.

Prototypes:

• Component loading. Play prototype ‣

Takeaways

• For this multi-year initiative to succeed, executive sponsorship is required

• Collaboration, coordination and communication are essential for the progression of a project this size

Redwood Videos