Matrack Subscription Management
A subscription and billing dashboard for fleet GPS tracking. Priority metrics and color-coded status surface what needs action now, with renew, change-plan, and payment tools built right where each issue appears.
Role
Lead UI/UX Designer
Timeline
10 weeks
Team
1 Engineer, 1 PM, 1 Product Designer
Platform
Web App
Link
NA
Overview
Matrack's Subscriptions dashboard is where a fleet manager keeps a whole fleet of GPS trackers paid, current, and running. It's a web console for someone who might be managing a hundred-plus devices at once, each with its own plan, billing cycle, and renewal date. I designed it to answer one question first, what needs my attention right now, and to keep the deep billing detail a glance further down. It shipped in two phases: first the dashboard as a place to see everything clearly, then the actions, renew, change a plan, update a card, cancel, that let a manager fix it all without leaving the page.
The Challenge
Fleet billing is a lot of small, time-sensitive facts arriving at once. A hundred and twenty-four active devices, a dozen due in the next thirty days, four already past due, each on a different plan and cycle. Miss one renewal and a truck goes dark.
And by the time a device shows past due, the problem is already old. Past due is a lagging signal, the disengagement started weeks earlier, quietly, in a row nobody scanned. So the real job wasn't just to display billing, it was to catch the leak before it became a lapse.
The instinct was to solve that with more information, to put every subscription detail on the dashboard, on the theory that more visibility is always better. My responsibility was the opposite in spirit, to help a fleet manager spot what needs action in seconds, without reading every row of a long table to find the one that's on fire.
Research & Insight
As the Lead UI/UX Designer, with one designer alongside me, I worked with the product manager and the team to understand how fleet managers actually handle billing, and that's where the real tension surfaced. In review, business stakeholders wanted maximum visibility, every subscription detail exposed on the dashboard, because more information felt like better control. I saw it differently. Showing everything with equal weight raises cognitive load and makes the urgent items harder to find, not easier. Nobody was wrong. Both sides wanted the manager to stay on top of the fleet.
A few things became clear.
Not all billing information is equal. Some needs action today, some is useful context, and some is history you only open when you need it.
The urgent cases are rare but costly. Past due and expiring soon are a small slice of a big table, and they're exactly what a flat, everything-at-once view buries.
Managers scan, they don't read. On a console this dense, priorities have to be legible in seconds, not found row by row.
Actions belong next to the problem. Seeing that four devices are past due only helps if renewing or updating a card is right there.
Underneath all of it was a subscription lifecycle with explicit states, active, currently due, past due, suspended, cancelled, and those states are the visible edge of disengagement. A device doesn't lapse the day it shows past due, it lapses weeks earlier, out of sight. So the design job was to surface urgency to the right person before the lapse, and make acting on it a couple of taps, not a chase through a table.
Product Strategy
Instead of arguing visibility against focus, I mapped the subscription workflow and sorted every piece of information into three tiers: immediate action required, important but not urgent, and historical. That mapping, straight out of the research, decided the whole layout.
Urgent first. The top of the page carries the numbers that trigger action, Active Devices, Due in 30 Days, Past Due, and the monthly total, with color and an "Action Required" flag on the ones that need it, so the leak gets caught early.
Detail in the middle, on demand. The device table sits below, filterable into exactly the slice a manager wants, All, Active, Currently Due, Past Due, Suspended, or Auto-Renew, so the long list only shows what's relevant.
History at the bottom. Payment history and logs stay accessible but out of the way, because they're reference, not triage.
See it and fix it. Every urgent state pairs with an action, so renewing a batch, changing a plan, updating a card, or requesting a cancellation happens right where the problem shows up, turning a renewal into a couple of taps instead of a chase.
Ship the read before the write. Phase one delivered the dashboard as a clear place to see the fleet's billing. Phase two added the transactional actions, so the information architecture was proven before money started moving through it.
Experience Architecture
Every surface here is the three-tier map made concrete: urgent at the top, triage in the middle, record at the foot.
The pulse: four metric cards across the top, Active Devices, Due in 30 Days, Past Due, and Monthly Total, each with a colored edge and an action flag when something needs doing, so the rare, costly cases surface first.
The worklist: a Subscription Details table tabbed by exactly the states a manager triages by, All Devices, Active, Currently Due, Past Due, Suspended, and Auto-Renew, with every row carrying its status as a colored pill and a renewal date that counts down or counts overdue. Filters, search, and export sit above it.
The actions: reachable from the rows and the top bar, Renew Subscriptions across multiple devices with an auto-renewal nudge, Change Plan with clear monthly and annual options, Change Payment Method, a Bill Preview, View Receipt, Request Cancellation with a reason, and a dated Payment History export, so acting on a problem never means leaving the page.
The record: payment history at the foot of the page, every transaction with its type, amount, status, method, and a downloadable receipt.
Interface System
The visual system enforces the same finding, managers scan, they don't read, so urgency has to be legible before a single word.
Color that means urgency. Green for active and healthy, amber for due soon, red for past due, grey for cancelled, used the same way on the top cards, the status pills, and the row edges, so a state reads before any word does.
One glance, then the detail. Big metric cards carry the summary, quiet tables carry the depth, and the visual weight drops as you move down the page, matching how urgent the information is, which is the three-tier map in visual form.
Status you can trust. Every state is carried by a label and a color together, and renewal dates say "3 days left" or "8 days overdue" in plain words, so nothing depends on color alone.
Calm, scannable tables. Consistent rows, aligned figures, and clear column sorting keep a dense list readable, with filters that cut it down to just the devices that matter.
Actions that look like actions. Primary buttons for the money moves, quiet ones for the rest, and confirmation and success states on everything that changes a subscription.
Outcome
The dashboard settled the visibility debate by reframing it. Rather than choosing between showing everything and showing less, I organized the information by urgency, so critical operational data stays prominent while the full billing detail stays one scroll away, accessible but never in the way. The stakeholders got what they actually wanted, nothing was hidden, and the interface became far easier to scan, which is what I was there to protect.
The deeper win maps back to where the research started. Because past due is a lagging signal, the value isn't in reporting lapses, it's in catching them early, surfacing the at-risk device to the right person while there's still time to act, in a couple of taps. That was the compromise we reached: the same information, ordered so a fleet manager spots what's on fire in seconds instead of reading every row. It shipped in two phases, the clear read first and the actions second, as one console for keeping an entire fleet paid, current, and on the road.
