Website Tester

SafeSquid Website Tester is a diagnostic tool that ships alongside the proxy. A technician enters a domain and it runs DNS, port, server-response and proxy checks to show where a connection breaks.

As a product design intern, I redesigned it as a tabbed workspace prototype. Each test keeps its command, platform and results, so a technician can move between domains without losing earlier evidence.

Role
Product Design Intern
Research
1 Network Technician
Status
Prototype
Tags
SafeSquidNetwork diagnostics
Year
2024
Redesigned Website Tester home with domain, command and Linux or Windows mode in one input
The problem

Every check looked the same, and every new test erased the last one

The original tool ran five checks for one URL and stacked them as identical green rows. Each row held raw command output with no reading of what it meant, and testing another domain replaced the results a technician might still need.

Original Website Tester: one URL field above five identical green rows for DNS, port, server response, proxy connectivity and server response via proxy
01

Troubleshooting is an investigation, not a one-off query.

When the technician reconstructed a recent investigation with me, the first result changed the next question. A DNS check could lead to the server, a port or the proxy, and earlier results still mattered.

02

A status alone was not enough. The values had to stay visible.

The technician needed the command and the raw values to trust a result, then returned to earlier results to compare. An explanation helps only when it sits beside that evidence.

Users

The person investigating, and the person who acts on it

A diagnosis starts with a technician and usually ends with an engineer. The tool has to serve both ends of that handoff.

Network technician

Investigates connection failures

The first result changes my next question.

Needs

  • Earlier tests still open while following the next clue
  • The command and raw values behind every verdict
  • Linux and Windows syntax without relearning the tool

Lives in

TabsResults report

Support engineer

Receives the evidence and fixes the issue

Send me exactly what ran and what came back.

Needs

  • The exact command and platform
  • Values they can paste into a ticket
  • A result they can rerun themselves

Lives in

CopyDownload JSONRun again
Research

Walking through a real investigation

I sat with a network technician who reconstructed a recent investigation step by step. Six behavioural questions, grouped into three themes, shaped everything that followed.

Theme 01

Investigation sequence

We asked

  • What happened the last time a domain failed?
  • Which check came first, and what happened next?

What I heard

The first result changed the next question. A DNS check could lead to the server, a port or the proxy.

Need: Keep earlier checks available as the investigation branches.

Theme 02

Reading and comparison

We asked

  • How do you recognise a suspicious result?
  • When do you return to an earlier domain?

What I heard

A status alone wasn’t enough. The technician needed the command and raw values, then went back to earlier results to compare.

Need: Put the explanation beside its evidence, and keep results easy to reopen.

Theme 03

Handoff and platform

We asked

  • What happens after you understand a result?
  • What changes between Linux and Windows?

What I heard

Understanding a result was only the handoff. It still had to be copied, shared or run again, sometimes in the other platform’s syntax.

Need: Attach follow-up actions to each report and keep both platforms familiar.

Flow: before → after

The same investigation, walked through both tools

I mapped the investigation the technician reconstructed, step by step, on the old tool, marked where it broke, then redesigned it around the next question rather than the last answer.

Flow 01 · Investigating a failing domain

From one disposable result to an investigation that keeps its evidence

Before5 steps · 4 friction points
  1. Enter a URL
  2. Read five green rowsEvery check looks the same
  3. Decode the raw outputNo reading of what it means
  4. Test the next domainThe last result is replaced
  5. Re-type to compareEarlier evidence is gone
After6 steps
  1. Set domain, command and modeLinux or Windows, in the input
  2. RunThe test opens as its own tab
  3. Read grouped evidenceValues first, then one sentence
  4. Copy, download or rerunBeside every report
  5. Open the next domainEarlier tabs stay put
  6. Reopen an earlier tabSummary shows command and status
