Creating a Universal Report for QA, Devs & Founders
Client
TestTube
Year
2024-Present
TestTube is a no-code QA automation tool that helps teams test web applications for bugs and non-functional issues—without writing a single line of code.
Scope of Work


Hypothesis
“If we design a results page that is both high-level and drill-down friendly, it will reduce confusion across teams and speed up resolution times.”
Overview
Challenge:
How might we present automated test reports so that QAs, developers, and founders alike can quickly understand product health?
Solution:
A familiar, school-report-card-inspired interface that provides a clear, high-level overview while allowing deeper dives into test details.
Role | Tools | Duration |
|---|---|---|
Product Designer | Figma, Notion | 1 Month |

1. Understanding the Problem
Context
When QA automation runs hundreds (sometimes thousands) of tests, the results can become overwhelming. QAs want granular pass/fail data to troubleshoot. Developers want to pinpoint error logs quickly. Founders or product managers need a broad overview of the product’s stability. Our task was to create a single reporting interface that satisfies all three audiences.
Key Pain Points
QA Teams: Needed granular, test-by-test breakdowns to identify specific failures and patterns.
Developers: Wanted logs and error codes at a glance for fast debugging.
Founders & Product Managers: Looked for a succinct, top-level view (e.g., total tests, failure percentage, highest failing categories).


2. Research & Insights
User Interviews
QAs shared that they spend a lot of time filtering through raw logs to find critical issues.
Devs mentioned that they often rely on QAs or logs to figure out failing test steps.
Founder emphasised the need for a quick snapshot to gauge overall project health.
I personally took 1-1 interviews inside my organisation to ensure my output meet their expectations and requirements.

3. Design Approach
Concept: School Report Card
We took inspiration from the simplicity and familiarity of academic report cards.
Top Bar Metrics – Like a student’s overall GPA, we show total tests, passed tests, and failure percentages.
Detailed Entries – Similar to individual assignment grades, each test line item shows pass/fail status and additional details.

4. Final Solution
High-Level Metrics
A bright, concise top section with:
Total Tests
Passed Tests
Failed Tests
Failure %
Why it works:
Founders instantly see overall product health.
QAs and devs know how many tests to investigate.
Category Breakdown
Attention based grouping (eg: Needs Attention, Room for improvement etc.) with number of tests and page locations
Detailed Test Table
Pass/Fail icons with color-coding (green for pass, red for fail).
Log links for devs to jump directly into debugging.
6. Impact & Results
30% Faster Issue Resolution: Devs reported quicker debugging thanks to direct log links.
Reduced Confusion: Non-technical stakeholders found the layout more intuitive, cutting down on back-and-forth queries.
Adoption Growth: Several new teams onboarded after seeing the simplified reporting interface.
Metric Highlight:“We saw a 25% decrease in support tickets related to interpreting QA reports.”
7. Key Takeaways & Reflection
Familiar Metaphors Aid Adoption
Drawing on something universally understood (a report card) lowered the learning curve across diverse roles.
Iterative Feedback Loops Are Essential
Multiple rounds of testing with QAs, devs, and founders ensured each stakeholder’s needs were addressed.
Layered Information Architecture
A top-level summary plus a detailed drill-down satisfies both managerial and technical audiences.


