## Overview

Palma Verde is a palm nursery in Cumbayá, Ecuador, with **10+ years** selling and transplanting palms across Quito and the valleys. They had the expertise on the ground, but no digital product to match it. I **designed and developed** a bilingual one-page web product end to end, from UX and UI to Next.js, local SEO, and production deploy. Built to rank in local search and convert visitors into quotes via WhatsApp, phone, and email. **Live site:** [somospalmaverde.com](https://www.somospalmaverde.com) ![Palma Verde desktop hero with palm specialists headline, quote CTAs, and real crew photography](/img/case-study/palma-verde/hero-desktop.png) **Role:** UX/UI, web design, front-end development **Stack:** Next.js 16, React 19, Tailwind CSS 4, TypeScript, Vercel **Scope:** Design, development, local SEO, structured data, production deploy ## The problem

After more than a decade in operation, Palma Verde was invisible where it mattered most: Google. - **Local search had no home.** Queries like *vivero Cumbayá*, *trasplante de palmeras Quito*, and *jardinería Nayón* had no canonical page to land on. - **The offer was hard to scan.** Palms, transplanting, gardening, and supplies are all real services, but there was no clear hierarchy for someone arriving from search. - **B2B buyers need speed.** Developers, hotels, and residential complexes want trust and a quote in one tap, not a brochure they have to decode. - **Mobile is the channel.** In Ecuador, WhatsApp is the CRM. If the site does not convert on a phone, it does not convert. ![Before and after: from no structured web presence to a search-ready one-page site](/img/case-study/palma-verde/before-after.png) ## Web design goals

1. **One message above the fold:** palm specialists, with a direct path to quote. 2. **Single-page IA** with anchors for hero, specialty, services, gallery, FAQ, location, and contact. 3. **Mobile-first conversion:** WhatsApp FAB, thumb-friendly CTAs, back-to-top without noise. 4. **Real photography** over stock: transplant work, nursery, crew on site. 5. **Readable long-form sections** for services and FAQ without breaking scanability. ![Device mockup: desktop and mobile views of the live one-page site](/img/case-study/palma-verde/device-mockup.png) ## Local SEO strategy

This was not SEO as an afterthought. Search structure shaped the content and the page layout. ### Keyword map tied to real services Metadata, headings, and body copy target searches the business actually wins: - Vivero Cumbayá / nursery Cumbayá - Venta y trasplante de palmeras Quito - Jardinería Nayón, Tumbaco, valles - Poda, césped, tierra negra, abonos orgánicos Each service group on the page mirrors how people search, not how the business files paperwork internally. ### Technical SEO - Unique **title + meta description** per language (ES / EN) - **hreflang** between `/` and `/en` - Auto-generated **sitemap** and **robots.txt** - Semantic HTML: landmarks, heading hierarchy, descriptive alt text on every image - **Open Graph** image for share previews ### Structured data (JSON-LD) Built a graph that connects the business to its services and geography: - **LocalBusiness** with address, phone, email, service areas - **WebSite** + **WebPage** linked to the business entity - **Service** entries for palm sales, transplanting, gardening, supplies - **FAQPage** with real purchase objections (survival guarantee, zones, nursery visit) - **CommunicateAction** pointing to WhatsApp as the primary contact action ### FAQ as SEO + conversion The FAQ section does double duty: it answers objections for humans and gives Google long-tail answers for queries like *¿las palmeras sobreviven al trasplante?* and *¿a qué zonas llegan?* ### Indexed in under 24 hours Less than a day after launch, the site was already showing up on Google for branded and local searches. Position #1 for queries like *Palma Verde Cumbayá*, *somos palma verde*, and *vivero palma verde*. That is the payoff of clean metadata, JSON-LD, sitemap submission, and copy written around how people actually search in Ecuador. ![Project grid: hero, specialty, services, gallery, and contact sections from the live site](/img/case-study/palma-verde/project-grid.png) ## Visual design

The visual language had to feel like the nursery: dark forest for craft and field work, warm bone for reading, olive as the living accent pulled straight from the embroidered monogram on crew shirts. ![Visual design system: color tokens, Fraunces and Manrope typography, UI components, and photography direction](/img/case-study/palma-verde/design-system.png) **Color tokens:** Forest `#06170F` / `#0A2317` for hero and gallery atmosphere. Olive `#C5D48A` for CTAs and emphasis. Bone `#F7F3EA` and Sand `#E9E2D3` for long-form sections. Palm `#34B064` as secondary accent. **Type pairing:** Fraunces for display and brand voice. Manrope for navigation, body, and UI at every breakpoint. **Photography rules:** Real transplant and nursery shots only. No stock. Dark sections carry proof; light sections carry detail. **Motion:** Apple-style easing (cubic-bezier 0.22, 1, 0.36, 1), scroll reveals, FAB slide, subtle hero ken-burns. Enough motion to feel alive, never enough to slow a quote on mobile. ## UI & layout decisions

### Hero built to convert Dark full-bleed photography, one headline (*Especialistas en palmeras*), one lead paragraph covering palms + garden services, stats for proof (10+ years, 500+ transplants, 100% survival guarantee), and two CTAs: quote + view services. ### Section rhythm Dark sections (hero, gallery, contact) alternate with light sections (specialty, services, FAQ) so long scrolls stay readable without feeling monotonous. ### Specialty before breadth Palm sales and transplant cards come first. That is the core revenue. Then comes the wider gardening and supplies offer. Search visitors looking for palms land immediately; others scroll into the full service list. ### Gallery as proof Masonry of real field work. No icon grids. The crane, the root ball, the palm standing. That is the portfolio. ## Mobile experience

Most traffic will arrive on a phone. The layout prioritizes: - Sticky quote CTA in the header - WhatsApp FAB always reachable - Back-to-top FAB that slides in from below without covering the contact button - Tap targets sized for thumbs, not desktop cursors **Live site:** [somospalmaverde.com](https://www.somospalmaverde.com) ![Three mobile screens in device frames: hero, specialty, and contact](/img/case-study/palma-verde/mobile-frames.png) ## Bilingual setup

Spanish is the primary market; English covers expat and corporate buyers in Quito. - Mirrored page structure in `/` and `/en` - Localized metadata, not machine-translated titles - Shared components, separate copy files - hreflang tags so Google serves the right language ## Process

The build followed a full product loop: research, UX, UI, business checks, tests, then development. Not design thrown over the wall. ### 01. Research Talked with the business about what they sell, who buys (B2B + residential), where they operate (Cumbayá + 10 valley zones), and what success looks like on the web: a quote request. Reviewed existing brand assets, field photography, and how competitors show up in local search. ### 02. UX Mapped the one-page IA around objections and intent: specialty first, then services, proof (gallery), FAQ, location, contact. Defined the primary path to WhatsApp / phone / email. Mobile flows came first because that is where Ecuador traffic and WhatsApp live. ### 03. Business alignment Tied every section to revenue: palms and transplanting lead, gardening and supplies support. FAQ answers real purchase blockers (survival, zones, nursery visit). CTAs stay quote-oriented, not brochure-oriented. ### 04. UI design Hero, specialty cards, service groups, gallery, FAQ accordion, map, and contact. Visual system: Forest / Olive / Bone, Fraunces + Manrope, real photography only. Designed for conversion and readability across breakpoints before writing production code. ### 05. Testing Walked the flows on mobile and desktop: quote CTAs, WhatsApp FAB, language switch, FAQ accordion, map, and share previews. Checked that the page scanned in one scroll for a buyer who wants trust fast. Fixed friction before calling it done. ### 06. Development & launch Built in Next.js App Router with TypeScript and Tailwind: components, i18n (`/` + `/en`), JSON-LD, scroll motion, GTM + Clarity. Shipped on Vercel with Git history and preview URLs. Search Console submitted; indexed on Google in under 24 hours. ![Process: research, UX, business alignment, UI, testing, and development](/img/case-study/palma-verde/process.png) ## Handoff

There was no separate handoff meeting because the same person owned research through ship. UX decisions, UI tokens, and production code stayed in one loop: Git for history, Vercel for previews and production. **Design → code:** Color, type, and spacing tokens lived in the Tailwind config from day one. What you see in the style guide is what ships in the browser. No drift between mockup and production. **Stack:** Next.js 16 App Router, React 19, TypeScript, Tailwind CSS 4. Image optimization, i18n routing (`/` + `/en`), JSON-LD injection, and scroll behavior all in the same codebase. **Git + Vercel:** Every meaningful change went through version control. Preview deployments on push, production on merge. Fast iteration without breaking what was already live. **AI-assisted build:** I used AI as a development accelerator, not a replacement for judgment. Boilerplate, SEO scaffolding, i18n structure, and repetitive component patterns moved faster. Research insights, UX calls, UI direction, and what actually ships stayed human. **Launch checklist:** Vercel production deploy, sitemap live, Search Console submitted, OG previews tested on WhatsApp. Indexed on Google in under 24 hours. ## Deliverables

- Full design + development of the one-page site (ES / EN) - Next.js build, i18n routing, and Vercel production deploy - Local SEO: metadata, hreflang, sitemap, robots - JSON-LD: LocalBusiness, Service, FAQPage, WebSite - Conversion UX: WhatsApp FAB, quote CTAs, mobile menu - Gallery, FAQ, map, and coverage zones - Analytics: GTM + Microsoft Clarity ![Contact section with WhatsApp, phone, email, and location](/img/case-study/palma-verde/contact.png) ## Result & learnings

**Outcome:** a live site I designed and coded from scratch, structured for local search and built to quote. Not a mockup handed off to someone else. **Learnings:** - For local businesses, **FAQ content is SEO infrastructure**, not filler at the bottom of the page. - **Service-area schema** matters as much as keywords when you cover 10+ zones around Quito. - A new domain can surface on Google in **under 24 hours** when technical SEO and search-intent copy ship together on day one. - Single-page wins when WhatsApp is the sales channel and the client wants one scroll to trust. - Real transplant photos outperform polished mockups every time. ## Credits

**Design & development:** Jetto González · [jettogonzalez.com](https://jettogonzalez.com) **Client:** Palma Verde Cumbayá **Photography:** Client archive / real project documentation **Live:** [somospalmaverde.com](https://www.somospalmaverde.com)