Graphical Process Designer (GPD)

🔧 Case Study: Designing the Graphical Process Designer (GPD) for the Future of ITSM

🧭 1. The Call to Adventure

TOPdesk’s ITSM platform had a problem: it was fragmented, siloed, and bloated. Each request type — incidents, changes, problems, operational activities — existed in its own isolated module. This complexity resulted in clunky interfaces, inconsistent UX, and difficult cross-team collaboration.

Internally, it looked like “every module was designed by a different team.” Externally, competitors were surpassing us with modern, integrated tools.

That’s when the Graphical Process Designer (GPD) was envisioned: a new way for application owners to design, visualize, and manage processes in a unified, intuitive, and future‑ready interface — anchored in BPMN, but flexible enough for the real-world needs of IT, HR, and facilities teams alike.

🚧 2. The Challenge

Organizational Barriers:

• Stakeholders were hesitant to abandon a system beloved by existing customers.
• There was no clear MVP at the beginning — only a vision.

Technical Constraints:

• The existing app was built on a legacy monolith (Mango UI) with no modern scalability.
• Moving to a greenfield stack (HTML5, SVG, DOM) required deep exploration and buy-in.

UX Hurdles:

• We needed to build accessibility into a highly visual, drag-and-drop interface — no small feat.
• Defining complex process elements like gateways, decision trees, and task types required simplifying abstract logic into approachable UI.

Despite these constraints, we pushed forward with full research commitment and long-term strategy.

🔁 3. The Journey

📊 Research & Discovery (Phase 1 – 4 Years Ago)

• Affinity diagrams
• Workflow mapping across 4 key modules
• Customer journey maps
• Personas, sitemap, and idea dump boards
• UX audit of form flows, incidents, and escalations

We gathered over 30 key insights including:

• “Too many clicks for basic tasks.”
• “Terminology is confusing and inconsistent.”
• “Power users need faster keyboard navigation.”
• “Customers expect automation, integrations, and AI-driven suggestions.”
• “The interface doesn’t reflect how departments work in reality.”

🧪 Design & Prototyping (Phase 2 – Today)

Fast forward 4 years: we resurrected the work with a leaner team and a sharper focus.

Prototype Evolution:

• Lo-fi paper sketches → wireframes → hi-fi MVP
• Introduced a canvas drawing tool, drag-and-drop toolbar, and side panel for task properties
• Built new UI patterns from scratch: command bar, keyboard shortcuts, and accessibility-first interactions
• Explored manual vs. system tasks, reusable workflow elements, and visual task-linking via SVG and DOM

We’re now testing the MVP with users, asking them to build real workflows (e.g., onboarding, password resets) to validate comprehension and ease of use.

✨ 4. The Transformation

🎯 MVP Highlights:

• Allows users to design workflows via BPMN‑style drag‑and‑drop interface
• Users can define:
  • Manual tasks (e.g., inventory checks)
  • System tasks (e.g., automated API calls or email notifications)
• Includes out‑of‑the‑box workflows: password resets, new software requests, onboarding
• Fully integrated with the request card via APIs

🔄 What It Solves:

• Replaces siloed, module‑bound tasks with flexible, request‑based workflows
• Simplifies routing, ownership, and visibility across departments
• Offers a streamlined UX and modern interaction model
• Lays the groundwork for automation, analytics, and AI

🏆 What I’m Proud Of:

• Accessibility depth — keyboard navigation, tab sequences, and a command bar interface supporting screen readers and power users
• Inventing a new interaction paradigm within TOPdesk from the ground up
• Building on years of research instead of starting from scratch

🔭 5. The Return

💡 What I Learned:

• Designing scalable process tools requires collaboration across every team: service design, request management, task handling, notifications, SSP, and knowledge base.
• Defining task behaviors in the side panel was the most complex — and most impactful — design challenge.
• Maintaining alignment across UX, group managers, POs, and devs is just as critical as interface polish.

🔄 Trade‑offs for MVP:

• No multi‑language support at launch
• No AI‑assisted task generation (yet)
• Focused only on a subset of BPMN elements (the most‑used 5–6)

🧱 What’s Next: Scaling the Vision

🌐 A Unified “Design Hub”:

• Form Designer → design dynamic input forms
• Workflow Designer (GPD) → define business logic
• Action/Event Manager → configure triggers
• Service Designer → build service catalogs
• SSP Designer → tailor self-service portals by business unit

🤖 AI & Analytics:

• Auto-suggest next steps in workflows
• Track bottlenecks and optimize with data
• NLP to create workflows from text input
• Intelligent validation based on previous process runs

"GPD is not just a module. It’s the beating heart of the next-gen TOPdesk."