Context

The problem with governance tools

Global enterprises run thousands of process variants across regions, systems, and exceptions. Governance Process Owners (GPOs) are responsible for ensuring global compliance — but the tools they used weren't built for decision-making.

They spent hours stitching insights from dashboards, exports, emails, and spreadsheets. I redesigned the governance experience inside SAP Signavio's Process Variant Analyzer (PVA) to make decisions faster, clearer, and fully traceable.

Understanding the Problem

Built for exploration, not governance

The existing experience was built for exploration, not governance. GPOs had to jump between multiple tools to gather context, manually calculate risk scores in Excel, and rely on analysts to interpret root causes. Governance actions — approve, reject, assign — were happening in email threads, leaving no traceability.

The biggest issue wasn't lack of data; it was lack of a system that supported decision-making. GPOs needed a single place where they could understand a variant, evaluate its risk, and take action without losing context.

Understanding the User

The real pain: cognitive load, not complexity

Through interviews with GPOs and analysts across NA, EMEA, and APAC, I learned that the core pain wasn't the complexity of the process — it was the cognitive load created by scattered information. GPOs were expected to ensure global compliance, but the tools forced them into manual detective work.

This clarified that the solution needed to be decision-first, not analytics-first. The entire design direction shifted based on this single insight.

Research & Discovery

Audit + competitive analysis

I conducted a UX audit of the existing PVA experience and mapped the governance workflow end-to-end. I also analysed four competitors — Celonis, ARIS, UiPath, and IBM — to understand how the market approached variant analysis and governance.

The audit revealed five critical gaps:

• No unified scoring model — risk lived in spreadsheets
• No prioritisation or severity indicators — everything looked equally urgent
• No root-cause visibility — analysts had to dig manually
• No built-in governance actions — decisions happened in email
• No audit trail — compliance decisions were untraceable

Design Principles

Four principles to prevent scope creep

These principles helped align the cross-functional team and gave us a shared vocabulary for evaluating design decisions throughout the project.

Concept Exploration

From three directions to one truth

I explored several directions, including table-based comparisons, multi-panel dashboards, and side-by-side variant cards. Through testing, I learned that GPOs preferred a single-variant view with clear scoring and a persistent action panel.

The biggest challenge was balancing transparency with simplicity. Data science wanted to expose the full complexity of the scoring model, while GPOs wanted a high-level score they could trust. I solved this by using progressive disclosure: a simple score upfront with expandable sections for deeper detail.

Final Design

One screen, everything you need

I designed a GPO Dashboard that gives governance owners a global view of compliance health at a glance — compliance score, high-severity deviations, regions requiring attention, SLA breaches, and top governance issues.

The variant queue ranks variants by risk, severity, and frequency — ensuring GPOs always start with the highest-impact issues. The core variant detail screen keeps the decision and the context in one place:

• Left side: Compliance score, scoring breakdown, root-cause analysis, evidence, process metadata
• Right side: Approve / reject / assign actions, due dates, notes, automatic audit trail

Impact

From 18 minutes to 2 minutes

Reflection

Designing for trust

This project fundamentally changed how PVA supports governance. By shifting the product from an analytics-first tool to a decision-ready system, I helped GPOs move from manual detective work to confident, data-driven decision-making.

The biggest learning was the importance of designing for trust. Transparency in scoring, clarity in root causes, and a clean, focused layout were essential to building confidence in the system. This project strengthened my ability to balance technical complexity with user-centered simplicity — something I carry into every design challenge.

Context

Hundreds of revisions, no good way to compare them

SAP Signavio's process analysts review hundreds of diagram revisions every week — yet their comparison workflow relied on a fragmented side-by-side view that forced users to mentally map changes across two separate panels.

I redesigned the comparison experience into a unified Overlay Comparison Mode that preserves spatial context, reduces mental effort, and enables analysts to evaluate changes directly within the diagram.

The Challenge

High cognitive load, slow decisions

Process analysts were struggling with a workflow that was fundamentally broken:

