Cypress Studio

A case study

It always helps to start with a goal. When you work on a software testing product, making it easier for people to author tests is a great goal. Making it possible for people to author tests without having to write code… even better.

Based within the open source Cypress Test Runner software, Cypress Studio is the start of a broader effort to give non-technical users better tools to author tests. This was a joint effort between the Product Growth and Test Runner teams.

I had tremendous support from both team PMs. The Product Growth team also provided exceptional comparative research of existing click-to-code tools and a clearly written technical brief.



studio teaser

Hypothetical landing page concept.

The process

This feature followed a rote agile workflow. Shortly after an initial design consult, we settled on a properly scoped user experience to execute.

I was able to start on a first pass within Figma while work was underway stubbing out the basic back end needs. I created a prototype with the first iteration artboards which were then presented and reviewed by internal stakeholders.

After the second iteration, PM started user research and demoed the Figma prototype live. User feedback and another review session with stakeholders determined the remainder of the design work in a fit & finish phase that got us to an alpha release.

form, select emails

Feedback notes and action items taken from review sessions.


Cypress has a very engaged open source community. Many of them are responding positively to this feature via social media, which is pretty fun to watch in our feature channel in Slack. Someone has already made an independent demo video.

We anticipate this feature garnering even more attention when it’s out of alpha. In the end, users looking to get started quickly with end-to-end testing or expanding their code coverage will be able to do so without having to spend any time within an IDE.

Iteration 1, add new test view

User is adding event items to new test.

Iteration 1, prototype spaghetti

Zoom out of initial prototype set up. Lots of tooltips in there.

Iteration 3, extend test view

User is adding event items to existing test.

Fit & Finish, new event items

For the sake of scope and consistency we reverted new event items to match current event items.

Fit & Finish, visual spec sheet

Visual spec for final review feedback fixes linked from Figma artboard.

Abstract studio UI gif

Gif a little, get a little

This gif is used in the introductory dialog for the Cypress Studio feature. I went abstract with the UI and wanted to see if I could make a gif using Figma.

Most everything

Zoomed out view of Figma scratch work page for all three iterations.


Growth engineer Zach Panzarino was the primary driver of this effort. He did the background research, pitched the product organization, led the engineering effort... it made my job easy and designs indulgent. PM Tommy Noonan, as always, was a huge help in managing scope, detailing work to be done and providing insightful feedback. A naming nod goes to PM Josh Loftis. He [jokingly I think] suggested "Cypress Studio" and we all liked the tag.

Up next…

Heat Maps Case Study