From Friction to Flow
Redesigning the Automate Evolve
Centralized Workflow and Process Automation Platform
CONTEXT
Automate Evolve is a web-based enterprise platform for automating complex SAP data processes. ​​
​
-
It enables users to build intuitive web forms, design approval workflows, and integrate SAP automation scripts—all in one place.
-
Teams can collaborate across departments while maintaining data governance, process control, and traceability.​
HIGH LEVEL TIMELINE
9 months
(Design + Prototype + Testing)
MAKE OF THE TEAM
I worked on this project single handly
​​Problem Overview​​​​​​​​​​​​​​​​​​
Legacy complexity blocked user efficiency.
Automate’s interface had become cluttered and inconsistent, creating friction and slowing users down.
Key Challenges
-
Cognitive overload: Outdated layouts and hidden features made workflows error-prone.
-
No research foundation: The product lacked clear personas or usability insights.
-
Low adoption: Developers relied on workarounds to complete basic tasks.
Lots of white space
Outdated ribbon menu
No info on rules
Inconsistent styling
Poor visual hierarchy
Overloaded sidebar
Actions not upfront
Outdated ribbon menu
Poor visual hierarchy
Not enough canvas space
Limited contextual help
Cluttered UI
Poor element Organization
Properties panel issues
Inefficient Workflow
Tab Overloaded
Accessibility concerns
MY ROLE
-
Independently led the Automate Composer redesign as the Principal Interaction Designer, driving the end-to-end UX transformation from discovery to delivery.
-
Defined the problem space, conducted stakeholder and user research, and mapped complex workflows to uncover and address key pain points.
-
Designed a scalable, intuitive interface grounded in real user needs and aligned with enterprise standards through close collaboration with product and engineering teams.
Design Opportunity
Led a research-driven redesign to modernize UX, simplify workflows, and improve usability, scalability, and customer confidence.
The goal was not just visual modernization, but a research-driven transformation that uncovered real user pain points and delivered a faster, clearer, and more scalable experience for enterprise users.
​​
Research and Insights
​To understand real-world user pain points, I conducted a multi-layered discovery process involving
Stakeholder Interview
Customer Interview
Contextual Usability Sessions
CHALLENGES
Key Insights
Users spend most of their time working with rules, but the current rule builder doesn’t meet their needs. It lacks contextual guidance, offers no quick transition to JavaScript, and feels limiting for power users who need more flexibility and efficiency.
The canvas feels too cramped — the toolbar, multiple view tabs, and advanced element panels take up most of the space, leaving very little room for actual form building.
The Solutions screen contains a lot of valuable information, but it isn’t presented in a user-friendly or visually clear way. The layout feels dense and overwhelming, making it hard for users to quickly grasp key details.
PERSONA
COMPETITIVE JOURNEY
The Design Approach
-
We followed a research-led design process focused on improving discoverability, clarity, and reducing user friction.
-
Each design decision was informed by usability insights, customer interviews, and validation through iterative testing.
Design Principles
Four core principles that guided the transformation of Automate Designer, ensuring both usability and powerful functionality for enterprise users.
Context, Always Visible
Keep users oriented with relevant data
Design Influence
-
Created contextual panels that show relevant properties
-
Eliminated need to switch between tabs for related information
Context, Always Visible
Advanced features without complexity
Design Influence
-
Created contextual panels that show relevant properties
-
Eliminated need to switch between tabs for related information
Empower Power Users
Clarity Over Complexity
Simplify dense information structures into logical groupings
Design Influence
-
Removed unnecessary UI elements and reduced visual clutter
-
​Implemented clear visual hirarchy with consistent spacing
PROCESS
We evolved the design through multiple stages — from paper sketches, to low-fidelity wireframes, to high-fidelity interactive prototypes — ensuring alignment between design intent and user needs throughout the journey.
Before & After
FORM
Before
After
Problems Identified
-
Outdated Visual Design​​​
Heavy ribbon interface with outdated styling and excessive borders created visual clutter
-
Limited Canvas Space
Cramped working area with insufficient room for form design and preview
-
Poor Information Architecture
Rules and validation logic buried in panels, making them hard to discover
-
Context Switching
Users couldn't see canvas and properties simultaneously, forcing constant navigation
-
Inefficient Workflow
Critical save/deploy actions hidden in other tabs, requiring extra steps
-
Overwhelmed Users
Overloaded sidebar with too many nested options creating cognitive overhead
-
Modern, Clean Interface
Replaced heavy ribbon with streamlined top bar featuring clear visual hierarchy and bright accent colors
-
Canvas-First Layout
Maximized workspace with collapsible panels and multi-view support for better focus
-
Contextual Properties Panel
Right panel displays relevant controls for selected elements, reducing search time
-
Surfaced Rules & Actions
Rules visible on canvas with quick-access action panel for common workflows
-
Simplified Navigation
Streamlined left navigation with clear hierarchy and improved organization
-
Consistent Design Language
Unified spacing, modern components, and cohesive color system throughout
Solutions Implemented
SOLUTIONS
Before
After
Problems Identified
-
Low Contrast & Grayscale Design
Monochromatic interface with poor visual hierarchy makes it difficult to distinguish between different sections and elements
-
Unclear Data Hierarchy
External data and workflow elements are presented with equal visual weight, lacking clear organization
-
Limited Visual Feedback
No clear indication of data status, progress, or element importance through color or visual cues
-
Dense Information Layout
Information is tightly packed without adequate spacing or visual grouping
-
Lack of Contextual Visualization
No visual representations (charts, progress indicators) for workflow data
-
Rich Color System
Implemented purposeful color coding with purple accents for branding and status indicators
-
Clear Visual Hierarchy
Organized content with cards, clear headings, and strategic use of white space
-
Data Visualization
Added circular progress indicator (155 score) and clear metrics display
-
Contextual Panels
Solution Library sidebar provides quick access to related tools and resources
-
Modern UI Components
Consistent buttons, badges, and interactive elements following design system
-
Improved Readability
Better typography, spacing, and contrast ratios meeting WCAG AA standards
-
Inconsistent Component Styling
Mixed use of borders, boxes, and containers without a cohesive design system
Solutions Implemented
-
Workflow Visualization
Visual workflow diagram with node connections for better process understanding
WORKFLOW
Before
Problems Identified
-
Cluttered Workflow Canvas
Nodes appeared disorganized with inconsistent spacing and unclear relationships
-
Limited Workspace
Small canvas area with minimal room for complex workflows
-
Poor Node Visibility
Nodes lacked clear labels, icons, and status indicators
-
No Contextual Properties
No visible properties panel for selected nodes
-
Unclear Visual Hierarchy
All nodes appeared with similar visual weight and styling
-
Full-Screen Canvas
Maximized workspace with edge-to-edge canvas utilization and responsive design
-
Organized Node Layout
Clean grid-based alignment with consistent spacing and clear flow direction
-
Enhanced Node Design
Color-coded nodes with icons, clear labels, and status indicators
-
Contextual Properties Panel
Right-side panel showing relevant properties for selected nodes
-
Advanced Toolbar
Top toolbar with quick access to common actions and workflow controls
-
Visual Differentiation
Distinct colors for different node categories (triggers, actions, conditions)
After
Solutions Implemented
-
Improved Navigation
Left sidebar with organized workflow elements and templates
RULE CREATION
Before
After
Problems Identified
-
Modal Dialog Overload
Multiple overlapping modal dialogs create a confusing, disorienting user experience
-
No Visual Context
Dark overlay obscures the underlying interface, removing all spatial awareness
-
Limited Workspace
Small modal windows provide cramped space for building complex rule conditions
-
Unified Workspace
Full-screen interface replacing modal dialogs with an integrated workspace
-
Left Sidebar Navigation
Hierarchical tree view showing all rules, fields, and their relationships
-
Inline Field Configuration
Style, size, and formatting controls directly in the rule editor
-
Contextual Properties Panel
Right panel shows relevant properties and settings for selected rules
-
No Navigation Hierarchy
No visible structure showing rule organization or relationships between rules
-
Unclear Condition Builder
Condition creation interface is minimal and doesn't show the full logic structure
-
Rich Condition Interface
Multiple condition rows with field, operator, and value dropdowns in clean layout
-
Limited Field Configuration
Style and formatting options are hidden or require separate dialogs
Solutions Implemented
-
Visual Rule Types
Clear radio buttons for Validation, Formatting, and Actions with intuitive icons
-
Professional UI Components
Modern design with consistent buttons, inputs, and visual hierarchy
Business Impact
100%
Task Success
Users were able to complete the task without much intervention
-30%
Form Creation Time
Decreased form creation time
-50%
Rule Creation (Rule Builder)
Decreased rule creation time via rule builder
-25%
Rule Creation (JS Code)
Decreased rule creation time via JS code
"The new UI feels both different and familier - optimized for our workflow and making task easier. That's the ultimate gols."
"Cleaner design, collapsible panels, and canvas-first workflows make everything easier to manage."
"We loved the concept of Templates - a great way to start with a prebuilt setup, without needing export/import
"The search bar in rules is of high utility. The new rules experience feels modern, smart, and designed with real users in mind.”
Design Evolution
FORM
CREATE RULE
RULE LIST
SOLUTIONS
WORKFLOW