• High cognitive load from mentally aligning two diagrams simultaneously
• Loss of spatial orientation when switching between revision views
• 4.5+ minute comparison cycles for a task that should take seconds
• Frequent misinterpretation of added, removed, or modified elements
• No unified workflow — context switching broke concentration

User Context

Who are process analysts, and what do they need?

Process analysts operate in a high-volume, compliance-critical environment. They're not casual users — they're power users who need to move quickly and trust their tools. Speed and accuracy are non-negotiable; confusion is costly.

Research & Discovery

Mapping what exists before designing what's next

I conducted contextual interviews with analysts, observed live comparison sessions, and ran a heuristic evaluation of the existing interface. I also benchmarked against GitHub diff views, Figma version history, and Adobe Compare Documents to understand established mental models for change comparison.

Information Architecture

Restructuring how changes are surfaced

The old IA scattered change information across panels, tabs, and tooltips. I restructured it around a single diagram view with a contextual change panel — keeping the diagram as ground truth and surfacing changes as annotations within it.

Design Process

From wireframes to Fiori-aligned system

Final Design

One diagram, every change visible

The final Overlay Comparison Mode layers change states directly onto the diagram using colour-coded highlights — green for added, red for removed, amber for modified. A collapsible change panel on the right provides a filtered list, summary stats, and one-click navigation to each change.

Impact

Clarity at scale

Reflection

Enterprise users want clarity, not features

This project reminded me that enterprise users don't want more features — they want clarity. When workflows are complex, even small design decisions can make a big difference in reducing mental effort. Preserving spatial context, showing only what's needed, and letting users dive deeper when they choose — these principles drove every decision.

Working closely with analysts, engineers, and the design systems team helped me shape a solution that feels simple, even though the underlying problem was deeply complex. Knowing which Fiori components to use — and how to configure them correctly for this context — was as important as the interaction design itself. Good enterprise design is about removing friction, not adding layers.

Context

200+ brands, zero consistency

Diageo's global portfolio spans 200+ premium spirits brands — yet their product detail pages (PDPs) were fragmented, inconsistent, and difficult to scale. Each market had evolved its own templates, creating a maintenance nightmare and diluting the premium brand experience.

As the UX designer for this initiative at DEPT Agency, I led the redesign of a unified PDP framework working within Diageo's Honeycomb design system — ensuring every design decision aligned with the existing token library and component architecture, and scaled consistently across all markets.

The Challenge

12 templates, 7 CTA styles, 40% bounce rate

• Inconsistent layouts that diluted brand value — each market looked different
• 7+ CTA styles creating a broken, unpredictable interaction model
• Accessibility failures across the board — below WCAG 2.1 AA
• Mobile responsiveness issues contributing to a 40% bounce rate
• 12 different PDP templates making scaling to new brands nearly impossible

UX Goals

One system, every brand

Research Insights

What users actually care about on a PDP

I conducted a Baymard-based heuristic evaluation of the existing PDPs and analysed session recordings and analytics to identify the most common drop-off points. Combined with competitive benchmarking across premium drinks and luxury e-commerce, this shaped the content hierarchy.

User Flows

Mapping the path from discovery to purchase

I mapped three core user flows — direct landing, search-led, and recommendation-driven — to understand where the PDP fits in the broader journey and what information each type of visitor needs first.

Concept Exploration

Wireframes: testing structure before style

Low-fidelity wireframes allowed rapid validation of information priority, content balance, CTA placement, and modularity before any visual design decisions were made.

• Priority of product information vs brand storytelling
• Readability of long-form tasting notes and product history
• Balance between hero imagery and descriptive text
• CTA placement tested at 3 different scroll depths
• Modular section order for scalability across SKU types

Design System Integration

Working within Honeycomb

Rather than building components from scratch, every design decision was made within the constraints and affordances of Honeycomb — Diageo's existing design system. This meant working with established tokens for spacing, border radius, colour, and interaction states, and selecting the right existing components rather than creating new ones. The result: zero design system debt, consistent output across all brands, and an engineering handoff that needed no custom work.

