{"id":51,"date":"2026-01-30T05:00:42","date_gmt":"2026-01-30T05:00:42","guid":{"rendered":"https:\/\/delandabarbosa.com\/eng\/?post_type=jetpack-portfolio&p=51"},"modified":"2026-04-16T04:41:15","modified_gmt":"2026-04-16T04:41:15","slug":"testbooster","status":"publish","type":"jetpack-portfolio","link":"https:\/\/delandabarbosa.com\/eng\/portfolio\/testbooster\/","title":{"rendered":"TestBooster"},"content":{"rendered":"\n
\n
\n
\n

TestBooster<\/h1>\n Complete redesign of a B2B SaaS test automation platform transitioning from SMB to the enterprise market. The goal was to transform a complex technical system into a professional and scalable tool, organizing 40 screens into a cohesive architecture that supports three types of testing (UI, API, Flows) without sacrificing power or flexibility.
\nRole:<\/b> UX\/UI Designer
\nPlatform:<\/b> Web (Desktop)
\nScope:<\/b> End-to-end UX\/UI redesign, information architecture for 40 screens across 12 modules, complex flow design, drag-and-drop interface, real-time monitoring system\n <\/span>\n
<\/div>\n <\/div>\n \n <\/div>\n<\/section>\n\n\n\n
\n
\n The Challenge<\/b>
\nTestBooster originated from a strategic pivot: from a no-code tool for consumers to an enterprise platform targeting QA Engineers, Developers, and DevOps teams. With this repositioning came new users, new expectations, and a radically different level of product complexity.\n\nThe existing system had 40 screens with no cohesive architecture: modules were added incrementally without a navigation pattern. Three distinct types of testing (UI, API, Flows) coexisted without a clear hierarchy. Technical users needed to configure complex automations, but the interface provided no visual feedback on execution states. A QA Engineer opening the dashboard could not tell what was currently running, what had failed, or where to start.\n\nThe challenge was to organize. Enterprise users tolerate complexity when it is predictable. The issue was unpredictability: each module had different interaction patterns, navigation did not maintain context, and execution states were communicated only through text, with no visual hierarchy.

\nArchitecture and Flows<\/b>
\nThe restructuring started with information architecture: mapping the 40 screens into 12 functional modules and defining a journey pattern that repeats across all of them \u2014 list \u2192 editor \u2192 execution \u2192 results. Consistency in this pattern is what makes the system predictable.\n <\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n UX and UI Decisions<\/b>
\nEach decision was guided by the same premise: technical complexity is not an interface problem, but an architectural responsibility. The interface documents the state of the system, it does not hide it.
\nUX – <\/b> Persistent sidebar: navigation that maintains context across modules. The fixed sidebar with icons and short labels highlights the active module in purple. When navigating between Test Cases, API Tests, and Flows, the active item remains visible \u2014 the user never loses context of where they are in the system. Modules are grouped by area (Testing, Orchestration, Management) with a visual separator between groups.
\n\nList \u2192 editor pattern: the same mental model across all 12 modules. Regardless of the module (Test Cases, API Tests, Flows, Team, Projects), the structure is always the same: list with filters and search, click opens the editor in the same context (not on a new page), breadcrumb indicates location. The user learns the pattern once and applies it across all modules.\n <\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n UI<\/b> – Status system: 4 states, 4 colors \u2014 applied consistently across the entire platform: Passed (green), Failed (red), Running (pulsing purple), Skipped (gray). The same tokens are used in badges, table rows, canvas node indicators, and execution progress bars. A QA Engineer learns the status system once \u2014 anywhere in the product, the interpretation is identical.
\n\nScrollable log with error highlighting: during execution, the screen displays a step-level progress bar (not global), real-time output logs with syntax highlighting for errors and warnings, and a completed\/total steps counter. The technical user sees exactly what is happening: execution is transparent, not a black box with a generic loading state.\n<\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n Drag-and-drop canvas: Canvas drag-and-drop for sequencing tests without code. Test Flows allow orchestrating sequences of existing tests (UI or API) within a conditional flow \u2014 \u201cif the Login flow passes, execute the Checkout flow; if it fails, notify Slack and stop.\u201d The drag-and-drop canvas visually represents this logic without requiring the QA Engineer to write orchestration scripts.\n\nEach node in the canvas displays: test type (UI\/API\/Condition\/Notification), linked test case name, and last run status with color. Connections between nodes are directional lines with arrows, with no ambiguity in execution order.
\n\n4 node types with distinct visual identity, no legend: the canvas uses four node types, each with its own background color and icon: Test Case (purple \u2014 UI tests), API Test (teal \u2014 endpoints), Condition (amber \u2014 if\/else logic), and Notification (gray \u2014 Slack, email, webhook). Color acts as the identifier \u2014 the user does not need to read labels to understand node behavior.
\n\nDiscarded alternative: identical nodes with type indicated only via tooltip on hover. Using a tooltip as the sole identifier requires interaction to access essential information \u2014 an anti-pattern in high-density interfaces.\n<\/div><\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n Results<\/b>
Complete enterprise platform: from information architecture to all 40 screens, with documented patterns for handoff. The modular design system ensures that new modules can be added without breaking consistency.
\n40<\/b> screens documented with default, execution, error, and result states.
\n12<\/b> functional modules following the list \u2192 editor \u2192 execution \u2192 results pattern.
\n1DS<\/b> design system with status tokens, table components, editor, and canvas.
\n0<\/b> duplicated navigation patterns \u2014 a single mental model applied across all 12 modules.
\n <\/div><\/div>\n\n\n\n
\n \n<\/div>\n","protected":false},"excerpt":{"rendered":"

TestBooster Complete redesign of a B2B SaaS test automation platform transitioning from SMB to the enterprise market. The goal was to transform a complex technical system into a professional and scalable tool, organizing 40 screens into a cohesive architecture that supports three types of testing (UI, API, Flows) without sacrificing power or flexibility. Role: UX\/UI […]<\/p>\n","protected":false},"author":2,"featured_media":52,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"jetpack-portfolio-type":[4,3],"jetpack-portfolio-tag":[],"class_list":["post-51","jetpack-portfolio","type-jetpack-portfolio","status-publish","format-standard","has-post-thumbnail","hentry","jetpack-portfolio-type-ui-design","jetpack-portfolio-type-ux-design"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio"}],"about":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/types\/jetpack-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":3,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio\/51\/revisions"}],"predecessor-version":[{"id":75,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio\/51\/revisions\/75"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/media\/52"}],"wp:attachment":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"jetpack-portfolio-type","embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio-type?post=51"},{"taxonomy":"jetpack-portfolio-tag","embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio-tag?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}