Case study

Technical Excellence Centre Copy

Transforming Oil & Gas Operations with Predictive AI: A UX Journey Behind TEC

Overview

TEC (Technical Excellence Center) is an AI-powered platform designed to revolutionize asset management in the oil and gas industry. It serves as a central hub for predictive insights, empowering users to proactively prevent equipment breakdowns, optimize maintenance, and reduce operational losses.

Developed for two key user groups:

  • Business Users: Technical authorities from business sectors who need to identify operational production units (OPUs) causing the most financial loss in USD.
  • Engineers: Project engineers responsible for predicting maintenance needs for equipment and sub-equipment to prevent breakdowns and minimize downtime.

By replacing traditional scheduled maintenance with AI-driven predictive analytics, TEC provides a holistic view of asset conditions and performance. The platform is structured to offer enterprise-wide and cross-business insights into asset health, enabling more informed decision-making.

TEC’s Strategic Objectives
  • Improve Overall Equipment Effectiveness (OEE) and Unplanned Downtime (UPD) by 2%, targeting RM1 billion in savings by FY2025 through full data transparency.
  • Present a comprehensive enterprise-wide overview of asset health and fleet performance.
  • Strengthen Centers of Excellence (COEs) as the core for plant risk management and long-term asset resilience.
  • Enable proactive interventions to address high-impact and recurring anomalies.
  • Bridge the gap between performance gaps and actionable solutions, fostering continuous learning and best practices across the enterprise.

By integrating internally built AI and leveraging comprehensive data coverage, TEC transforms traditional maintenance into a predictive, insight-driven approach, allowing businesses to make smarter, data-backed decisions for long-term operational efficiency.

