Designing a URL Shortener UI That Works for Everyone
The design decisions behind hrva.cc's interface — why we removed the advanced options toggle, how we upsell without being pushy, and what we learned from user behavior.
A URL shortener has two very different user types: the visitor who wants to shorten one link quickly, and the power user who needs custom aliases, visit limits, and analytics. The UI must serve both without confusing either. Here's how we designed for that.
The Anonymous Flow: Paste, Shorten, Done
The landing page's hero section is deliberately minimal: a URL input field and a "Shorten" button. No account required, no options to configure, no friction. The user pastes a URL, clicks Shorten, and gets their short link instantly. This is the path that 80% of visitors take.
What We Removed
The original design had a "Show advanced options" toggle that revealed custom alias, visit limit, and expiration date fields. We removed it from the anonymous flow because those features don't work for unauthenticated users — the backend clears them. Showing options that silently do nothing is worse than not showing them at all. Instead, after a visitor shortens a link, we show a subtle upsell: "Create a free account to set custom aliases, visit limits, and track analytics."
The Logged-In Flow: Power Tools Visible
When a user logs in, the same form changes. Custom alias, visit limit, and expiration date fields are always visible — no toggle needed. The user is already authenticated and intentional; hiding power features behind an accordion only adds friction. The form has a clear separation with a "Optional settings" label and a subtle border above the advanced fields.
The Dashboard
The dashboard shows all URLs in a sortable, filterable, paginated table. Users can search by keyword, filter by status (active/inactive), and check "Expired only" to see links past their expiration date. Each row has quick actions: copy URL, open destination, generate QR code, view analytics, deactivate, and delete. The pagination always shows the total element count and page size selector.
What We Learned
The toggle pattern assumed users would discover advanced options and use them. In practice, anonymous visitors who want a quick short link don't explore hidden sections — they paste and click Shorten. Showing options that don't work for their current auth state added confusion without benefit. The upsell card after shortening is more transparent: it tells them exactly what they'd get by creating an account, right when they've just experienced the core value of the tool.