As part of the Oracle Application Lab (OAL)’s UI Standard project, I was involved in building OAL’s custom components by either enhancing the existing component library or creating new custom components.
Project>
The OAL Component Library
Team & Role>
Within the OAL team, I contributed to creating the Figma custom component library while cooperating with other team members who were researching the global Oracle’s Redwood Design System and updating the OAL UI Standard documentation.
Objectives>
These are the main objectives of the project as follows:
- Strategizing the Balance: Make the right design decisions to leverage the balance between the global Redwood Design System’s standards and the specific customization needs of the OAL
- User-Centric Enhancements: Identify the pain points within the OAL design team workflows and reflect these resolutions directly in the functionality of the OAL custom components
- Standardizing the Library: Enhance existing OAL components to align them seamlessly with the updated OAL UI Standard Component Library
-
Developing New Custom Assets: Create new OAL custom components as required:
- Design functional Figma component building blocks
- Develop interactive workflow prototypes to effectively demonstrate component functionality and how they seamlessly fit into various OAL product line applications
- Optimizing the Workflow: Streamline the component creation process within the Figma component library file for version control and clear documentation, resulting in greater efficiency.
Technical Platforms>
Figma prototype tool
UX & UI Process>
- Review Current Documentation
- Review the current OAL component library
- Research the Global Redwood Design System standards
- Discover User Pain Points
- Conduct the user interviews with the OAL design team peers
- Architecture & Workflow Design
- Design the component architecture and define the workflow
- Analysis & Preparation
- Create the Figma building block’s component checklist
- Component Development
- Build the Figma atomic components & their component building blocks
- Interaction Design
- Build interactive workflow prototypes
- Quality Assurance & Feedback
- Perform the peer review within the OAL design team
- Complete the design review with the OAL leadership for approval
- Publication
- Publish the updated component library documentation on the OAL UI Standard Library website
Key Takeaways for Custom Component Examples>
- The OAL Global Header Component
- Components were built to reflect three distinct types of responsive screens: Fixed, Full-Width, Edge-to-Edge screen types
- Components were built for large screens with specific breakpoints: 1440+ <1536, and ≥1536
- The OAL Suite Application Component
- Components were developed to support two primary layout options: horizontal and vertical menu screens
- The Configure Applications component was built to allow designer users to customize the functionality of the component suite
- The OAL User Menu & Impersonation Components
- Two component groups were developed: User Menu, Impersonation Drawer component groups
- Complex impersonation scenarios were handled through the Figma component building blocks and workflow prototypes
Component Creation Process Pipeline>
- Component Release Title Card
- Project start and completion dates
- Review feedback records
- Design update records
- Approval/pending review status
- Speculation Checks
- Designer specs
- Development specs
- Other considerations
- Figma Component Architecture Design
- Key-coded component’s properties
- Workflow design
- Atomic component to build checklists
- Figma component building blocks
- Figma component instances
- Figma component workflow prototypes
Challenge 1) The OAL team faced a significant challenge with multiple product lines using their own custom UI components, leading to design inconsistency and inefficient workflows.
=> Resolutions:
The OAL team identified a critical need for standardization, deciding to unify under a single, shared UI library. This initiative motivated me to create a flexible system of component options that can be managed within Figma building blocks, designed to meet diverse product branding requirements while ensuring consistency.
For the few product lines requiring their highly customized legacy components, we provided access to dedicated legacy library versions to manage the transition and minimize disruption.
Challenge 2) The global Redwood Design System undergoes constant updates, which affect the stability and maintenance of OAL custom components.
=> Resolutions: