Project 01 · Landing page

Plazo

I designed and built the landing page for Plazo, a collections software for small businesses. The page explains the product with a single sample invoice.

Visit the site How I approached it

Role: Design and development
Format: Landing page
Built with: Next.js
Year: 2026

01 · The problem

Four tasks that have to make sense in seconds

A feature list falls short

Plazo sends reminders by WhatsApp and email, collects with a payment link, matches each transfer to its invoice and shows how much comes in during the week. Listed one after another, those four features don't show how they connect, and someone arriving with no context gives the page a few seconds.

Plazo is a fictional product. The landing page says so in the footer, along with the fact that the clients, figures and testimonials are illustrative.

Plazo’s hero: “Cobra a tiempo. Sin perseguir a nadie.” (Get paid on time. Without the chasing.) over a photo of two hands, with the product summary and the 14-day free trial button — The Plazo landing page

02 · How I solved it

A sample invoice that runs through the four steps

2.1

A single invoice

The steps section follows invoice 4521 from Distribuidora Andina, for $ 482,300. First the reminder sequence is set up, then the client pays from the link, the payment is matched to its invoice and shows up in the weekly forecast. Each screen picks up where the previous one left off.

The four-step section with the first step open and, next to it, the sequence for invoice 4521: an email reminder, a payment link over WhatsApp and a phone call — Step 1 · the reminder sequence

2.2

Product screens in code

I built the screens in HTML and CSS instead of using screenshots. They animate to show what happens in each step, like a transfer that reconciles on its own and another one left for review, and they get translated with the rest of the page. Each step also has a text description for screen readers.

Step 3 open with the reconciliation screen: bank transactions matched with their invoices, marked as reconciled, to review or without an invoice — Step 3 · reconciliation, animated

2.3

On mobile, a timeline

On narrow screens, the steps line up as a timeline with a small version of each screen, so they read in order without opening or closing anything.

The first two steps on a phone: the sequence for 48 invoices and the $482,300 payment recorded through Mercado Pago — On mobile, the steps in order

I built it in Next.js and published it on Cloudflare Pages, in neutral Spanish and in English.

Next channel · 90.5 FM Ripio Landing pages for ripio.com, where I was a UI Developer.