Five identical green rows of raw output
BeforeFive identical green rows of raw output
Each test kept as its own tab
AfterEach test kept as its own tab
Why it broke
The tool treated troubleshooting as a single query. But the first result changes the next question, so wiping it the moment another domain was tested destroyed exactly the evidence the technician needed next.
6 behavioural questions, across three themes, shaped this flow
What I designed
  • One input for domain, command and Linux / Windows mode, confirmed before Run
  • Each test opens as a named tab, so a new domain never replaces the last
  • Results grouped by the question they answer: DNS lookup, propagation, redirects, SSL and ports
  • Raw values first, then a one-line plain-language reading
  • Copy, Download JSON and Run Again at the end of every report
Impact
Nothing lost
Earlier tests stay open and reopen without a rerun, confirmed with the technician in the prototype review

The redesigned flow in full

How a technician moves from entering a domain to reading grouped results, sharing them and returning to an earlier test.

HomeRun a TestDNS LookupHTTP StatusSSL & PortsGrouped ResultsCopy or DownloadMulti-Tab SessionsExpand a TabReopen ReportRun Again
Wireframes

Shaping the workspace: Two core layout decisions

Before moving to high fidelity, I compared low-fidelity layouts against how the technician described a real investigation: earlier results need to stay within reach, and a readable verdict must not hide the values behind it.

How should technicians structure long troubleshooting sessions?

In the investigation the technician reconstructed, one result led to the next check and sometimes to another domain. Browser-style tabs keep earlier tests open, so the technician can return to them without rerunning anything.

A · Single Scrolling Terminal Log

Simple chronological scroll, but older outputs disappear off screen and comparing servers requires manual copy-pasting.

B · Multi-Tabbed Diagnostic Workspace

Keeps separate tests in independent tabs with live status indicators, so technicians never lose their place.

Design Trade-off: Many open tabs need an overflow and history pattern. The prototype covers a few tabs; longer investigations are the next thing to design and test.

What depth of diagnostic evidence should the interface expose?

The technician wanted to know quickly what a result meant, but would only trust it after seeing the command and the values behind it.

A · Simple Status Badge Only

Quick to scan, but hides key details like SSL cipher issues, redirects, or partial proxy blocks.

B · Two-Layer Verdict with Detailed Logs

Pairs a short reading with the values that support it, grouped by the question each check answers.

Design Trade-off: Showing both makes each report longer, so results are grouped by the question they answer and each explanation is kept to one line.
Solution & IA

One input, one tab per test, and results grouped by the question they answer

The prototype keeps the domain, command and platform together in one input. Each test opens as a tab, and its report groups DNS, HTTP, SSL and port results with a short plain-language reading.

Redesigned diagnostic home workspace
Companion Diagnostic Architecture

Desktop Application Information Architecture

A four-step model: enter a domain and command, keep each test as a tab, run the checks, then copy or download the evidence.

Target Domain01 Command Omnibar02 Session & Tab Manager03 Diagnostic Engine04 Evidence & Log Export

Raw values paired with a short, readable explanation

Each group shows the values first, such as resolved addresses, the redirect chain and certificate dates, then one sentence on what they mean. Copy, Download JSON and Run Again stay at the end of the report.

Results report grouping DNS lookup, DNS propagation, HTTP redirect chain, SSL certificate and port checks, each with a one-line explanation

Domain, Command and Platform Together

The technician can confirm what will run, and in which command mode, before pressing Run.

Target domain and protocol input interface

Each Test Becomes a Tab

A completed test stays open as a named tab, so a new domain no longer replaces the last result.

Multi-tab diagnostic workflow interface

Recall a Test Without Rerunning It

Expanding a tab shows the command it ran and a summary of its results, such as HTTP status and port checks, before reopening the full report.

Expanded tab showing the command it ran, HTTP status 200 and port checks

Linux or Windows Command Mode

Switching the mode changes the command syntax, for example dig to nslookup, while the layout and workflow stay the same.

Input switched to Windows mode, showing an nslookup command
Key decisions

Four smaller calls that made the workspace trustworthy

