Accelerating Product Design with Oracle Cloud Infrastructure's Reimagined Design System
Project Summary
I led the creation and rollout of the Oracle Cloud Infrastructure (OCI) Design System, establishing a scalable foundation that unified design and development across 150+ product lines.
I defined design standards and launched a comprehensive library of reusable, production-ready components, supported by clear documentation and guidelines. To ensure adoption, I facilitated bi-weekly education sessions with cross-functional teams of designers, engineers and product managers introducing best practices, showcasing new components and aligning on release timelines.
Results
This initiative transformed our design workflow by removing redundant processes, aligning teams around consistent standards and cutting design-to-development handoff time in half. We achieved faster product releases, streamlined operations and delivered a more cohesive user experience across the entire OCI platform.
Skills:
Design Systems, Design Guidelines, UI Design
Role:
Lead Principal UX Designer, Component Curator and Ambassador
Team:
UX Directors, UI Developers, UX Researchers, UX Designers, UX Writers
User Problem
Designers and engineers building on Oracle Cloud Infrastructure (OCI) needed a reliable way to design and implement consistent experiences quickly.
Multiple fragmented libraries, missing documentation for OCI-specific components and no reusable library created confusion, slowed production, reduced trust and led to inconsistent experiences across products.
Usability Issues
Too many libraries, no guidance: Designers wasted time searching across multiple sources, increasing onboarding time and creating inconsistencies.
No documentation of OCI-specific templates/components: Critical OCI patterns were undocumented, forcing teams to guess or reinvent solutions, leading to errors and rework.
Absence of a reusable component library: Designers couldn’t easily reuse or hand off components, slowing development and reducing alignment with engineers.
Impact
These challenges increased production time, created inconsistent product experiences and undermined confidence in the design system, limiting OCI’s ability to scale cohesive, user-friendly products.
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
Phase One
Take inventory of existing design systems, identify challenges, plan new library and guidelines.
OCI needed to adapt Oracle's enterprise design system, Redwood, to maintain a consistent brand and user experience. With this in consideration, I took inventory of the Redwood design system along with the existing OCI design system and mapped them out in a flow diagram.
Challenge 1: Consolidate all assets into a single, easy-to-understand document for OCI designers.
Challenge 2: Make sure any updates to the main Redwood design system tie in easily to OCI design system easily.
Next step - Plan a consolidated OCI design system file structure.
After researching design systems from our existing systems, to competitors or industry experts and working closely with our development team. I was able to consolidate a 9 file structure into a 4 file structure, with a single toolkit file that referenced all files.
Plan the single guidance document and the reusable component library
Conducting stakeholder meetings and gathering feedback from OCI UX Designers and UI Developers, I defined the layout and default content within the guidance document.
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.
The document linked out to our custom OCI Storybook (React/Preact) and the the Redwood JET (JavaScript Extension Toolkit) cookbook.
Information architecture planning for toolkit
I proposed the information architecture and the content for each page. After reviews with leadership and fellow UX designers, I finalized the approach.
Design and layout of the guidance templates
Conducting stakeholder meetings and gathering feedback from OCI UX Designers and UI Developers, I defined the layout and default content within the guidance document. I 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 I established the format of the reusable Figma component library.
Phase Two
Roll out beta of toolkit and library to collect feedback and iterate
I rolled out a beta figma toolkit and component library to a limited OCI UX Design and Development user audience to stress test the components and the guidelines. This took about 2 months of collecting feedback and making iterations.
This helped iron out issues with components being overwritten when updates had been made, minor interaction issues with reusable components and clarifying guidance and the structure of the guidance pages.
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
This initiative transformed the OCI product design workflow by removing redundant processes, aligned teams around consistent standards, cut design-to-development handoff time in half and increased trust in the design system. OCI achieved faster product releases, streamlined operations and delivered a more cohesive user experience across the entire OCI platform.
Consistency improved across 150+ OCI product lines with the introduction of the reusable component library and unified toolkit containing templates and guidance.
Onboarding was streamlined - New team members could easily locate the correct components and templates in a single toolkit, ensuring design drafts met compliance before UX board reviews. This reduced rework and accelerated product launch timelines.
Design-to-development handoff became faster and smoother through clearly documented patterns, interaction specs, redlines and direct links to development storyboards and the JET cookbook.
Cross-functional alignment strengthened through bi-weekly education sessions I facilitated with designers, engineers and product managers. These sessions introduced best practices, showcased new components and aligned release timelines, driving adoption and consistency at scale.
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 a 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.