Role:
  • Defined and led the UX strategy across cross-functional teams
  • Facilitated design discovery workshops with OPU leaders and AI engineers
  • Mapped complex relationships in the business value chain into intuitive visual flows
  • Designed a real-time dashboard system with modular components and red-dot alerts
  • Collaborated closely with the AI, dev, and business teams for smooth implementation
  • Advocated for a scalable design system and process adoption across teams
  • Tools:
    • Figma
    • Figjam
    • Working with AVEVA

    Challenges

    1. Delayed Data Delivery: The Domino Effect on UX Processes

    In a large-scale project like TEC, seamless collaboration between multiple teams—business analysts, data analysts, engineers, and stakeholders—is critical. However, delays in receiving crucial data from other teams disrupted our workflow, impacting sprint cycles and design timelines.

    Without finalized business and technical requirements, our team often had to make assumptions, leading to UX decisions that later required significant revisions. To keep up with tight deadlines, some UX processes were initially compromised, resulting in designs that didn't fully align with user needs. These setbacks not only slowed progress but also made it evident that a more structured requirement grooming process was necessary to ensure our designs tackled the right problems from the start.

    2. Managing Stakeholder Expectations: Balancing Aesthetics & Design System Limitations

    As a project under a giant oil & gas corporation, TEC was required to adhere to the company’s design system, Emerald Hue. While this ensured consistency across enterprise products, it limited creative flexibility, making it challenging to meet stakeholder expectations for visually compelling dashboards.

    The stakeholders envisioned modern, visually striking designs, yet deviating from the design system required extensive validation for accessibility, usability, and scalability. To navigate this challenge, we introduced moodboards and iterative UI explorations, helping stakeholders visualize possible solutions while aligning them with design system constraints. Additionally, when a feature or component wasn’t covered by the design system, we collaborated with the design system team to justify necessary enhancements—ensuring that TEC’s visual language evolved without sacrificing efficiency or usability.

    3. Prototyping Under Constraints: Bringing TEC to Life Without Code

    With development delays pushing back key milestones, the design team had to step up and deliver an interactive, high-fidelity prototype in Figma—one that stakeholders could use to showcase TEC’s capabilities.

    This was not a typical click-through prototype; the expectation was for a fully immersive experience where users could freely navigate, interact with data visualizations, and explore predictive insights as if the product were fully developed.

    To meet this challenge, we leveraged advanced Figma prototyping techniques, including variables, booleans, and conditional interactions, to create a seamless and dynamic experience. Since the project owner wanted unrestricted navigation rather than a rigid user flow, we refined our approach through multiple iterations, ultimately developing a prototype that felt natural, responsive, and close to the final product—all while maintaining design precision and data accuracy.

    These challenges pushed our team beyond conventional UX approaches, refining our ability to advocate for proper UX processes, balance constraints with innovation, and create solutions that drive real impact.

    Design Process

    1. Requirements Gathering & Cross-Team Collaboration

    • Conducted stakeholder workshops to define business needs, gather feedback, and align expectations between Business Users, Engineers, and the AI development team.
    • Created detailed user journeys, personas, and user flows to validate assumptions and ensure TEC addressed the core pain points of both Business and Engineering users.
    • Advocated for structured requirement grooming sessions to minimize ambiguity and reduce unnecessary design revisions.

    2. Wireframing, Prototyping & Early Validation

    • Designed low-fidelity wireframes to visualize solutions and address feedback before committing to UI designs, preventing costly rework.
    • Developed advanced high-fidelity prototypes in Figma, leveraging variables, booleans, and conditional interactions to create a fully interactive experience that mimicked a real product.
    • Integrated real data where applicable, ensuring the prototype accurately reflected TEC’s AI-driven insights.

    3. Usability Testing for Data-Driven Design Decisions

    • Introduced usability testing sessions to validate design solutions with end users, ensuring the platform effectively addressed real-world challenges.
    • Scheduled focus group sessions with Engineers and Business Users, gathering insights on pain points, usability concerns, and AI-generated recommendations.
    • Iteratively refined UI and interaction patterns based on testing feedback, ensuring usability, clarity, and intuitive navigation.

    4. Stakeholder Communication & Alignment

    • Created mood boards and UI concepts to set stakeholder expectations and presented two design approaches:
      a) Enhanced visuals beyond the design system, requiring additional accessibility, scannability, and compliance testing.
      b) Strict adherence to the Emerald Hue design system, with potential exceptions negotiated with the design system team for justified enhancements.
    • Advocated for a balanced approach, ensuring TEC maintained usability and business impact while staying within branding and system constraints.

    5. Design Audit & Quality Assurance

    • Conducted thorough design audits, ensuring the developed product maintained visual and functional consistency with the original Figma designs.
    • Worked closely with developers to address UI inconsistencies, interaction gaps, and accessibility concerns, ensuring a polished final product.
    • Maintained continuous collaboration between design, engineering, and AI teams to align expectations and ensure smooth implementation.

    By integrating structured requirement grooming, iterative prototyping, usability testing, and rigorous design validation, we ensured TEC delivered a seamless, data-driven experience that met both business and engineering needs while aligning with enterprise standards.

    Solution & Key Outcomes

    1. Refining UX Processes for Greater Efficiency

    To address the frequent delays in data delivery, we restructured our workflow to ensure UX efforts were more adaptable and efficient:

    • Shifted focus to early-stage validation by iterating on wireframes and user flows before committing to high-fidelity UI designs. This minimized unnecessary rework when requirements evolved.
    • Advocated for structured requirement grooming sessions, ensuring that business and engineering teams provided clearer insights before the design phase.
    • Educated the project team on UX workflows, helping stakeholders understand the importance of validating flows and interactions before UI execution, preventing misaligned design iterations.

    This approach reduced last-minute design changes, streamlined decision-making, and improved collaboration across disciplines.

    2. Aligning Stakeholder Expectations Without Compromising UX Integrity

    Given the constraints of Emerald Hue, the company’s design system, our challenge was to balance stakeholder expectations for high-impact visuals with strict UI guidelines. Our strategy included:

    • Creating moodboards and low-fidelity UI explorations to showcase aesthetic possibilities within the system’s limitations, helping stakeholders visualize the final product early.
    • Proactively negotiating with the design system team to introduce justified UI enhancements, ensuring compliance while pushing for innovative solutions that improved usability.
    • Presenting clear trade-offs: If stakeholders wanted deviations from the system, we outlined the additional testing requirements (e.g., accessibility, scannability, responsiveness), allowing them to make informed decisions.

    This structured approach to stakeholder alignment enabled us to balance expectations, push design improvements where possible, and maintain efficiency without unnecessary back-and-forth.

    3. Creating a High-Fidelity Prototype That Feels Like a Real Product

    With development delays, our design team took the lead in crafting an advanced interactive prototype in Figma to simulate TEC’s full experience, ensuring that key stakeholders and potential investors could explore its capabilities seamlessly.

    • Leveraged Figma variables, booleans, and conditional interactions to create a dynamic experience where users could navigate freely without a predefined path.
    • Integrated real data where possible, ensuring the prototype closely reflected TEC’s AI-driven insights and asset monitoring functionalities.
    • Designed smooth micro-interactions and transitions to enhance the experience, mimicking a fully functional system rather than a static demo.

    This prototyping-first approach not only addressed development bottlenecks but also positioned TEC as a cutting-edge AI-driven solution, impressing leadership and key stakeholders.

    4. Driving Visibility & Impact Across the Organization

    By bridging data transparency with predictive AI insights, TEC gained significant traction within the organization:

    • Recognized as a game-changing initiative for improving operational efficiency in the oil & gas sector.
    • Attracted increased interest from internal leadership and potential investors, reinforcing the value of AI-driven asset management.
    • Sparked discussions on future enterprise-wide adoption, solidifying TEC’s role as a central hub for predictive insights.

    Through strategic UX advocacy, iterative design refinement, and high-fidelity prototyping, TEC’s success demonstrated the impact of thoughtful UX design in large-scale industrial AI solutions.

    Visual Design

    Due to the confidentiality of this project and the sensitivity of the data involved, I am unable to share the full user interface. As per project requirements, any visuals must be blurred or redacted. I appreciate your understanding and apologize for any inconvenience.

    Lesson Learned

    1. Advocating for UX Leads to Better Outcomes
      Educating stakeholders on structured UX processes reduced rework and improved alignment, ensuring design decisions were user-driven rather than assumption-based.
    2. Creativity Thrives Within Constraints
      Balancing stakeholder expectations with the strict design system pushed me to find innovative solutions while maintaining consistency and accessibility.
    3. Prototyping as a Communication Tool
      Leveraging advanced Figma prototyping bridged development delays, allowing stakeholders to experience the product realistically and gain confidence in its potential.
    4. User Validation is Essential
      Introducing usability testing ensured our designs weren’t just business-approved but also validated by real users, leading to solutions that solved actual pain points.
    5. Collaboration Drives Success
      Navigating cross-functional dependencies taught me how proactive communication and expectation management are key to delivering a successful enterprise platform.

    Reflection

    TEC was more than just a project—it was a lesson in navigating complexity, aligning cross-functional teams, and driving user-centered solutions at an enterprise scale. Balancing stakeholder expectations while working within the constraints of a strict design system challenged me to think creatively and strategically.

    The opportunity to lead UX efforts mid-project reinforced the importance of advocacy, process refinement, and the impact of early validation. Introducing usability testing and refining collaboration with engineers, analysts, and business teams led to stronger, data-driven design decisions.

    Beyond the design itself, TEC demonstrated the transformative power of AI-driven insights in the oil and gas industry, bridging the gap between data, decision-making, and real-world operational improvements. Seeing my designs contribute to a globally impactful solution was incredibly rewarding, and I look forward to applying these lessons to future challenges.