Amazon – Diagraph
How to design and develop a responsive online application to simplify debugging for Amazon Workflows and how it significantly improved debugging efficiency and user satisfaction.

Project Overview
DiaGraph project aimed to simplify debugging for the Amazon Workflows team by developing a user-friendly UI, reducing development time, improving error resolution, and increasing customer satisfaction through collaborative efforts and innovative solutions.
This project was born in a 3 day Hackathon. One month before the hackathon, in our free time, we started designing it. After the hackathon, we kept iterating over the initial MVP*, continuously releasing necessary features based on user feedback and developers’ input.
My Contributions
I was part of a 5 Software Developer Engineer II team. I led the design of DiaGraph’s UI, facilitated user testing, collaborated with Process Engineers*, and ensured the tool significantly improved debugging efficiency and user satisfaction.
Tools Used
Situation
Amazon Workflows Team
Background
Initially, Workflows (WFs) were coded by developers in text editors using ION*. The San José Development team created WFs Designer, making WFs development accessible to non-developer users like Process Engineers (PE). It was easier for management and non-technical roles to understand. However, no diagnostic tools existed to check WFs execution without reading the code.
While the WFs Designer accelerated the development process, it aggravated the developer bottleneck. There were more processes to fix, with the same number of developers, and fewer processes to create. And so, developers ended up serving as QA for the PE team. And PEs had to wait long times to get a developer assigned to their workflow issues.
Problem Statement
Debugging Workflows at Amazon was a complex, time-consuming, and frustrating process leading to significant issues:
- Slow error detection and correction of production errors led to customer dissatisfaction.
- The workflow development and testing processes were slow and a huge waste of time and money, causing company-wide discontent.
- Workflow developers frequently left the team due to the difficulty and annoyance of the task.
Why
The Workflows team had to review up to 200,000 lines of ION* process because there was no User Interface (UI). This was required for every process execution that needed fixing, updating, or confirmation to ensure that it ran smoothly.
The Process
Goals
- Reduce development, testing, and debugging time.
- Improve the debugging experience for seasoned developers and ease the process for new users.
- Increase customer satisfaction by speeding up error resolution.
Hypothesis
Our proposed hypothesis was that developing a UI would:
- Decrease response times for SEV2* incidents.
- Shorten testing and debugging times.
- Facilitate iteration to improve workflows already deployed to production.
- Reduce the risk of developers leaving the team.
Research
Our research strategy encompassed:
- Content audit: we wanted consistency through all our tools. That is why we studied the WF Designer and created a Design System from it.
- Thanks to my experience in BPM with tools like IBM BPM, Auraportal, and Bonita, I could effectively perform a competitive analysis, identifying key strengths and weaknesses to optimize our business processes.
- Focus groups with developers: to define the biggest pain points we were facing as a team and improve our productivity.
- Interviews with Process Engineers: to empathize with them and understand in which cases they couldn’t finish their tasks so we could give them more freedom.
- Usability testing with developers and Process Engineers. Once we had the MVP I performed moderated online sessions, gathered the feedback, and shared it with the team.

Competitive analysis : debug examples of Flowable, IBM BPM and Bonita.
Design & Development
The following are the highlights of the key features designed and implemented to enhance user experience and functionality:
- Consistent UX: Similar to WF Designer for consistency and user familiarity.
- Single Page Application: Ensures a smooth, uninterrupted navigation without full page reloads, resulting in a more fluid and enjoyable user experience. The interface remains consistent across different sections of the application, reducing cognitive load and making it easier for users to understand and navigate.
- Customizable UI: Includes dark mode and adjustable division sizes. Allows users to tailor the interface to their preferences and needs, enhancing satisfaction and engagement by providing a more relevant and comfortable experience
- Left Panel: Displays main process information and selected task details (names, inputs, outputs).
- Main Panel: Clickable Workflow View with subprocess navigation and task information updates.
- Upper Panel: Breadcrumbs for easy navigation (ProcessName > SubProcess1 > SubProcess2). They provide a clear and concise path for users to trace their steps back to previous processes, enhancing overall site navigation and usability. They help users understand their current location within the process hierarchy, reducing confusion and making it easier to explore other subworkflows. With this design we will offer a minimalist and non-intrusive way to navigate complex workflows, enhancing the overall user experience without cluttering the interface.
- Lower Panel: ION file and a Find feature to search for error codes and step names.
- Step-by-Step Debugging: Allows detailed examination of workflows.
- Navigation: Zoom and drag-and-drop features.
- Color Coding: Green for successful tasks, red for errors. This will improve comprehension and user usability speed and reduce user errors. It will also enhance memory retention by creating visual associations.
- Standard Compliance: Follows Business Process Management Notation standards.

Image of a paper wireframe.
Conclusions
Learnings
Introducing new team members brought fresh ideas and perspectives, fostering a more inclusive culture and enhancing creativity and innovation. A diverse team of five new developers and Process Engineers from various countries significantly improved the debugging phase.
Involving Process Engineers made them feel part of the development, increasing their willingness to help improve the tool and providing them with independence in debugging. This reduced waiting time for developers and allowed developers to focus on new features, creating a win-win situation.
Next Steps
DiaGraph is now an essential debugging tool. Future plans include adding new features to keep up with Engine and WFDesigner tool developments and addressing issues like WF deployment and code duplicity.
Glossary
Amazon Ion
Amazon Ion is a richly-typed, self-describing, hierarchical data serialization format offering interchangeable binary and text representations. The text format (a superset of JSON) is easy to read and author, supporting rapid prototyping.
Amazon SEV2
Amazon Sev2 is a code and name pair that represents the severity level of a support case. Codes go from 5 to 1, being 1 the most severe. A SEV 2 incident is a “major incident with significant impact,” including when a client-facing service is down for a sub-set of customers or a critical function within a system is not functioning.
MVP
A minimum viable product, or MVP, is a product with enough features to attract early-adopter customers and validate a product idea early in the product development cycle. In industries such as software, the MVP can help the product team receive user feedback as quickly as possible to iterate and improve the product.
Process Engineers
Subject matter experts in business processes and process design.