Plataforma ecommerce con frontend a medida mobile First

Desarrollo web mobile first para Okatent

Desarrollo de un frontal PHP standalone con maquetación mobile first para Okatent SL, importador de soluciones industriales y estructuras modulares de China, ejecutando un WordPress legacy en segundo plano en algunas páginas antiguas. El proyecto fue una máquina de captación de oportunidades comerciales, capaz de generar alrededor de 1300 leads al año a través de formularios bien planteados y flujos de contacto claros, que sin embargo el cliente fue tan cutre que no pagó después de 18 meses solicitando cambios.

Frontend PHP standalone mobile first sobre un WordPress legacy para captación de leads B2B - Desarrollo web mobile first para Okatent

¿Cómo abordé el proyecto?

Okatent SL comercializa estructuras modulares, cubiertas y soluciones industriales fabricadas en China, orientadas a clientes B2B que necesitan carpas, cerramientos y sistemas de fijación para eventos, industria y logística. La empresa ya contaba con un WordPress en producción, pero con páginas antiguas y una estructura que no estaba optimizada para la captación sistemática de leads. El proyecto consistió en desarrollar un frontend PHP standalone, con enfoque mobile first y formularios estratégicamente situados, manteniendo WordPress como motor de ciertas secciones legacy y de contenidos. Esta combinación permitió modernizar la experiencia de usuario y convertir la web en un canal constante de generación de oportunidades comerciales sin tirar a la basura todo lo ya existente.

Resultado clave: Para convertir una web industrial en una fábrica de leads, hay que pasar de “informar” a “activar”: mobile first en el frontal, formularios claros y un WordPress legacy al servicio de la nueva experiencia.

Frontend PHP standalone sobre un WordPress existente

Se desarrolló un frontal a medida en PHP, desligado de las limitaciones del theme previo, mientras WordPress seguía corriendo en segundo plano para algunas páginas antiguas y para la gestión de contenido donde tenía sentido mantenerlo.

Diseño mobile first orientado a B2B

La maquetación se planteó mobile first, pensando en responsables de compras, logística y proyectos que consultan la web desde móvil o tablet, con navegación clara hacia productos, aplicaciones y contacto.

Formularios de captación pensados para ~1000 leads/año

El frontal se estructuró alrededor de formularios bien visibles, específicos por línea de producto y por tipo de necesidad, con llamadas a la acción directas y un flujo de contacto sencillo, orientado a generar aproximadamente 1000 leads al año.

Reutilización inteligente del contenido existente

Se aprovechó el contenido ya publicado en WordPress (fichas, textos técnicos, referencias) donde aportaba valor, enlazándolo desde el nuevo frontal, en lugar de duplicar esfuerzos o perder posicionamiento.

Mi workflow

01

Analizar el WordPress legacy y el producto industrial

Partí de entender qué estaba haciendo WordPress (qué páginas seguían vivas, qué contenidos eran valiosos) y cómo se presentan y venden las estructuras, cubiertas y productos industriales de Okatent SL.

02

Definir la estrategia de captación de leads

Diseñé junto con el cliente el modelo de formularios: qué datos son realmente necesarios, cómo segmentar por tipo de producto o aplicación y qué mensajes debían acompañar cada formulario para motivar el contacto.

03

Diseñar el frontal mobile first

Con la estrategia clara, planteé un frontal pensado primero para móvil: jerarquía de bloques, menús, secciones destacadas por líneas de producto y llamadas a la acción visibles y “clickables” con el pulgar.

04

Desarrollar el PHP standalone y conectarlo con WordPress

Implementé el frontal en PHP standalone, consumiendo o enlazando contenido de WordPress donde era necesario, y dejando que el CMS siguiera sirviendo determinadas páginas antiguas y recursos.

05

Optimizar formularios y trazabilidad de leads

Trabajé los formularios para que fueran rápidos, claros y fáciles de completar en móvil, y configuré la lógica de envío y notificación para que cada lead llegara correctamente al equipo comercial.

06

Medir y ajustar para consolidar ~1000 leads/año

Una vez en marcha, se monitorizaron los envíos de formularios y se fueron ajustando textos, posiciones y detalles de UX para consolidar un volumen aproximado de 1000 leads al año.

Stack técnico

El proyecto se apoyó en un frontal PHP standalone, un WordPress running en background y una maquetación mobile first orientada a B2B y captación de leads.

  • PHP standalone para el frontal, con control total sobre plantillas y lógica
  • WordPress como motor de páginas legacy y gestor de contenidos técnicos
  • HTML5, CSS3 y Javascript con enfoque mobile first y responsive
  • Formularios personalizados con validación y envío orientado a equipo comercial
  • Integración básica con herramientas internas de gestión de leads (correo, CRM, etc.)
1000+ Leads al año a través de formularios de la web
PHP standalone Wordpress legacy Mobile first Okatent

Preguntas frecuentes

¿Por qué combinar un frontal PHP standalone con un WordPress en segundo plano?

El frontal PHP standalone permite diseñar y desarrollar sin las restricciones de un theme heredado, mientras que WordPress sigue siendo útil para mantener páginas antiguas y contenidos que ya están bien posicionados o que el equipo sabe editar. Es una forma de modernizar la experiencia sin tirar por la borda años de trabajo y contenido.

¿Qué significa que el desarrollo sea mobile first en este contexto?

Mobile first implica que el diseño y la maquetación del frontal se han pensado primero para móvil: estructuras simples, bloques claros, formularios fáciles de usar con el pulgar, tiempos de carga contenidos y navegación sin fricción. A partir de ahí, la experiencia se escala al escritorio, en lugar de hacer lo contrario.

¿Cómo se logró un volumen aproximado de 1000 leads al año?

El volumen de leads se alcanza combinando varias decisiones: formularios visibles y específicos, mensajes claros orientados a contacto, navegación que lleva de producto a formulario, y un cuidado especial en que el proceso sea rápido y comprensible en móvil. No se trata solo de tener formularios, sino de que la web entera empuje hacia ellos.

¿Qué tipo de información se recoge en los formularios?

Los formularios se centran en datos útiles para el equipo comercial: información básica de contacto, tipo de producto o solución de interés, contexto de uso (evento, industria, logística) y posibles detalles que ayuden a preparar una respuesta personalizada. Se evita pedir información irrelevante para no frenar la conversión.

¿Qué aporta este enfoque a una empresa industrial como Okatent SL?

Para una empresa industrial que fabrica productos en China y vende soluciones B2B, una web que genera leads de forma constante se convierte en un canal comercial más, no solo en un catálogo online. El frontal mobile first y los formularios bien pensados convierten visitas en oportunidades, lo que impacta directamente en la capacidad de cerrar proyectos.

¿Qué puede esperar el equipo tras este tipo de rediseño?

Tras el rediseño, el equipo puede esperar una plataforma más ordenada, más fácil de usar para los clientes y más eficaz en convertir interés en contacto real. Además, mantiene la capacidad de aprovechar el contenido y las páginas heredadas de WordPress, con una base técnica más moderna y orientada a resultados.