Eggplant
AI Test

01 Overview

Modernising the Eggplant Modeler for scalable AI testing

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

A disconnect between system logic and user thinking

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.

• Cognitive translation burden: Users had to mentally convert their understanding of application screens into abstract states and actions.
• Limited visual feedback: Users could not clearly see what they were building without opening multiple windows or referencing external materials.
• Control panel complexity: Action properties and state configurations lacked clear structure and hierarchy.
• Architectural misalignment: The Modeler lived outside the modern SaaS environment, creating fragmentation in the product experience.

Users were not struggling with capability. They were struggling with representation.

The core problem was a mismatch between the product's internal logic and the user's real-world mental model.

03 My Role

Lead Product Designer

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.

• Aligning business goals with user needs and technical constraints
• Defining the product vision for the next-generation Modeler
• Conducting user research and synthesising insights
• Establishing a scalable interaction framework
• Leading design validation through prototyping and testing
• Partnering with engineering to ensure feasibility and architectural alignment

I worked closely with product managers, engineering leads, and stakeholders to ensure the release aligned with roadmap priorities and cost considerations.

04 Process

From abstraction to visual clarity

Understanding the vision

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.

Research

Although personas already existed, I conducted additional qualitative research to deepen understanding of user behaviour and intent.

• In-depth user interviews
• Contextual inquiries
• Focus groups
• Journey mapping
• Jobs-to-Be-Done analysis

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.

Research Analysis

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.

Ideation and Validation

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 Solution

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

Impact and measurable outcomes

The redesigned Modeler delivered impact across usability, adoption, and commercial enablement.