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

UI/UX Designer

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

  1. Familiar Metaphors Aid Adoption

    Drawing on something universally understood (a report card) lowered the learning curve across diverse roles.

  2. Iterative Feedback Loops Are Essential

    Multiple rounds of testing with QAs, devs, and founders ensured each stakeholder’s needs were addressed.

  3. Layered Information Architecture

    A top-level summary plus a detailed drill-down satisfies both managerial and technical audiences.

Like what you see?
Book a free discovery call.

Like what you see?
Book a free discovery call.

Create a free website with Framer, the website builder loved by startups, designers and agencies.