Redesign of Enterprise Flow Modeler
ABOUT PROJECT
The project centers on the redesign of an Enterprise Integration Flow modeler, focusing on enhancing the canvas section that allows users to design, monitor, and manage complex integrations. While the broader goal was to improve the usability and overall user experience of the entire platform, this phase of the project concentrated on the canvas, a key workspace where users visually build and manage integration flows.
MY ROLE
This was a solo 30-week graduation project completed under the guidance of Peepaldesign (sponsor) and my academic mentor.
Responsibilities included:
-
User research and stakeholder interviews
-
Journey mapping, persona creation
-
Problem definition and prioritization
-
Ideation, wireframing, and prototyping
-
High-fidelity UI design aligned with Fiori
-
Integration of AI-driven UX features
-
Final documentation and presentation
OBJECTIVE
To redesign the canvas interface—the central workspace where users create and manage integrations—by making it more intuitive, efficient, and scalable for both technical and non-technical users.
UNDERSTANDING THE PRODUCT
Enterprise Integration Platform is an Integration Platform as a Service (iPaaS) software. It is a cloud-based middleware that facilitates seamless data exchange and process automation between disparate applications, services, and systems. It allows enterprises to integrate both cloud-based and on-premise solutions efficiently without requiring custom development.
Integration Platform
WHAT DOES SAP INTEGRATION SUITES DO ?
Integration Suite is a cloud-based Integration Platform as a Service (iPaaS) that enables organizations to:
-
Connect Heterogeneous Systems
-
Enable Seamless Data Exchange
-
Support End-to-End Integration Scenarios
-
Serve Business-Critical Use Cases
Devices
Social
Apps
SaaS
iPaaS
B2B Partners
& Customers
Database
Enterprise
CANVAS — THE HEART OF INTEGRATION
Within the iPaaS platform, the canvas serves as the central workspace where users can visually design, manage, and monitor integration workflows.
The workspace typically allows users to drag and drop various components, such as connectors, data flows, and processing steps, and link them together to build complex integrations without needing to write extensive code.
Search
Services
Phase 1 - Discover (Exploration)
Phase 2 - Define (Problem Definition)
Phase 3 - Develop (Ideation and Prototype)
Phase 4 - Deliver (Final Refinements)
Understanding the Domain
User Research
Synthesizing Insights
Ideation & Concept Development
Prototyping & Validation
High-Fidelity UI & Design System
Problem
Discover
Research
Problem
Definition
Define
Develop
Deliver
Design
Solution
PROPOSED DESIGN METHODOLOGY
by Community Experience
Growth 2024
INTEGRATION FLOW
An integration flow defines how a message is processed on a tenant. It enables integration developers to specify integration patterns such as mapping or routing, using a graphical editor to design message processing steps and define in detail what happens during each stage of processing.
A sender tile connects via a channel arrow inside the Integration Flow Box.
Step 1 connects to Step 2, which in turn connects to Step 3.
Step 3 branches out into multiple channel arrows, each leading to a receiver tile, representing the multiple potential endpoints.
Integration Suite serves multiple stakeholders within an organization, each with unique needs and challenges. Understanding these stakeholders helps refine the UX strategy to address specific pain points.
STAKEHOLDER ANALYSIS
Enterprise IT Teams → Need reliable & scalable integrations; struggle with complex setup & troubleshooting inefficiencies.
Business Analysts & Citizen Integrators → Require low-code tools & automation; face accessibility challenges & IT dependencies.
Developers & Integration Architects → Need strong API management & debugging tools; lack real-time collaboration & clear documentation.
Executives & Decision Makers → Focus on scalability, cost & ROI; concerned about vendor lock-in & analytics transparency.
End-Users (Business Users) → Need seamless data sync & intuitive workflows; struggle with integration delays & visibility.
Third-Party Vendors & Partners → Require reliable SAP API connectivity.
High Interest
Business Analysts
Citizen Integrators
SAP Consultants
Senior executives
IT leaders
Compliance Officers
Low
Influence
API Developers
High Influence
End-Users
Support Teams
Business Operations
Customer Service Representatives
Integration Architects
Third-party Vendors
Low Interest
Phase 1 - Discover
Stakeholder Analysis
SAP Integration Suite serves multiple stakeholders within an organization, each with unique needs and challenges. Understanding these stakeholders helps refine the UX strategy to address specific pain points.
SAP Integration Suite serves multiple stakeholders within an organization, each with unique roles, needs, and challenges.
Enterprise IT Teams: Manage integration projects, system connectivity, and security compliance. They require reliable, scalable integrations but struggle with complex configurations, a steep learning curve, and troubleshooting inefficiencies.
Business Analysts & Citizen Integrators: Focus on workflow automation without coding expertise. They need low-code tools and self-service options but face accessibility challenges, complex data mapping, and IT dependencies.
Developers & Integration Architects: Build and maintain integrations and APIs. They require strong API management, real-time monitoring, and debugging tools but lack real-time collaboration, clear documentation, and debugging efficiency.
Executives & Decision Makers: Drive digital transformation and IT investments. They prioritize scalability, cost-effectiveness, and ROI but are concerned about vendor lock-in, ROI assessment, and analytics transparency.
End-Users (Business Users): Rely on integrated applications for daily tasks. They need seamless data synchronization and intuitive workflows but face issues like integration delays, inconsistent updates, and limited system visibility.
Third-Party Vendors & Partners: Organizations that integrate their applications with SAP systems via APIs and need reliable connectivity.
High Influence
Low
Influence
High Interest
Low Interest
Business Analysts
Citizen Integrators
SAP Consultants
End-Users
Support Teams
Business Operations
Customer Service Representatives
Senior executives
IT leaders
Compliance Officers
API Developers
Integration Architects
Third-party Vendors
Stakeholder Analysis Matrix
KEY PERSONAS
Aakash Durve(Senior Integration Architect)
Summary
Aakash leads the overall integration strategy for a government-owned energy organization. He focuses on structured documentation, artifact management, and migration from legacy SAP PO to SAP Cloud Integration..
Goals:
Ensure smooth SAP PO to Cloud Integration migration
Standardize naming conventions and documentation
Coordinate cross-platform integrations
Enable scalable and testable API strategies
Prevent redundant configuration errors
Pain Points:
“SAP UI is rigid… prone to session expiry and relogin.”
“Configuration steps are often manual, prone to confusion.”
SAP Cloud lacks orchestration strength of SAP PO
Complex migration of legacy logic
Rarely
Daily
Occasionally
Frequency of Use:
Siddhi Dalve ((Cloud Integration Developer)
Summary
Siddhi works hands-on with customers and internal teams to create, test, and troubleshoot integration flows. Her primary challenge is UI clarity during deployment and error tracking.
Goals:
Deliver accurate customer-requested iFlows
Reduce time spent debugging unclear errors
Streamline deployment and visualization steps
Improve validation before release
Simplify reuse of existing configurations
Pain Points:
No “Deploy All” option: manually deploy each artifact.
No visual indicator for deployment state: unclear what’s been deployed or updated.
Breadcrumbs disappear when switching tabs: causes context loss during flow creation.
Error messages are too generic: doesn’t know which step failed or why.
Message mapping lacks visual cues: hard to verify connections or logic visually.
Rarely
Daily
Occasionally
Frequency of Use:
Rati Gadkari(Integration Developer)
Summary
Rati creates and maintains complex integration flows within SAP Integration Suite. She works extensively inside the Canvas interface building, mapping, and testing iFlows. Her role demands precision, visual clarity, and tool responsiveness.
Goals:
Design and update integration flows across systems
Maintain clarity and performance in large, complex iFlows
Ensure reusable and compliant flow structures
Optimize message mapping and transformation logic
Deliver error-free flows ready for deployment
Pain Points:
Canvas gets visually cluttered in big flows
No zoom or minimap makes navigation hard
No step-grouping leads to chaos in complex flows
Switching to message mapping breaks visual context
Canvas lags or freezes with 20+ steps
Rarely
Daily
Occasionally
Frequency of Use:
USER JOURNEY MAPPING
Aakash Durve(Integration Architect)
Scenario: Aakash is migrating SAP PI/PO flows to SAP Integration Suite while ensuring technical alignment across platforms and teams.
Touchpoints
SAP PI/PO environment
JIRA, Confluence
Vendor and internal sync meetings
SAP Integration Suite (Design, Artifacts)
SAP BTP cockpit
Internal documentation templates
SOAP UI, Postman
Internal peer review boards
SAP Integration test logs
SAP Monitor
Project deployment dashboards
Internal rollout documentation
Reviews legacy orchestration and dependencies
Aligns migration scope and naming standards
Configures tokens, endpoints, headers
Follows structured naming and documentation rules
Simulates message flow, tests for performance
Reviews peer feedback and updates artifacts
Deploys to production BTP environment
Monitors performance and documents process
Feature overlap between PI/PO and Cloud
Missing visualizations of legacy integrations
Manual steps often missed
UI lacks feedback on configuration errors
SAP Cloud tools feel less capable than PI/PO
Logs are hard to interpret in complex flows
No rollback or granular version preview
Failures are hard to isolate post-deploy
Provide side-by-side feature comparison tools
Visualize flow dependencies pre-migration
Provide config checklists and pre-deployment validations
Highlight misconfigurations with inline hints
Add visual replay of flow steps
Improve error traceability in Monitor tab
Add rollback, version preview, and partial deploy
Enable post-deploy flow visualization timeline
Plan & Align
Design
Test
Deploy
Actions
Pain Points
Emotions
Opportunities
A clear and structured artifact naming framework
Deployment flow with rollback, preview, and error handling
Visual tools to compare legacy and new integration logic
Streamlined monitoring that identifies failed steps clearly
Expectations
Siddhi Dalve (Cloud Integration Developer)
Scenario: Siddhi is responsible for designing, deploying, and troubleshooting customer-specific iFlows using SAP Integration Suite.
Touchpoints
Customer tickets or calls
Internal team meetings
SAP documentation
SAP Integration Suite (Design tab, Monitor tab)
Internal flow library and reusable templates
Monitor tab
Bruno (internal Postman-like tool)
Correlation ID tracking
SAP Integration Suite deployment panel
Shared team documentation and review
Understands use case and integration scope
Gathers system specs and message flow needs
Builds custom iFlows
Connects systems using message mapping and endpoints
Simulates messages, checks for success/failure
Uses correlation ID to trace issues
Deploys validated flows to production
Shares flow and troubleshooting steps internally
Placeholder field names (like “PIP”) confuse configuration
Limited guidance for queue naming and flow design
No visual indicator of deployment state
Cannot create queues manually
Errors are generic (e.g., "queue not found")
Flow steps don’t indicate where the error occurred
Must re-download or recreate deployed flows to edit
Cannot undo minor mistakes
Standardize queue and naming conventions
Improve onboarding tutorials and use case examples
Add real-time deployment status for each flow
Allow queue creation within the design editor
Provide precise error descriptions with step-level insights
Highlight failed nodes in the iFlow canvas
Add edit, undo, and version rollback functionality
Introduce "Deploy All" for bulk updates
Understand Requirements
Design
Test & Debug
Deploy
Actions
Pain Points
Emotions
Opportunities
Intuitive visual feedback during flow configuration
Detailed and actionable error tracing
Smooth transitions between design, test, and deploy modes
Ability to reuse and manage artifacts with minimal repetition
Real-time validation and flexible debugging tools
Expectations
Rati Gadkari – Integration Developer
Scenario: Rati builds and maintains complex iFlows in SAP Integration Suite Canvas. Her focus is on visual clarity, reusability, and error-free flow logic.
Touchpoints
SAP Canvas
Internal flow library
Predefined templates and config guides
SAP Canvas (Design Area)
Message Mapping editor
Endpoint and configuration tabs
Message Mapping tool
SAP Monitor tab
Internal simulation/testing panel
Canvas
Deployment panel
Internal documentation tools
Reviews project requirements
Loads existing templates or starts new iFlow
Adds flow steps, message mappings, and connectors
Defines parameters and configurations
Maps data fields between systems
Simulates flow and checks for output consistent
Validates and finalizes configuration
Shares iFlow for peer review or deployment
Existing templates are inconsistent
No built-in checklist or canvas state indicator
Canvas becomes messy with overlapping lines
No zoom or step-grouping makes large flows unmanageable
Switching between mapping view and Canvas breaks flow
Breadcrumb context is lost; can’t trace easily
Canvas slows down with complex logic
No visual summary or overview of what’s ready
Add pre-checks and visual completeness status
Improve consistency in reusable templates
Enable zoom/minimap
Allow step grouping and connector auto-alignment
Maintain breadcrumb trail across views
Embed mapping previews in Canvas
Provide a "flow summary" or visual report
Optimize Canvas performance for 20+ steps
Plan
Build
Test
Deploy
Actions
Pain Points
Emotions
Opportunities
A clean and intuitive flow-building experience
Canvas features like zoom, minimap, and grouping
Retained context while switching to mapping or endpoint views
Responsive performance, even with complex flows
Clear visual indicators for readiness and completeness
Expectations
COMPETITOR STUDY
A competitor analysis was conducted to benchmark the canvas component of the integration platform against leading solutions in the market.
-
Platforms with guided, low-code builders make integration creation easier and more accessible across user roles
-
A modular, drag-and-drop canvas with grouping and reusable components is key for managing complex workflows
-
Inconsistencies in visual design and navigation often lead to slower onboarding and higher cognitive load
-
AI integration is becoming standard — used for smart suggestions, error detection, and workflow recommendations
-
Scalability and performance must be prioritized, especially as integrations grow in complexity
A competitor analysis was conducted to benchmark the canvas component of the integration platform against leading solutions in the market.
UX AUDIT – KEY USABILITY ISSUES
-
No clear guidance or walkthrough for new users
-
Dropdowns lack visual cues (icons/descriptions)
-
Primary actions (like “Start Flow”) not clearly emphasized
-
Canvas visually cluttered with overlapping lines
-
Poor accessibility: Small fonts, low contrast
-
The delete function deletes any selected object without confirmation.
-
There is undo and Redo options.
-
With such a large, complex flow, users have no quick way to navigate to different sections of the flow.
-
Properties window is almost hidden at the bottom
-
No error summary panel
IDEATION
After identifying core problems and defining key goals in the Define phase, the project moved into Ideation and Concept Development. This phase focused on transforming research insights into tangible design ideas that could guide the creation of an improved canvas interface.
Reviewing research insights to ensure ideas addressed real user pain points.
Framing key “How Might We” questions to rephrase problems into opportunities.
Conducting collaborative brainstorming sessions to encourage diverse perspectives.
Clustering and prioritizing ideas based on feasibility, impact, and alignment with design goals.
WHAT THE RESEARCH REVEALED
After identifying core problems and defining key goals in the Define phase, the project moved into Ideation and Concept Development. This phase focused on transforming research insights into tangible design ideas that could guide the creation of an improved canvas interface.
STRUCTURING THE EXPERIENCE
Following the expansive brainstorming sessions and prioritization of ideas, the next step was to bring structure and clarity to the design direction.
Section
Function
Defines sender-receiver systems and technical connection details.
The main path where steps such as mapping, transformers, or routers are added.
Includes calls, sub-processes, security elements, and message routing.
Houses error messages, inline comments, tags, and validations.
Participants & Adapters
Core Processing Area
Supportive Components
Validation & Annotations
NAVIGATION SCHEMA
This Navigation Schema was designed to address key usability concerns uncovered during research: difficulty tracking position within large flows, confusion when navigating grouped or parallel processes, and lack of immediate access to frequently visited or recently edited steps
Minimap
(Global Orientation Tool)
A floating overlay, typically anchored in a corner of the canvas, the minimap offers a zoomed-out view of the entire flow.
Trigger - Auto Trigger
Display - Floating overlay (corner-docked)
Breadcrumb Navigation
Appears at the top or inline with grouped steps, breadcrumbs trace the user’s current location within nested flows or sub-processes.
Trigger - Auto-generated on step grouping
Display - Inline horizontal trail
Canvas Panning and Zooming
Users can pan by dragging the canvas or use directional scroll to explore large workflows. Zoom controls (via toolbar or shortcuts) help focus on specific nodes or step groups.
Jump-to-Step Search
A search utility that allows users to type and locate any flow step by name, tag, or function.
Trigger - Auto Trigger
Display - Floating overlay (corner-docked)
Step Pinning & Anchoring
Users can pin key steps or branches (e.g., a frequently edited mapping block) for one-click access later.
Trigger - Pin icon click or right-click menu
Display - Small persistent pin tab
Dynamic Flow Badges
Each group or step carries a small, visible badge that shows its type or condition (e.g., ️for errors, validated, AI-suggested).
Trigger - Auto-rendered based on system status
Display - Inline badge next to component
Guided Navigation Mode
A temporary overlay system that walks new users through the flow using arrows, tooltips, and step-by-step instructions.
Trigger - Triggered via Help menu or first-time user login
Display - Overlay walkthrough with arrows, tooltips
AI Assistant Toggle Button
A floating icon or switch that allows users to enable or collapse the AI Companion panel.
Trigger - Auto Trigger
Display - Floating overlay (corner-docked)
Smart Auto-Center on Focus
Automatically centers the canvas on the selected step when it’s clicked or searched.
Trigger -Auto-triggered on search result or step select
Display - Smooth center animation on canvas
Zoom-to-Fit View
A single-click option that auto-zooms and centers the entire flow within the visible canvas.
Trigger - Toolbar button
Display - Instant canvas adjustment (animated scroll)
Sticky Headers in Flow View
Basic labels like “Start of Flow,” “Group: API Calls,” or “Routing Logic” stay visible during vertical scrolling.
Trigger - Auto-detected while scrolling
Display - Inline sticky element
AI-Focused Relevance Highlighting
When the AI Companion is enabled, it can highlight steps or sections that are most relevant to a given goal
Trigger - AI Companion contextually detects
Display -Subtle visual overlays
Split Canvas View
Allows users to open two parts of the same flow in a horizontal split view.
Trigger - Button on toolbar
Display -Horizontal split-screen with linked panning
Action Bar
A small contextual toolbar that appears when clicked over a step or connector.
Trigger - Click on step/connector
Display -Floating contextual bar below the component
SKETCHING & CONCEPTUALIZATION
Initial sketches ranged from quick structural compositions to more refined layout variations for elements.
Canvas Layout Exploration
Integration Flow Start Point
Integration Flow Start Point
First Steps
Canvas Layout Exploration
Action Bar in Canvas
WIREFRAMES
The sketches were first converted into low-fidelity wireframes to validate functionality and flow. These were then iterated into more refined mid-fidelity wireframes, which introduced clearer structure and interaction logic.
DESIGN SYSTEM & UI FOUNDATIONS
Fiori Design System was used as the base framework. It provided a strong foundation for enterprise-grade UX, enabling alignment with SAP's visual language and interaction patterns.
#EBF8FF
#0070F2
#FFFFFF
#F5F6F7
Primary Colours
List Selection
#758CA4
Primary 1
Brand/Links/Highlights
#1D2D3E
Primary 2
Primary 3
Primary 4
Base colour/
Containers
#556B82
Home/
Background
Header 1
Main Title
72 - 24px - Bold
Header 2
Titles
72 - 20px - Semibold
Header 3
Title 2
72 - 16px - Semibold
Sub headers 1
Sub titles
72 - 16px - Regular
Large Text
Standout texts ( Names, files, etc)
72 - 16px - Regular
Medium Text
Default Text ( buttons, inputs, tables )
72 - 14px - Regular
Small Text
Exceptional use cases within controls, such as time stamps or a unit of measurement
72 - 12px - Regular
Primary 5
Borders
Primary 6
Text & Titles
Subtitles/Labels
Primary 7
Semantic Colours
#AA0808
#E76500
#256F3A
#788FA6
Grid Guidelines:
4pt spacing scale used throughout (e.g., 8px, 16px, 24px gaps)
Modular layout containers support left-to-right flow construction
Alignment points are defined to support nested groups and simulation tracks
Margins around the canvas ensure breathing space and prevent element overlap at breakpoints
Typography
Negative
#0070F2
Critical
#FFEAF4
Positive
#F5FAE5
Neutral
Information
Negative Background
Positive Background
FINAL SCREENS
The final screens represent the culmination of research insights, interaction decisions, and visual system thinking established throughout the project. These interfaces reflect a carefully crafted balance between clarity, scalability, and task-oriented workflows, built upon the foundation of the Fiori Design System.
Meet the New Enterprise Integration Canvas
Smarter. Cleaner. Designed for Everyone.
SCREEN MOCKUPS
REFLECTIONS
This project brought together many moving parts in form of technical complexity, enterprise UX, user empathy, and system thinking. It wasn’t just about designing screens, but about understanding how workflows function in real-world environments and where design can truly make a difference.
Designing for Complexity Requires Clarity
Working on an enterprise tool taught me that clarity isn’t just a visual principle it’s a strategic one. Every decision needed to reduce friction, not just look good.
AI Can Be Human-Centered
Integrating AI was not about replacing user decisions, but about assisting them at the right time. It made me rethink how intelligence and usability can work together meaningfully.
Process matters more than perfection
Design evolved with every iteration. Sometimes things did not land on the first try, but being open to feedback and letting the process guide the outcome made the design stronger.
Enterprise users have layered needs
I realized that different users approach the canvas with different goals and levels of expertise. The design had to serve developers, analysts, and architects without favouring just one.
Research is the foundation of good design
The insights from user journeys, interviews, and competitive analysis were not just checkpoints. They shaped the entire direction of the canvas and grounded every decision I made.