Case Study

Built from zero to live in one week.

A restaurant with loyal regulars, no digital presence, and no way to take a pickup order. I designed and shipped its first website, ordering experience, and payment workflow in seven days.

Live Site
Role UX Designer · Workflow Designer · Developer
Type Self-initiated pro bono
Timeline 1 week, discovery to launch
Status Live in San Juan, PR

Background

A restaurant that was invisible outside its own building.

TRECE Friendly Food is a restaurant operating inside a CrossFit gym in San Juan, Puerto Rico. The brand and name belong entirely to the business, and I came in as their first and only designer.

When I approached them, the restaurant was effectively invisible to anyone outside the gym. No website. No Google presence. No findable phone number. Their only digital touchpoint was an Instagram account, and their primary customer base was gym members who happened to walk past. They had just signed up for DoorDash while I was building the site, but DoorDash alone wasn't the right answer.

Discovery

Questions before pixels.

Before touching any design tool, I sat down with the owners and worked through a targeted set of questions:

The answers gave me a clear picture of three interconnected gaps, and one critical constraint I needed to design around.

The Problems

Three gaps, one business-critical constraint.

01
Discoverability
The restaurant existed inside a building. No one searching "food near me" or "San Juan lunch" would find them. They didn't appear on Google Maps. Their Instagram required already knowing they existed.
02
No ordering mechanism
Outside of walk-ins, there was no way to place a pickup order. DoorDash covered delivery but carries fees most locals find prohibitive. In Puerto Rico, DoorDash is primarily used by tourists, so it wasn't the right channel for the community the restaurant depended on.
03
Payment reliability
If I designed a pickup flow, I had to solve one business-critical risk: a customer places an order, the kitchen prepares it, the customer never shows. Without upfront payment verification, this was a real exposure for a restaurant already running lean.

The Insight

Design for how Puerto Rico actually orders.

The right solution had to be designed for how people in Puerto Rico actually behave, not how a generic e-commerce template assumes they do.

ATH Móvil is Puerto Rico's dominant peer-to-peer payment platform. It's what locals use to pay each other, split bills, and transact with small businesses. It's trusted, familiar, and instant.

WhatsApp is equally ubiquitous, and it's how Puerto Ricans communicate both personally and professionally. It is not a niche channel here. It is the channel.

Combining both created an ordering workflow native to the community, not imported from somewhere else.

Design Exploration

Aligning on visual direction before writing code.

Before building, I used Google Stitch to rapidly explore design directions with the TRECE team. The iterations ranged from a luxury wellness aesthetic to a more editorial, food-forward approach, including bilingual versions in both English and Spanish. This phase let us align on visual direction quickly without committing to code.

Google Stitch canvas showing multiple TRECE Friendly Food website design directions, from luxury wellness to editorial food-forward layouts, in both English and Spanish

Design directions explored in Google Stitch, spanning aesthetic and bilingual variations

The Workflow

The Ordering System

The site surfaces two ordering options immediately and equally on the homepage: DoorDash for delivery, and a custom pickup flow for local customers.

TRECE ordering workflow, two paths Customer arrives at site and chooses between DoorDash delivery or pickup. The pickup path goes through ATH Móvil payment and WhatsApp confirmation. Customer visits TRECE website delivery pickup Pedir por DoorDash Standard third-party checkout Ordenar Pickup or adds items from menu scroll DoorDash handles checkout Selects items + confirms order Pays via ATH Móvil Payment before order is confirmed Pre-filled WhatsApp opens Order details auto-populated Attaches payment screenshot Restaurant receives order + proof ← tourists / delivery locals / pickup →

DoorDash is available from the first screen, primarily used by tourists and customers who prefer standard delivery. It links out to the existing DoorDash integration.

The pickup flow is where the design work lives. When a customer clicks "Ordenar Pickup" or starts adding items from the menu:

  1. They select their items and confirm the order
  2. They pay via ATH Móvil, Puerto Rico's most-used peer-to-peer payment app, before the order is placed
  3. A pre-filled WhatsApp message opens automatically, addressed to the restaurant with their order details already populated
  4. The customer attaches a screenshot of their ATH Móvil payment confirmation
  5. They send the message, and the restaurant receives the order and payment proof simultaneously
The kitchen does not begin preparing until both are received. No no-shows. No unpaid orders. No platform fees.

What Was Built

Delivered end to end.

Responsive website, designed and developed end to end
Menu and ordering experience
ATH Móvil to WhatsApp checkout workflow
DoorDash integration
Google Business Profile setup and optimization
Google Search Console configuration and sitemap submission
Google Analytics implementation
Local SEO implementation
AI-assisted development throughout

On Timeline

One week, discovery to launch.

Discovery, design, development, and launch completed in one week. AI tools were used deliberately to compress development cycles, not to skip thinking, but to spend more of it on the workflow design and less on boilerplate.

Reflection

The right tools for the right community.

TRECE had everything it needed to succeed: a kitchen, a location, and regulars who already liked the food. What it lacked was infrastructure. This project was about building that infrastructure as quickly as possible, using the right tools for the right community.

Next Case Study →
Compliant Payout POS · Designing a kiosk where unsafe actions are structurally hard to take