Oracle Cloud Infrastructure (OCI) Design System Toolkit and Library
Project Summary
One stop shop for consumers of the Oracle Cloud Infrastructure (OCI) design system to get up and running building products with our newly redesigned design system.
Skills:
Design Systems, Design Guidelines, UI Design
Role:
Lead Principal UX Designer, Manager of the OCI Design System
Team:
UX Directors, UI Developers, UX Researchers, UX Designers, UX Writers
Made a one stop shop for consumers of the Oracle Cloud Infrastructure (OCI) design system to build products quickly with our newly re-designed design system.
The Problem
- Too many design libraries with little to no guidance.
- OCI specific templates and components were not documented.
- No reusable component library available for designers.
The Goal
- Make a single document that simplifies multiple libraries and guidelines.
- Document OCI specific templates and components.
- Make a reusable component library.
The Process
- Identify challenges
- Research design systems
- Take inventory of Redwood design system structure
- Take inventory of OCI design system structure
- Plan reusable component library and guidelines
- Roll out beta and collect user feedback
- Plan communication process
- Plan intake and update processes
- Iterate and launch first version
OCI needed to adapt and streamline Oracle’s enterprise design system, Redwood, to better serve its users.
Phase One
Take inventory of Oracle's Redwood design system and OCI's design system
The diagram outlines all the necessary assets, with the challenge being to consolidate them into a single, easy-to-understand document for OCI designers.
Next step - Plan the restructuring of the consolidated OCI design system
The final simplified structure of the OCI design system.
Plan the single guidance doc and the reusable component library
Collaborating with fellow UX designers and UI developers, I defined the layout and default content within the guidance document. Ensuring the guidance page would serve both as a resource for designers and as a final handoff to UI development.
It was designed to be maintained using two Figma files:
- OCI custom component Figma library
- OCI toolkit
The OCI custom component Figma library held reusable components and templates. It pulled in components from the master Redwood component library.
The OCI toolkit became the one source of truth, it housed all of the OCI design guidance, components and templates and also intake out of the box components from Redwood design system.
We linked out to our custom OCI Storybook (React/Preact) and the the Redwood JET (JavaScript Extension Toolkit) cookbook.
IA Planning for toolkit
I proposed the information architecture and the content for each page. After reviews with leadership and fellow UX designers, we finalized the approach.
Design and layout of the guidance templates
Collaborating with fellow UX designers and UI developers, I defined the layout and default content within the guidance document. We ensured the guidance page would serve both as a resource for designers and as a final handoff to UI development.
Planning and organization of Figma reusable component library
Enlisting two other UX designers we established the format of the reusable Figma component library.
Phase Two
Roll out beta of toolkit and library to collect feedback and iterate.
Phase Three
OCI Toolkit and component library final rollout
I announced the new design system and continued support to all consumers by:
- Communicating via slack channel.
- Hosting bi-weekly open office hours to share updates to the design system and promote collaboration.
- Organizing training sessions and recorded videos to onboard designers, product managers, and engineers to the new design system.
- Providing documentation on how to contact key designers for support and sign up for 1:1 sessions.
Results and Impact
Feedback from design system users has been overwhelmingly positive, with many highlighting how it significantly accelerated their production time. This eliminated several rounds of redesigns by ensuring initial design drafts were in compliance with organization-wide design system standards.
The successful launch was further enabled by my assistance with questions or complex issues. This sped up organizational adoption of the new design system, allowing users to manage the change process smoothly and without delay.
Phase Four
Planning for the future, new component intake, new pattern intake and roadmaps
Prior to final launch I established the processes for:
- New component and template intake using the Jira ticketing system.
- Documenting future roadmaps for the toolkit and library with key stakeholders and engineering.
- Documenting, communicating and rolling out updates to the toolkit and library.
