Professional URL shortener for SMB marketing teams. Designed with Radical Simplicity and Active Trust in mind, standing against an overloaded and outdated competition.
Shurly is a B2B URL shortener for SMB marketing teams (1–15 people). Built with FastAPI, Astro, and PostgreSQL on serverless infrastructure. The name combines SHort + URL + Y and phonetically evokes "Sure!" — trust.
💡 Value Proposition: "A professional, modern, and accessible URL shortener that allows SMB marketing teams to track and manage their links with the simplicity of a friendly tool and the power of an enterprise service."
Main action is always obvious. Zero cognitive load. Complexity is hidden in accordions.
Immediate feedback on every action. Loading, success, and error states are always visible.
Essentials first. Advanced options (UTMs, Open Graph) are revealed only when requested.
"Justin Long in Get a Mac" tone: professional and competent, yet relaxed and human.
Heuristic analysis of 4 competitors (Bitly, Rebrandly, BL.INK, YOURLS) to identify the pain points Shurly must resolve.
| Competitor | Archetype | Main Pain Point | Shurly Opportunity |
|---|---|---|---|
| Bitly | The Ruler | Overloaded with products (Links, QR, Pages). High decision fatigue. | One thing done right. Single and obvious input. |
| Rebrandly | The Rigid Creator | Forces DNS configuration before providing value. Maximum entry friction. | Guest mode: immediate value without registration. Magic link follow-up. |
| BL.INK | The Outdated Sage | "Bubbly UI": excessive padding, corporate blue, inefficient data. | Clean, high-density tables. Clear visual hierarchy. |
| YOURLS | The Technician | Requires own server. Obsolete UI. Only for developers. | Human language. "Secure link" instead of "Redirect 301 SSL." |
There is no tool that is powerful for a marketer but speaks in human language.
→ Justin Long PersonalityStatic interfaces. The modern user expects the UI to "react" with micro-interactions.
→ Toasts + check marksMarket saturated with "boring corporate blue." Lacks vitality and modernity.
→ Coral / Electric IndigoFrom the 3 explored directions (Kinetic Spark, Radical Clarity, Friendly Guide), Radical Clarity was selected: the direct antithesis of Bitly's clutter and BL.INK's bubbly aesthetic.
Type: Typographic wordmark. Geometric humanist sans serif (DM Sans / Satoshi), bold, lowercase.
The Twist: The dot in the "i" or the final period of "shurly." is replaced by a square/circle in the accent color. Represents: "Here is your link. Period."
Animation Factor (critical): The element must be designed for animation. How does it pulse when loading? How does it transform into a ✓ when an action is complete? Suggests zero latency.
Avoid: Chain links, 3D effects, gradients, network icons, or globes. No corporate blue.
| Role | Color | Usage |
|---|---|---|
| Base (60%) | Absolute White + Ghost White | Backgrounds and surfaces. Maximizes space for dense tables. |
| Contrast (30%) | Obsidian (Slate-900) | Texts and hierarchies. Seriousness without the harshness of pure black. |
| Accent (10%) | Electric Coral or Hyper-Violet | Primary action buttons and toasts. Human vs. office blue. |
| Semantic | Mint Green / Soft Coral / Amber | Success / Error / Free Plan Warning. |
| Mono | JetBrains Mono | Shortened URLs. Perfectly distinguishes l, 1, and I. |
Inter or Plus Jakarta Sans. Modern, grotesque, high readability, tech personality.
Inter. Gold standard for SaaS interfaces. Legibility at small sizes.
JetBrains Mono or Fira Code. Essential for displaying shortened URLs with precision.
System built in Figma with Design Tokens (JSON) as the source of truth, synchronized via Tokens Studio. Atomic components for Astro + Tailwind v4.
tokens.json with colors, spacing, and radii. Figma and CSS read this file.variables.css.URL Cards: Clear visual hierarchy: Human title (bold) > Short URL (mono) > Metadata (gray). The link title is always more prominent than the technical URL.
Accordion Pattern: Advanced inputs (UTMs, Open Graph, Tags) collapsed by default. Novice users only see URL + "Shorten" button.
Animated Toasts: Floating notifications with visible progress bars. "Link copied! Ready to paste." Icon changes from 📋 to green ✓ in 2s.
Educational Empty States: Empty dashboard with linear illustration + CTA: "Your first campaign? Create your first link in 2 seconds."
Passive Paywall: Pro features disabled with subtle "Upgrade to unlock" badge. No aggressive pop-ups.
🧊 The Iceberg Strategy: The interface looks simple (the tip of the iceberg) but is powerful at its core. For the novice user: paste → shorten → done. For the expert user: expand accordions → configure OG → shorten.
Shurly speaks like that colleague from the product team who understands technology but explains it in normal words. Competent, fast, and transparent.
| We are… | But NOT… | Why |
|---|---|---|
| Relaxed | Careless | We use contractions but respect grammar. |
| Direct | Rude | We respect the user's time with short phrases. |
| Expert | Pedantic | We educate with tooltips, not technical jargon (DNS, Query). |
| Human | Cheesy | We speak like people; we don't use forced youth slang. |
| Context | ✅ Use (Shurly) | ❌ Avoid (Legacy) |
|---|---|---|
| Actions | "Create", "Launch", "Copy" | "Execute query", "Submit", "Commit" |
| Time | "2 hours ago" (relative) | "25/11/2025 14:30:00" (absolute) |
| Errors | "We couldn't find that link" | "Error 404: Unhandled exception" |
| Upsell | "Unlock Analytics" | "PAY NOW" / "License restriction" |
| Success | "Done! Link created." | "URL object creation successful" |
Time from registration to first URL created: < 2 minutes.
Time to create a standard URL: < 30 seconds.
Free → Pro upgrade rate: > 5%.
Net Promoter Score (NPS): > 50.
Week 1: Competitive Research + Visual Identity (Logo, palette, typography, tone guide) → Brand Guidelines PDF.
Week 2: Design System with tokens + Component library (buttons, inputs, cards, badges, modals) → Figma file + Tailwind v4 specs.
Week 3: Core Hi-Fi Desktop screens: Landing, Auth, Dashboard, Single & Bulk URL creation flow.
Week 4: Secondary screens + mobile adaptation + handoff documentation for development.
Field for naming links humanly (exists in backend, missing in UI).
Relative timestamp: "2 hours ago" instead of absolute date.
Social metadata visualization and editing. Real-time preview.
Color pills with autocomplete to organize campaigns.
Ability to edit destination and metadata without leaving the list.
QR generation and download. Immediate next step after MVP.