01 Overview
Eggplant is an industry-leading test automation and monitoring SaaS platform powered by AI and deep learning, enabling teams to test complex applications at scale.
The existing Modeler tool, a critical component of the platform, was built in an outdated Dojo framework and sat outside the newer React-based SaaS architecture. While functionally powerful, it lacked visual clarity, modern usability standards, and alignment with the evolving product ecosystem.
The challenge was twofold: migrate the Modeler into the new React SaaS platform without disrupting existing user workflows, and rethink and improve the experience to better align with how users actually conceptualise and build models.
The opportunity was not simply a technical migration. It was a strategic redesign to better connect user mental models with product capabilities.
02 The Problem
The legacy Modeler was built around a long-standing State and Action framework. Internally, the assumption was that users understood and embraced this structure. Research revealed a different reality.
Users were not struggling with capability. They were struggling with representation.
Users wanted to see the application they were modelling, not an abstract representation of it.
The core problem was a mismatch between the product's internal logic and the user's real-world mental model.
03 My Role
I led the end-to-end redesign of the Modeler experience, from strategic framing through research, prototyping, and delivery into the new React-based SaaS architecture.
I worked closely with product managers, engineering leads, and stakeholders to ensure the release aligned with roadmap priorities and cost considerations.
04 Process
Before design exploration began, I facilitated stakeholder discussions to align on product vision. The guiding principle became: enable users to easily build a model representation of their application that powers intelligent testing.
However, research showed that users did not want a model representation. They wanted a real representation embedded into the modelling workflow.
Although personas already existed, I conducted additional qualitative research to deepen understanding of user behaviour and intent.
Two categories of insight emerged: friction with existing features and terminology, and desire for a clearer, more visual, and intuitive value proposition.
User journey maps exposed moments of confusion, especially during state creation, action configuration, and debugging workflows.
Patterns revealed a consistent theme: users were internally translating system language into their own. Users referred to states as screens, opened multiple windows to visualise what they were building, and requested clearer debugging and pre-flight visibility.
The insight was clear. Users needed embedded visualisation within the modelling process itself.
Before moving into high-fidelity Figma, I produced a lo-fi user flow diagram to share with stakeholders and engineering. The flow mapped the end-to-end journey through the redesigned Modeler — from first opening the tool, through building a model on top of real application screenshots, to running a pre-flight validation and executing a test. Sharing this at lo-fi fidelity meant the team could challenge the sequence, flag engineering constraints, and align on the core interaction model before any pixel-level decisions were made.
I developed user flows that framed the Modeler as part of the broader testing lifecycle, ensuring engineering feasibility at each stage. Wireframes were tested quickly to validate usability assumptions.
I then built a high-fidelity working prototype and conducted usability testing using Useberry. Heatmaps and session recordings identified friction areas including unclear hierarchy within action properties, lack of state visual confirmation, and need for structured debugging and pre-run validation.
The redesigned Modeler introduced real application image upload to serve as the foundation of model building, direct visual modelling layered on top of application screenshots, a restructured control panel with clear sequencing and hierarchy, and embedded debugging and pre-flight validation cues.
To support scalability and flexibility, I collaborated with engineering to evaluate and adopt Cytoscape as the underlying graph framework, ensuring compatibility with the broader SaaS architecture before committing.
The result was a modernised Modeler service fully integrated into the React platform, grounded in user mental models rather than system abstraction.
05 Results
The redesigned Modeler delivered impact across usability, adoption, and commercial enablement.
1
Embedding real visualisation into the modelling workflow reduced the time required for new users to build their first functional model.
2
Clearer structure and embedded visual feedback reduced confusion around states, actions, and configuration properties.
3
The modernised, visually intuitive Modeler improved the platform's perceived maturity and clarity during demos.
