Car-Wash Subscription & Voucher Platform

UI/UX Designer for Lava Thru, an AutoTech express drive-thru automated car wash network and recurring subscription club. Architected a 5-page, 308-top-level-node Figma system (file key UNaM05TzpUnAoWVvnheN9U, node 0:1): 187 canvas nodes on the master Design page covering a multi-tier recurring wash subscription club (Planos with 6 variants), a 12-screen credit card checkout flow (Pagamento - Cartão), a digital voucher creation and gifting engine (HomeVoucher, EditVoucher), and customer dashboards; a dedicated 76-node Validação page engineering granular input validation states (Input/ERRO, Input/CORRETO, Input2.0), HTTP error recovery screens (404, 405), and administrative operator controls; supported by a Style Guide containing built-in system architecture blueprints (Arquitetura_Lava-Thru-1 and 2), 10 semantic color tokens, and elevation drop shadow effects.

Agency employment at Sagitta delivering from February 6, 2024 to July 23, 2024. Juan served as UI/UX designer within the agency team alongside engineering. The client operated automated physical drive-thru car wash facilities and required a consumer digital membership platform to manage recurring wash plans, license plate vehicle registrations, digital gift vouchers, and retail unit locations.

AutoTech recurring subscription and voucher architecture

📐308

canvas nodes across 5 Figma pages (187 on Design, 76 on Validação)

💳12

credit card checkout screens with granular validation

🚗6

recurring wash plan variations designed

🎨10 + 1

semantic color tokens and CardDashboard elevation effect

Automated drive-thru car wash facilities rely on high vehicle throughput. In mature automotive markets, recurring monthly membership clubs account for the majority of recurring revenue, replacing unpredictable weather-dependent one-off washes with stable MRR. Translating this model to digital required an interface that allowed drivers to easily choose recurring wash tiers, associate their license plate, complete credit card checkout, and manage single-use gift vouchers for friends and family.

The core product suite on the Design page (187 nodes)

The primary Design page (node 1:407, containing 187 canvas elements) encompasses the complete driver and subscriber experience:

• Recurring Plan Tiers (Planos) — Six distinct plan configurations detailing wash inclusions (Express Wash, Foam Cannon, Wheel Cleaning, Undercarriage Blast, Ceramic Sealant) with transparent monthly billing toggles.
• 12-Screen Credit Card Checkout (Pagamento - Cartão) — Comprehensive payment flow covering CVV security formatting, card brand auto-detection (Visa, Mastercard, Elo), billing zip code resolution, installment breakdowns, and animated processing states.
• Digital Voucher Engine (HomeVoucher & EditVoucher) — Dedicated tooling enabling users to purchase wash gift cards, customize recipient messages, set expiration terms, and redeem promotional vouchers at physical drive-thru kiosks.
• Subscriber Management (Detalhes do Assinante & Lista Clientes) — Customer portal displaying active vehicle license plates, past wash histories, next billing date, and one-click plan upgrade/pause options.

Defensive UX: The 76-node validation and error suite

Many agency design files skip error states, leaving developers to improvise validation logic during implementation. In Lava Thru, I created a dedicated Validação page (node 232:2544, 76 children) specifying explicit visual behavior for every interaction boundary:

• Granular Input Feedback — Engineered explicit states for Input/ERRO (node 373:2410), Input/CORRETO (node 373:2459), and the tokenized Input2.0 component set (node 1229:4817), standardizing focus, typing, disabled, and error helper text styling.
• HTTP Error Resilience — Designed branded fallback screens for 404 (Route Not Found) and 405 (Method Not Allowed) errors, preventing users from encountering raw browser error strings.
• Administrative Back-Office — Engineered operator management interfaces including Cadastrar admin, EditarAdmin, Ver colaborador, and administrative notification centers for on-site tunnel operators.

System architecture and tokenized design foundation

The Style Guide page (node 1:2) incorporates two complete architectural system diagrams (Arquitetura_Lava-Thru-1 and 2), mapping out the relationships between customer onboarding, recurring subscription webhooks, voucher validation, and store locator queries. The visual foundation established 10 semantic color styles (including Royal Blue #041F64, Express Orange #F54F03, and Dark Neutral #1C1C1C) and a standardized CardDashboard elevation drop shadow.

What this project is and is not

• Not hardware or IoT automation. I did not design or program physical wash tunnel relays, optical license-plate recognition (ALPR) cameras, or entrance barrier gates.
• Not payment processing implementation. I designed the 12-screen card checkout interface; payment gateway integration and tokenized subscription billing were not my code.
• Not the live Bubble website. While lavathru.com.br is online, the agency's no-code developer deployed an earlier build without incorporating this 308-node refactored design.
• Not a car-wash business operation. I was the UI/UX designer for the digital product, not an owner or operator of the car-wash facilities.
• Not supported by subscriber metrics. No active MRR, member retention rates, or voucher redemption figures exist in the portfolio record.

The value of exhaustive interface architecture

Lava Thru represents professional design engineering at scale: anticipating every user journey, edge case, and administrative requirement before engineering begins. Across 308 meticulously organized nodes, the design delivered a complete operational blueprint for an automotive subscription platform.

Evidence

The car wash network operates and is accessible at lavathru.com.br. However, the agency's no-code developer deployed an earlier Bubble version rather than Juan's refactored, production-ready Figma architecture; this preliminary version continues to operate online today. No data exists regarding subscription revenue or commercial adoption. This case study documents the comprehensive UI/UX design, edge-case validation architecture, and subscription checkout mechanics of the audited 308-node Figma artifact.