Technical Excellence Centre Copy

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.

‍