Where did all my storage go?

Details

UX/UI · Feature Design · Data Visualization · Interaction Designscope
macOSsurface
Product Designerrole
Product Manager · Marketing Manager · Front-end Devteam members

Product

Disk Layout (MaCleaner Pro)

A visual disk scan for MaCleaner Pro: one scan turns the main directories into a proportional map paired with a folder list — see what's big, open it, clean it, all in the same view.

Problem

Big Files Don't Look Big

In a file list, a 500 MB folder and a 3 MB file get the same row height and the same icon. Nothing on the screen says "this is where your space went" — users had to open folders one by one and compare numbers in their head.

Solution

A Map Instead of a Guessing Game

One scan builds a donut map of the scanned directories, sized by what they actually weigh. The map and the list stay linked — hover a segment to see the folder behind it, open a row to go deeper, select and clean without switching screens.

Result

Shipped as the App's Newest Entry Point

A new "scan first, see everything" alternative to the app's category-by-category cleaning tools.

Impact

Design decision

  • 01/ Proportional map instead of a flat list
  • 02/ Folder details (created/changed/opened) shown inline
  • 03/ Selection and cleaning right away
  • 04/ One free scan before the paywall

Target metric

  • Time to locate large files
  • Cleanup completion rate (fewer abandoned scans)
  • Fewer trips to Finder mid-cleanup
  • Trial-to-paid conversion

Context

MaCleaner already cleaned what it could recognize: cache, logs, trash, duplicates — the categories Smart Clean handles on its own.

But the heaviest files are usually legitimate: old downloads, forgotten exports, a Documents folder that quietly grew for years. No cleaner can decide those for you — someone has to actually see them first.

Process

App reviews kept circling one frustration: people knew the disk was full, but not why. The gap between "I have a problem" and "I can see the problem" is what this update had to close.

The first explorations were list-based — sortable columns, size labels. Technically complete, but scale never registered: 600 MB reads as a number, not as "a third of everything". The list stayed, but as one half of a pair — a donut map carries proportion, the list carries names, dates and actions.

Solution — How It Works

To turn "my disk is full" from a feeling into something you can point at — and act on in the same breath.

Scan — one pass over the main directories, started from a single button.

See — a proportional map with the total in the center, folders as rows beside it.

Open — any row drills a level deeper; the map rebuilds for that branch.

Clean — check what should go, watch the total update, hit Clean.

Design 1/6 — Start & Scan

One screen explains the feature, one button starts it. While scanning, START becomes CANCEL and a progress bar keeps the wait honest.

Start & Scan

Design 2/6 — The Map

Scan done: scanned folders on the left with dates and sizes, the donut on the right with the total in the center. A details panel shows when the selected folder was created, changed and last opened.

The Map

Design 3/6 — Linked Both Ways

The chart isn't decoration: hovering a segment pulls it out and names the folder and its size. Chart and list always point at the same thing.

Linked Both Ways

Design 4/6 — Drill In

Opening Documents rebuilds the map for just that branch — folders and files side by side, the path back one tap away.

Design 5/6 — The Deep End

At the deepest levels the map steps aside: a full-width list with checkboxes, a running "chosen for cleaning" total and the Clean button. The visualisation earns its place at the top — and knows when to leave.

Design 6/6 — One Free Try

Disk Layout ships as a premium feature with a single free scan. The popup sells the try, not the subscription.

Store Presence

Reflections

Proportion beats precision
Nobody needed exact gigabytes to act. They needed to see which slice was obviously too big — the numbers only mattered after the shape made the point.
A chart is only useful while it's connected
The donut works because hover, list and details always agree. The moment a visualisation stops answering "so what do I do?", it turns into decoration.

What would I do next?

Search inside results
The map answers "what's big"; it should also answer "where is that one heavy project folder I know exists" — a search field over scanned results.
Undo, visibly
A post-clean summary with a short undo window would remove the last bit of fear from the Clean button — and fear is what stalls cleanups.
Measure the moment of conversion
If analytics allowed, I'd want the offer shown right after the first Clean — at the peak of delivered value — and A/B-test that timing against the entry popup.