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.
Design
Hypothetical landing page concept.
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.
Feedback notes and action items taken from review sessions.
User is adding event items to new test.
Zoom out of initial prototype set up. Lots of tooltips in there.
User is adding event items to existing test.
For the sake of scope and consistency we reverted new event items to match current event items.
Visual spec for final review feedback fixes linked from Figma artboard.
Abstract studio UI gif
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.
Zoomed out view of Figma scratch work page for all three iterations.