DevTools IDE
2022
Web Data Extraction
Inspired by IDEs, I designed a developer-focused app to troubleshoot webpages and solve the issues of switching between multiple browser tools. I collaborated with product leaders and developers to research, understand their problems, and brainstorm ways to improve developer workflow efficiency.
DevTools IDE
2022
Web Data Extraction
Inspired by IDEs, I designed a developer-focused app to troubleshoot webpages and solve the issues of switching between multiple browser tools. I collaborated with product leaders and developers to research, understand their problems, and brainstorm ways to improve developer workflow efficiency.
DevTools IDE
2022
Web Data Extraction
Inspired by IDEs, I designed a developer-focused app to troubleshoot webpages and solve the issues of switching between multiple browser tools. I collaborated with product leaders and developers to research, understand their problems, and brainstorm ways to improve developer workflow efficiency.
Challenge
As a developer, it can be challenging to troubleshoot and debug web pages to extract public data. To achieve this, many developers rely on libraries such as Puppeteer and Playwright to run headless browsers. However, this process often requires the use of multiple applications and tools across various application windows. To address these pain points, I was assigned to create a user-friendly developer tool UI that consolidates all necessary tools into one application.
Challenge
As a developer, it can be challenging to troubleshoot and debug web pages to extract public data. To achieve this, many developers rely on libraries such as Puppeteer and Playwright to run headless browsers. However, this process often requires the use of multiple applications and tools across various application windows. To address these pain points, I was assigned to create a user-friendly developer tool UI that consolidates all necessary tools into one application.
Challenge
As a developer, it can be challenging to troubleshoot and debug web pages to extract public data. To achieve this, many developers rely on libraries such as Puppeteer and Playwright to run headless browsers. However, this process often requires the use of multiple applications and tools across various application windows. To address these pain points, I was assigned to create a user-friendly developer tool UI that consolidates all necessary tools into one application.
User Research
The 5W1H method
– Why are we building this product? – Who are we building this for? – When and where do these problems occur? – What are we building? List ideas. – How could we measure it?
Affinity Mapping
Analyzing interview data using thematic analysis helped me identify patterns in users' behaviour, thoughts, and emotions. This clarified assumptions and led to necessary feature identification.
User Research
The 5W1H method
– Why are we building this product? – Who are we building this for? – When and where do these problems occur? – What are we building? List ideas. – How could we measure it?
Affinity Mapping
Analyzing interview data using thematic analysis helped me identify patterns in users' behaviour, thoughts, and emotions. This clarified assumptions and led to necessary feature identification.
A snippet of the raw interview data.
A snippet of the raw interview data.
This simplified flow diagram that resulted from the interview data suggests the users' needs.
Design Solutions
Solution Sketch
Sketching is crucial to ideation and testing ideas quickly. It helps map out user journeys and determine necessary product features. Even simple sketches can quickly validate and inform UI designs.
Design Solutions
Solution Sketch
Sketching is crucial to ideation and testing ideas quickly. It helps map out user journeys and determine necessary product features. Even simple sketches can quickly validate and inform UI designs.
I used a storyboarding technique to understand the customer's journey better and identify the necessary interactions for the product.
I used a storyboarding technique to understand the customer's journey better and identify the necessary interactions for the product.
Using the mental model anticipated from IDE users, I laid out the wireframe that would strongly impact their workflow and meet the users' expectations.
Validating a user task flow using actions when interacting with a webpage to debug.
Visual and UI Design
Working with the fundamental elements of visual design and arranging them according to design principles, they form the building blocks of design. Learning to achieve consistency in design is important in achieving a desirable product. I bridge the gap between how a product looks and how it works. By blending the atmospheric storytelling of Visual Design with the intuitive interactivity of UI Design, I create digital experiences that are as effortless to navigate as they are beautiful to behold.
Visual and UI Design
Working with the fundamental elements of visual design and arranging them according to design principles, they form the building blocks of design. Learning to achieve consistency in design is important in achieving a desirable product. I bridge the gap between how a product looks and how it works. By blending the atmospheric storytelling of Visual Design with the intuitive interactivity of UI Design, I create digital experiences that are as effortless to navigate as they are beautiful to behold.
MVP release of Dev Tools. Features include API parameters to debug and test webpages. Elements return the raw HTML of the webpage, much like Chrome Dev Tools does. The Logs access behind the scenes of the application logs.
MVP release of Dev Tools. Features include API parameters to debug and test webpages. Elements return the raw HTML of the webpage, much like Chrome Dev Tools does. The Logs access behind the scenes of the application logs.
MVP release of Dev Tools. Features include API parameters to debug and test webpages. Elements return the raw HTML of the webpage, much like Chrome Dev Tools does. The Logs access behind the scenes of the application logs.
The Actions parameter simulates the human to browser behaviour and serves as a debugging tool for common rendering issues by increasing the waitForTimeout property.
The Actions parameter simulates the human to browser behaviour and serves as a debugging tool for common rendering issues by increasing the waitForTimeout property.
The Actions parameter simulates the human to browser behaviour and serves as a debugging tool for common rendering issues by increasing the waitForTimeout property.
The Scripts panel is an advanced developer-centric feature that automates the browser for advanced use cases such as custom scripts and a standard library feature to load pre-built functions.
The Scripts panel is an advanced developer-centric feature that automates the browser for advanced use cases such as custom scripts and a standard library feature to load pre-built functions.
The Scripts panel is an advanced developer-centric feature that automates the browser for advanced use cases such as custom scripts and a standard library feature to load pre-built functions.
Run a URL to debug.
Run a URL to debug.
Run a URL to debug.
FIGMA PROTOTYPE
Conclusion
After going through rounds of iteration, feedback loop, and usability testing, we further improved the product's user experience and added more features such as Sharing/Collaboration and History.
Conclusion
After going through rounds of iteration, feedback loop, and usability testing, we further improved the product's user experience and added more features such as Sharing/Collaboration and History.
© 2026 telo santos
© 2026 telo santos
© 2026 telo santos