Typography

• Confident H1 for product titles — brand presence, immediate recognition
• Clear section headers that create scannable structure
• High-contrast body text meeting WCAG 2.1 AA
• Structured metadata styles for ABV, region, bottle size

Reusable component library

Final Design

Premium, structured, scalable

The final PDP delivers a cohesive experience across all 200+ brands: immediate access to key product metadata, rich storytelling through tasting notes, history, and awards, a frictionless mobile layout, and a modular structure that engineers can configure per SKU without custom work.

Impact

One system, measurable results

Reflection

The power of UX systems thinking

This project sharpened my understanding of what it means to design within a mature design system rather than alongside one. Working within Honeycomb's constraints was a design exercise in itself — understanding which components served each use case, how to adapt them without breaking system integrity, and when to flag a genuine gap to the design systems team rather than improvising a workaround.

The key learning: working within an existing system is not a constraint on creativity — it's what allows creativity to scale. Every brand that comes onboard now has a faster path to market, and the product is more consistent and trustworthy as a result.

Context

1,000+ components. No good way to find them.

OpenTelemetry is the second most active CNCF project in the world — yet the developer experience for discovering its components was almost entirely undocumented and undesigned. Engineers evaluating OTel for their stack, operators upgrading existing deployments, and contributors building new integrations all shared the same entry point: a raw GitHub registry with no search, no filtering, and no context.

The v1 Ecosystem Explorer redesign (GitHub Issue #84) set out to fix this. I joined as Senior Lead UX Designer — volunteering with a team of international maintainers — to define the discovery UX strategy, conduct a full screen-by-screen audit of the v1 mockups, and design a WCAG 2.1 AA accessible stability badge system before the feature shipped behind a production flag.

The Problem

Three structural gaps threatening a well-designed foundation

The v1 mockups — four screens covering the Home page, Ecosystem Landing, Component List, and Component Detail — demonstrated strong information architecture and a clean visual language. But the audit surfaced three structural problems that would undermine the experience for the primary audience:

• Search scope ambiguity: The global search bar and the nav search bar appeared simultaneously with identical placeholder text on the home page. Engineers couldn't tell which to use, what each searched, or whether they returned different results — on the single most important screen in the product.
• Stability badge accessibility failures: All four stability badges — Stable, Beta, Alpha, Deprecated — relied on colour as the sole primary differentiator in the list view. This failed WCAG 1.4.1 for colour-blind users (affecting ~8% of male engineers) and provided no semantic meaning to assistive technology.
• Missing failure states: None of the four screens showed an empty or error state. For a search-primary product, the no-results journey is equally important as the happy path — and it was completely undesigned.

User Personas

Three users, three opposing search behaviours

Through analysis of the OTel community profile and the Explorer's stated purpose, I identified three distinct personas that needed to coexist in one interface — and whose needs frequently pulled in opposite directions:

Research & Audit

Four screens. Twenty-four findings.

I conducted a structured UX audit of all four v1 mockup screens, mapping every finding to a severity level (Critical / High / Medium / Low) and a persona. The audit ran in parallel with a WCAG 2.1 AA compliance matrix — assessing eight criteria across all four screens.

Search Journey Analysis

Four journeys. Four failure modes. One fix each.

I mapped four critical search journeys against the v1 screens to identify exactly where users would fail and why. Each journey had a single structural root cause and a direct design intervention:

Stability Badge Accessibility

All four badges failing. None unfixable.

The stability badges — the single most important trust signal for every developer using the Explorer — were failing on multiple WCAG criteria simultaneously. I ran a detailed audit of each badge against four criteria and designed a complete remediation system.

Design Recommendations

18 recommendations across five principles

The full audit produced 18 recommendations, organised into a priority matrix (do now / plan / defer) and grouped under five design principles that drove every decision:

Key Deliverables

What was produced and handed to the team

Screen 04 — Component detail (Kafka Receiver): beta badge has no tooltip, "Diff →" is too subtle for Omar's primary task, tabs lack ARIA states, pipeline has no text alternative