A working React and Vite prototype of test case creation with models in Eggplant Studio. I built it with Claude Code from my initial Figma design so that product, engineering and customer-facing teams could click through the real interaction before a line of production code was written.
Project Overview
Eggplant Studio is Keysight's redesign of Eggplant Functional (EPF), moving a standalone desktop test tool into a Visual Studio Code extension. The aim of the wider programme was to lower the barrier for engineers new to test automation while keeping the SenseTalk scripting and image-based testing that experienced users rely on.
Model-based testing is one of the ways Eggplant users describe the application they are testing: its states, and the actions that move between them. A test case is a path through that model. The new feature needed to let people build that path by selecting steps directly in the model, and to show clearly how far along the test case they were.
A static Figma mockup could show the screens but not the behaviour that mattered most: which steps are available next, what happens when you change your mind, and how progress updates as the test case grows. I built a functional prototype so those behaviours could be seen, discussed and tested.
The Problem
Reviewers had to imagine the step-by-step interaction from still frames, which slowed decisions and hid edge cases.
EPF's standalone Script Editor
Eggplant Studio's VS Code extension
The Goal
A clickable, realistic flow that product, developers and Technical Consultants could use and critique early.
TIMELINE
2 weeks
ROLE
UX Researcher & UX Designer
I led research and design for onboarding, the feature panels, and the Virtual Assistant flow, working with the Product Owner and developers.
Methods Used
• Contextual inquiry, heuristic evaluation, personas, journey mapping, usability testing
• Information architecture, wireframes, UI design, high-fidelity prototyping, iterative design
• AI-assisted prototyping (Claude Code, React + Vite)
I led research and design for onboarding, the feature panels, and the Virtual Assistant flow, working with the Product Owner and developers.
Methods Used
• Contextual inquiry, heuristic evaluation, personas, journey mapping, usability testing
• Information architecture, wireframes, UI design, high-fidelity prototyping, iterative design
• AI-assisted prototyping (Claude Code, React + Vite)
TOOLS
Figma, Visual Studio Code, Claude Code, Microsoft Whiteboard, Miro, PostHog.
DESIGN PROCESS & STRATEGY
1. Contextual Inquiry & Heuristic Evaluation: Gathered input from existing EPF users, support tickets, and the product team to understand where the standalone desktop app created friction, then audited Eggplant Functional's interface against usability heuristics to pinpoint exactly where new testers stalled during onboarding. These findings continued to be validated with Technical Consultants (TCs) and Sales Support staff at bi-weekly Studio UX Check-In sessions, using research methods such as Rose, Thorn & Bud analysis to surface what was working well (Rose), what was creating friction (Thorn), and where new opportunities were emerging (Bud).
2. Persona Creation & Journey Mapping: Built personas around three distinct entry points into the tool: a manual tester new to automation, an experienced EPF user migrating existing workflows, and a developer already fluent in VS Code, then mapped each one's path from first install through running a test to flag where jargon or unfamiliar tooling caused drop-off.
3. Information Architecture & Wireframing: Structured the core workflow around suite management, System Under Test (SUT) connection, script editing, image capture, image optimisation, test execution, and code reuse, replacing the single-screen cold start of the standalone app, and wireframed how each step would surface inside the VS Code panel layout.
4. High-Fidelity UI Design:
Designed the extension's panels and Virtual Assistant flow to sit naturally within VS Code's existing visual language, so Eggplant Studio would feel like a native extension rather than a ported version of the old standalone app.
Delivered user-centred design features that give users more intuitive workflows for using AI and OCR (Optical Character Recognition) in test automation, including:
Delivered user-centred design features that give users more intuitive workflows for using AI and OCR (Optical Character Recognition) in test automation, including:
• Test Results
• Image Update Panel
• OCR Update Panel
• OCR Tuner
• OCR Diagnostics Panel
• Image Update Panel
• OCR Update Panel
• OCR Tuner
• OCR Diagnostics Panel
5. Usability Testing & Iterative Design: Leveraged Claude Code in VS Code to rapidly build functional React and Vite prototypes from Figma designs, accelerating design exploration and putting realistic flows in front of testers sooner. Tested the onboarding and script-editing flow with testers at each experience level, from someone opening VS Code for the first time to an experienced EPF user migrating scripts, and iterated the step order, the Virtual Assistant's prompts, and the image-capture flow based on where testers hesitated or asked for help. Worked with Technical Consultants (TCs) as proxies for customers, whose sensitive content ruled out direct access, running A/B tests of design variants and gathering customer insights through them.
6. Handoff: Delivered final specs and annotated flows to the development team, ensuring the shipped extension matched the design intent across onboarding, script authoring, image capture, and test execution.
7. Telemetry-Informed Iteration: Analysed PostHog logs to see which EPF settings users relied on most and least, informing what Studio prioritised. After release, used PostHog telemetry data to track how external users engage with Studio features.
KEY RESULTS & IMPACT
As of September 2026, Eggplant Studio adoption stands at ~27% among Eggplant Functional users, against a 35% market adoption target. Studio was designed as a backward-compatible, VS Code-native replacement for EPF.
Moving script authoring into VS Code removed the cold start of learning a separate, standalone application, letting new testers reach their first passing test faster. Experienced EPF users carried their SenseTalk scripting and image-based testing skills over directly, with no relearning required, and developers already fluent in VS Code adopted the extension quickly since its panels and workflow matched tools they used daily.
Eggplant Studio gives test automation engineers more intuitive workflows for using AI and OCR, speeding up onboarding and boosting productivity.
Personas
Three personas anchored the redesign, each representing a different path from EPF into Studio: a manual tester new to automation, an experienced EPF user migrating workflows, and a developer already fluent in VS Code.
Alex, the manual tester learning test automation for the first time
Vicky, the automation engineer bringing her existing Eggplant Functional workflows into Studio
Carl, the developer who already knows VS Code well
Rose, Thorn & Bud analysis
Rose, Thorn & Bud synthesis for the Image Update Panel from bi-weekly Studio UX Check In sessions with Technical Consultants — capturing what was working (Rose), what caused friction (Thorn), and where new opportunities emerged (Bud).
A/B Testing the Accordion Header in the Image Update Panel
The Image Update Panel uses accordion sections to keep its many controls manageable. To validate how the accordion header should be styled, I ran an A/B test with Technical Consultants (TCs), who acted as proxies for customers. Both variants were designed for light and dark VS Code themes. The majority of TCs preferred Version A, the blue header, so I took that direction forward.
Version A: Accordion header with a blue background
The blue treatment was later refined for accessibility, as shown in the contrast checks below.
Version A: Accordion header with a blue background, shown in the light and dark VS Code themes. Preferred by the majority of TCs
Version B: Accordion header with a black background
Version B: Accordion header with a black background in the light theme and an inverted header in the dark theme. Not selected.
IMAGE UPDATE PANEL: FROM FIGMA TO STUDIO
Figma designs delivered and integrated into the Eggplant Studio VS Code extension.
Checking the Image Update Panel's blue header against WCAG contrast requirements with WebAIM's Contrast Checker. White text on the blue scores 3.59:1 and fails AA for normal text, while dark text scores 4.74:1 and passes.
Revised purple header checked with WebAIM's Contrast Checker. The light theme scores 9:1, passing WCAG AA and AAA, and the dark theme scores 5.63:1, passing AA.
Redesigned Search Properties section
Search Properties in the redesigned Image Update Panel, compared with the Current EPF dialog. The properties and actions that used to sit in a floating window now live in a single panel inside VS Code.
Image Update Panel with different VS Code themes applied
The Image Update Panel tested across six VS Code colour themes, including Dark High Contrast, so it stays legible and native-looking whichever theme a user has chosen.
Image Update Panel Search Results
The Image Update Panel in Eggplant Studio. When an image isn't found during a test run, the panel explains why and offers ways to fix it, such as Fix Image, Recapture Image, and Search Again, without leaving VS Code.
Prototyping Test Case Creation with Models Using Claude Code
Functional Prototype: Creating Test Cases with Models
I built a functional React and Vite prototype of the test case creation with models feature, starting from the initial Figma design. A skills file gave Claude Code clear requirements to work from, which allowed richer interactions than a static mockup and made it quick to iterate on the design.
Functional prototype of test case creation with models, built with Claude Code from the initial Figma design.
Prototype interaction: selecting steps in the model builds a test case, with a progress panel tracking each step.
Virtual Assistant Flow: From Manual Test Case to Automated Script
The Virtual Assistant is an agentic AI assistant that speeds up test automation in Eggplant Studio. Built into the Eggplant Studio extension, it acts as a development guide and takes users from manual test case to automated script through a structured, AI-assisted flow:
Virtual Assistant flow in Eggplant Studio.
