The starting point
The CRMs that Argentine SMBs use share a common problem: they show everything, they drive little action. The sales rep opens the app, sees a dashboard with 40 widgets, and goes back to WhatsApp to actually work.
I wanted to design the opposite. A product that on day one tells you, without making you think:
"Today, call these 3. Aliaga's quote expired yesterday. Sofía has capacity — reassign Diego's cold leads to her."
This is what the SMB owner tells their sales team every Monday morning. What was missing was a product that said it first.
The dashboard is not a dashboard
The home screen has a deliberate structure:
- Pipeline status — active USD distributed by stage
- Detected pattern — the system tells the user what's happening, rather than waiting for them to discover it
- Cooling leads — the ones losing momentum, sorted by urgency
- Opportunities to move today — committed next steps with scheduled times
There are no charts up front. No big KPIs. Those are one click away, at /conversion. The home handles what to do right now.
The greeting changes based on the time of day — "Hi Mariana, good evening" — because the product talks to you, it doesn't just report to you.
Honest intelligence
Five detectors that cross-reference the pipeline, the team, and the history:
| Type | What it detects |
|---|---|
| Operational | Form leads with no sales rep assigned |
| Bottleneck | Leads >14 days with no movement in a stage |
| Opportunity | Concentration of closes on a single day or time slot |
| Trend | Imbalance between leads created vs. closed |
| Suggestion | Workload imbalance across the team |
Behind the term "AI" are deterministic SQL queries. I did it this way deliberately: the "AI" most CRMs sell is exactly that. Being upfront about it was a product decision, not a technical one.
-- "Bottleneck" detector (simplified)
SELECT l.*
FROM leads l
JOIN ultimo_cambio uc ON uc.lead_id = l.id
WHERE l.estado = 'propuesta'
AND uc.ultima_fecha < now() - interval '14 days';Each pattern can be marked as resolved, but it stays in the history — this protects the user from "losing" an insight if they close it by accident, and lets the system learn which patterns are acted on and which are ignored.
The lead record
Each lead is a full page with:
- 4 status cards — estimated value, stage with a progress bar, days in pipeline, owner
- Next step — the upcoming action highlighted in violet
- Contact history and schedule — everything that's happened and what's coming up
Three primary actions top-right: Log contact (the most frequent, in black) · Move to proposal · Edit. The "..." menu holds secondary actions (reassign, mark as lost, confirm won).
The progress bar below the current stage shows where it is and which stage it can move to. A small but important decision: the user always sees the full path, not just the box they're standing in.
The pipeline kanban
Drag & drop with @dnd-kit, spring animations with framer-motion. Five columns: New, In conversation, Proposal, Closing, Won.
Each column has its own color accent on the top bar. Cards show name, source (LinkedIn, WhatsApp, Form, Referral) with a dot in the channel color, estimated value, type (recurring or project), owner, and age in the stage.
The detail I like most: bottleneck warnings appear as yellow cards inside the column, mixed in with the rest. "5 stuck for +14 days" in Proposal, "8 stuck for +14 days" in Won (yes, Won too — the ones that closed but weren't invoiced). The insight lives where the work is, not in a separate tab.
Conversion and Closed, the two sides of the month
/conversion is for the owner looking for the funnel's bottleneck.
The title reads "Where we're losing leads" — not "Conversion funnel." The framing matters: the owner opens this screen looking for a problem, not contemplating a metric.
Four KPIs up top with delta vs. the previous period. A monthly insight highlighted in violet: "The funnel bottleneck is Proposal → Closing. Only 20% of leads make that transition. Leads stay an average of 13 days before moving or dropping off."
Below, the decreasing bar funnel with conversion rates between stages, time in each stage (with the bottleneck stage highlighted in yellow), and a 3-month trend line.
Note: in the screenshot the seed is still in the process of being enriched — the monthly numbers show 45 leads and 2 won. The product's final seed has more monthly history so the trends show up fully.
/cerrados is the counterpart: the tangible result of the month.
Four KPIs with a side color accent: won (green) / value closed (blue/green) / lost (red) / close rate (violet). The "USD 59,400 · 79% of target" shows the user whether they're hitting the month's goal.
Sales rep ranking with gold / silver / bronze medal podium. Subtle gamification works in sales, and the ranking is calculated by value closed, not by ratio — which protects the rep who closes few but large deals.
Below the podium, the list of closes with value, how many days each took, owner, and source. At the bottom (collapsed), the "What was lost" section with the top 3 reasons in a visual band.
The visual system
Four decisions I kept consistent throughout the product:
- A single display typeface (Fraunces SOFT=100) in italic for one key word per heading. Seeing. Closed. Losing. In play. Every screen has its verb.
- Three semantic colors (red / yellow / green) and four brand colors (blue / violet / teal / coral). Nothing more.
- One hero element per screen. If there's a focal point, nothing else competes with it.
- A direct, conversational voice throughout the UI. "You have 21 leads that asked for follow-up." "This is where they get stuck." "We start with what's cooling down." No jargon. An SMB in any city should feel like the product is talking to them, not to a San Francisco startup.
Mobile-first without being mobile-only
The 7 main screens have a complete mobile redesign. This isn't automatic responsiveness: KPIs reorder into 2×2, accordions collapse differently, tables compact to show only the essentials.
On mobile, data loses columns (owner, exact date) and keeps only what matters on a small screen: lead name, value, link to detail. Density changes, hierarchy doesn't.
What I left out (on purpose)
Three things a "complete" CRM would have that this one doesn't:
- Integrated email/WhatsApp: the product pre-fills and opens the user's own client, but sends nothing itself. Integrating Meta Cloud API + Resend adds 2 weeks of work and 60% of real bugs.
- Separate owner dashboard: today everyone sees the same view. When it scales to 5+ people, a "sales view vs. owner view" toggle will be needed. Not today.
- PDF reports: I have the system, I didn't integrate it because the product doesn't need it yet.
Saying "not this" is just as much a design decision as saying "yes to this."
How it's built
Small, opinionated stack, no over-engineering: Next.js 15 with App Router · Supabase (Postgres + RLS) · Tailwind v4 with design tokens · framer-motion + @dnd-kit · Vercel with a cron job that resets the seed every night at 03:00 ART.
The 42 screens and components were built in ~5 days by splitting the work across three Claude instances:
- Claude in chat → visual design and UX, product decisions, prompts for implementation
- Claude Code in VS Code → code implementation from those prompts
- Claude in Chrome → post-deploy audits to catch visual bugs
This split — Chat designs, Code implements, Chrome audits — lets one person move at the pace of a team of four.