The wireframes settled the structure. These decisions settled the details a technician touches on every test: what a report leads with, what a tab remembers, where the command mode lives and how evidence leaves the tool.

  1. Decision 01

    Group results by the question they answer

    The question
    In what order should a report show five different checks?
    Options I weighed
    • In the order the checks ran (not chosen)When every result has the same weight, the report is hard to scan under pressure.
    • Grouped by question: DNS lookup, propagation, redirects, SSL, ports (chosen)Each group answers one thing the technician is trying to rule out.
    Why this one
    A technician reads a report to eliminate causes: is it DNS, the certificate, the port? Grouping by question lets them jump to the suspect and skip what’s already clear.
    Trade-off I accepted
    The report no longer mirrors the order the commands ran in, so each group keeps its own values in view.
  2. Decision 02

    A tab remembers the test, not just the domain

    The question
    What does a technician need to see to pick an earlier test back up?
    Options I weighed
    • A tab labelled with the domain (not chosen)A domain name alone isn’t enough context to resume an investigation.
    • An expandable tab with the command, status and a result summary (chosen)Enough to decide whether to reopen, without reopening.
    Why this one
    Resuming means remembering what was tried. The expanded tab answers “what did I run, and what came back?” before the full report is opened.
    Trade-off I accepted
    Tabs carry more content, so they stay collapsed until expanded.
    How I knew
    Review 1: resuming a completed domain without rerunning it shaped the expanded summary.
  3. Decision 03

    The command mode lives in the input

    The question
    Where should the Linux / Windows switch sit?
    Options I weighed
    • Elsewhere in the interface, as a setting (not chosen)Set once and forgotten, so the wrong syntax runs without anyone noticing.
    • Inside the input, beside the command (chosen)The mode is confirmed at the same moment as the domain, every time.
    Why this one
    The mode changes what actually runs, dig or nslookup. A choice that changes the command belongs where the command is reviewed, right before Run.
    Trade-off I accepted
    The input carries one more control, so the layout and workflow stay identical in both modes.
    How I knew
    Review 2: switching to Windows syntax moved the switch into the input.
  4. Decision 04

    Follow-up actions sit on every report

    The question
    How does a result travel from the technician to the engineer who fixes it?
    Options I weighed
    • A global export or toolbar (not chosen)Actions placed elsewhere make the technician reconnect them to the right test.
    • Copy, Download JSON and Run Again at the end of each report (chosen)The handoff happens where the evidence is.
    Why this one
    Understanding a result is only half the job; the support engineer needs the exact command and values. Attaching the actions to the report keeps the evidence and its handoff together.
    Trade-off I accepted
    The same three actions repeat on every report, a small cost for never exporting the wrong test.
    How I knew
    Review 3: carrying a result forward put all three actions on every report.
Prototype review

Three moments, tested with the technician

I reviewed the interactive prototype with the technician around the three moments that broke the old tool. Each one changed the design.

Review 1 · Resume a completed domain

Reopen an earlier test without rerunning it. This shaped the expanded tab summary.

Review 2 · Switch command mode

Run the same check in Windows syntax. This moved the Linux / Windows switch into the input itself.

Review 3 · Carry a result forward

Share what came back with an engineer. This put Copy, Download JSON and Run Again on every report.

The outcome

A desktop prototype built around the investigation

The deliverable was a desktop redesign and an interactive prototype, reviewed with a network technician. Here’s what it covers.

5
Evidence groups
DNS lookup, DNS propagation, HTTP redirects, SSL and ports, each with a one-line reading
2
Command modes
Linux and Windows syntax, chosen in the input before a test runs
1
Research partner
A network technician who reconstructed an investigation and reviewed the prototype

Key Learnings

01

Design the investigation, not just the result

The technician rarely ran one check and stopped. The first result changed the next question, so tabs had to preserve earlier tests instead of replacing them.

02

Simplifying a technical tool means explaining, not hiding

A plain-language reading only helped when the values behind it stayed visible and could be copied or downloaded.

03

Design for the long investigation next

The next round covers many open tabs, interrupted and failed checks, and whether the original tool’s proxy checks belong in the new report.

Next Case Study

VxSure Launch Film

A 60-second launch film, directed by me and built in code.