Codemod Studio
Bringing a code migration developer tool to market.
Problem statement
Introduction
Upgrading code is difficult, manual, tedious and risky. New versions of code libraries are out there, but sadly, for developers, it’s not as easy as just clicking “update”.
Developers need to read documents, search through question answer forums, and work through trial and error to figure out how to do it. Based on the data we had, very few organizations upgrade to the newest version of Next.js for example. They miss out on many benefits.
Problem statement
Introduction
Upgrading code is difficult, manual, tedious and risky. New versions of code libraries are out there, but sadly, for developers, it’s not as easy as just clicking “update”.
Developers need to read documents, search through question answer forums, and work through trial and error to figure out how to do it. Based on the data we had, very few organizations upgrade to the newest version of Next.js for example. They miss out on many benefits.
Developing the product idea
Background
Codemods are formulas developers can build to automate complex changes throughout their code base. These can be used for many purposes including code migrations/upgrades, which was our focus.
Easy codemods for easy upgrades
Giant tech companies use these a lot and have been doing it for many years. We wanted to build a tool that makes it easy for all developers to build and use a codemod for their code migrations/upgrades.
Working prototype
In my previous developer research, Figma prototypes did not bode very well. Developers needed to test things out on their repository to be able to give valid feedback. I researched existing tools for building codemods and "Jarvis" was the main tool I found. We quickly built a similar prototype to do user testing with.
User Interviews
I held 7 user interviews, I asked users to bring real unexplored projects to test out Codemod Studio. I focused on the workflow, using task analysis methods to document. I looked for opportunities to use AI to automate and delight the user in the next iteration of the product.
Developing the product idea
Background
Codemods are formulas developers can build to automate complex changes throughout their code base. These can be used for many purposes including code migrations/upgrades, which was our focus.
Easy codemods for easy upgrades
Giant tech companies use these a lot and have been doing it for many years. We wanted to build a tool that makes it easy for all developers to build and use a codemod for their code migrations/upgrades.
Developing the product idea
Background
Codemods are formulas developers can build to automate complex changes throughout their code base. These can be used for many purposes including code migrations/upgrades, which was our focus.
Easy codemods for easy upgrades
Giant tech companies use these a lot and have been doing it for many years. We wanted to build a tool that makes it easy for all developers to build and use a codemod for their code migrations/upgrades.
Working prototype
In my previous developer research, Figma prototypes did not bode very well. Developers needed to test things out on their repository to be able to give valid feedback. I researched existing tools for building codemods and "Jarvis" was the main tool I found. We quickly built a similar prototype to do user testing with.
User Interviews
I held 7 user interviews, I asked users to bring real unexplored projects to test out Codemod Studio. I focused on the workflow, using task analysis methods to document. I looked for opportunities to use AI to automate and delight the user in the next iteration of the product.
Research findings and Solutions
Steps too granular
The first prototype would auto generate steps to guide the user to start building their own codemod. The steps were far too granular to the point where they caused major confusion and this was a blocked issue for many users. One user put it well, "I'd want the bird's eye view of the steps"
Solution: get "big picture"
Our founding engineer joined user testing sessions. We brainstormed solutions together, and he implemented these changes on the backend. Now we have high level steps, and as a bonus, hovering over the steps highlights the relevant code. This helps developers easily quality check the logic of the automated builds.
Research findings and Solutions
Steps too granular
The first prototype would auto generate steps to guide the user to start building their own codemod. The steps were far too granular to the point where they caused major confusion and this was a blocked issue for many users. One user put it well, "I'd want the bird's eye view of the steps"
Solution: get "big picture"
Our founding engineer joined user testing sessions. We brainstormed solutions together, and he implemented these changes on the backend. Now we have high level steps, and as a bonus, hovering over the steps highlights the relevant code. This helps developers easily quality check the logic of the automated builds.
Research findings and Solutions
Steps too granular
The first prototype would auto generate steps to guide the user to start building their own codemod. The steps were far too granular to the point where they caused major confusion and this was a blocked issue for many users. One user put it well, "I'd want the bird's eye view of the steps"
Solution: get "big picture"
Our founding engineer joined user testing sessions. We brainstormed solutions together, and he implemented these changes on the backend. Now we have high level steps, and as a bonus, hovering over the steps highlights the relevant code. This helps developers easily quality check the logic of the automated builds.
Difficult to check work
Users needed to compare the code in the “after” and “output” sections many times throughout a project. This was hard to do in the previous design because these sections were not in a single line.
Side by side design
All the sections are now in one line making them easier to compare. As a bonus, selecting code on one section now highlights those same sections all across the app.
Difficult to check work
Users needed to compare the code in the “after” and “output” sections many times throughout a project. This was hard to do in the previous design because these sections were not in a single line.
Side by side design
All the sections are now in one line making them easier to compare. As a bonus, selecting code on one section now highlights those same sections all across the app.
Difficult to check work
Users needed to compare the code in the “after” and “output” sections many times throughout a project. This was hard to do in the previous design because these sections were not in a single line.
Side by side design
All the sections are now in one line making them easier to compare. As a bonus, selecting code on one section now highlights those same sections all across the app.
Tedious steps
The app was set up for users to click “transform steps” to get AI generated steps (steps were directions on what to manually code into the tool). Users could not figure out how to generate the steps on their own. Even when they got the steps, they still didn’t know how to use the steps, participant were frustrated... "Why can't this part just be done for me?"
Automation
I partnerd with our founding engineer to replace manual steps with an AI assistant that works with prompts. Users can put in their prompt and click “auto generate” to automatically generate the code they need.
Tedious steps
The app was set up for users to click “transform steps” to get AI generated steps (steps were directions on what to manually code into the tool). Users could not figure out how to generate the steps on their own. Even when they got the steps, they still didn’t know how to use the steps, participant were frustrated... "Why can't this part just be done for me?"
Automation
I partnerd with our founding engineer to replace manual steps with an AI assistant that works with prompts. Users can put in their prompt and click “auto generate” to automatically generate the code they need.
Tedious steps
The app was set up for users to click “transform steps” to get AI generated steps (steps were directions on what to manually code into the tool). Users could not figure out how to generate the steps on their own. Even when they got the steps, they still didn’t know how to use the steps, participant were frustrated... "Why can't this part just be done for me?"
Automation
I partnerd with our founding engineer to replace manual steps with an AI assistant that works with prompts. Users can put in their prompt and click “auto generate” to automatically generate the code they need.
Results
Time savings
Engineers conducted a thorough case study with our design partment to measure whether there were any time savings.
Their case study shows a 20% time savings (192 hours) for one upgrade of next.js 12 to 13.
Results
Time savings
Engineers conducted a thorough case study with our design partment to measure whether there were any time savings.
Their case study shows a 20% time savings (192 hours) for one upgrade of next.js 12 to 13.
Results
Time savings
Engineers conducted a thorough case study with our design partment to measure whether there were any time savings.
Their case study shows a 20% time savings (192 hours) for one upgrade of next.js 12 to 13.
Cool things we did
Joining forces with engineers
I included the engineering lead, and the founder in two of the user interviews. They were also active participants in the ideation and design process. I gave UX research training and partnered with a developer/engineer on this project.
The benefits were infinite, the engineers improved the product with rapid speed and fiery motivation. Feeling the user pain firsthand across the organization sped up the process. Engineering was extremely engaged in ideating and implementing solutions.
Cool things we did
Joining forces with engineers
I included the engineering lead, and the founder in two of the user interviews. They were also active participants in the ideation and design process. I gave UX research training and partnered with a developer/engineer on this project.
The benefits were infinite, the engineers improved the product with rapid speed and fiery motivation. Feeling the user pain firsthand across the organization sped up the process. Engineering was extremely engaged in ideating and implementing solutions.
Cool things we did
Joining forces with engineers
I included the engineering lead, and the founder in two of the user interviews. They were also active participants in the ideation and design process. I gave UX research training and partnered with a developer/engineer on this project.
The benefits were infinite, the engineers improved the product with rapid speed and fiery motivation. Feeling the user pain firsthand across the organization sped up the process. Engineering was extremely engaged in ideating and implementing solutions.
Skills I gained
The Art of Learning the Right Amount
As a non-developer, I had to learn new technical concepts to be able to do this project. I’m always refining and learning how to use time wisely by: Defining and reminding myself of the end goal for what I am learning Documenting my learnings in a reusable way
As a visual learner, I have been recording zoom meetings with team members for technical details. I revisit these throughout the project as needed and I find this to be the most efficient way. I am now saving content from different places (Slack, Zoom, Miro, Figma) to create documentation separately for myself to retain and revisit the information when I need to come back to it.
How to collaborate and lead
This was my first time including developers on the team in the usability testing interview. I did learn how to set better guidelines and prepare engineering team members beforehand. This is important so that I can facilitate the interview better and have better control of what information is revealed.
Skills I gained
The Art of Learning the Right Amount
As a non-developer, I had to learn new technical concepts to be able to do this project. I’m always refining and learning how to use time wisely by: Defining and reminding myself of the end goal for what I am learning Documenting my learnings in a reusable way
As a visual learner, I have been recording zoom meetings with team members for technical details. I revisit these throughout the project as needed and I find this to be the most efficient way. I am now saving content from different places (Slack, Zoom, Miro, Figma) to create documentation separately for myself to retain and revisit the information when I need to come back to it.
Skills I gained
The Art of Learning the Right Amount
As a non-developer, I had to learn new technical concepts to be able to do this project. I’m always refining and learning how to use time wisely by: Defining and reminding myself of the end goal for what I am learning Documenting my learnings in a reusable way
As a visual learner, I have been recording zoom meetings with team members for technical details. I revisit these throughout the project as needed and I find this to be the most efficient way. I am now saving content from different places (Slack, Zoom, Miro, Figma) to create documentation separately for myself to retain and revisit the information when I need to come back to it.
How to collaborate and lead
This was my first time including developers on the team in the usability testing interview. I did learn how to set better guidelines and prepare engineering team members beforehand. This is important so that I can facilitate the interview better and have better control of what information is revealed.