← Todos los proyectos

Librería · e-commerce

BOOKVA

Una tienda con un recorrido de compra conectado: catálogo, búsqueda, ficha de producto, carrito, compra y cuenta de cliente.

arquitectura, UX/UI, sistema visual, desarrollo, configuración, pruebas y lanzamientoWordPress · catálogo y búsqueda · carrito y pedido · área de cliente
Ver la web ↗
Web de BOOKVA, primera pantalla
Web de BOOKVA, primera pantalla

Contexto

Construir una tienda donde una gran selección de libros nunca se convierta en una búsqueda complicada. El cliente debe orientarse rápido entre las categorías, comparar ofertas y llegar al pedido, con páginas de servicio que acompañen ese camino.

El reto

Unir el ambiente de una librería con una estructura comercial práctica. La portada presenta la oferta, mientras que el catálogo, la ficha de producto y el carrito dan la información suficiente para el siguiente paso.

Qué hicimos

  1. El catálogo como columna vertebral

    Diseñamos las categorías, la navegación y la búsqueda. Un mismo recorrido une la portada, el catálogo y la página del libro, para que el escaparate nunca se separe de la compra.

  2. Plantillas reutilizables

    Portada, catálogo y fichas de producto comparten una interfaz coherente. El libro, su descripción y las acciones mantienen una jerarquía clara de una sección a otra.

  3. Pedido y servicios

    El trabajo incluyó carrito, pago, área de cliente, páginas de servicio y peticiones especiales de libros, como complemento al recorrido habitual por el catálogo.

  4. Tipografía con dos funciones

    Las fuentes editoriales dan a la tienda su carácter de librería, y un texto neutro se ocupa de la navegación y la información de producto. El hero actual usa una composición propia y expresiva.

Qué desarrollamos

  1. Arquitectura de la tienda

    Ordenamos libros en muchos idiomas y productos de Europa en un catálogo claro, y definimos categorías, navegación, búsqueda y accesos para encontrar un libro, ofertas y pedidos especiales.

  2. Diseño y desarrollo

    Diseñamos el UX/UI y el sistema visual, la portada, el catálogo y las plantillas de producto, y desarrollamos páginas responsive que conectan la forma de mostrar el catálogo con lo que hace el cliente a continuación.

  3. Recorridos de compra y servicio

    Conectamos búsqueda, ficha de producto, carrito y pago, y añadimos el área de cliente, páginas de servicio, peticiones de búsqueda de libros y puntos de contacto.

  4. Configuración, pruebas y lanzamiento

    Configuramos la tienda, probamos todo el recorrido de compra y las páginas responsive, y la lanzamos. El resultado es un e-commerce en funcionamiento, no una colección de maquetas.

Sistema visual

La tienda combina su turquesa principal con un acento amarillo sobre superficies blancas. Conviene distinguir el sistema del catálogo y la primera pantalla renovada: la web publicada usa familias tipográficas distintas para cada uno.

Principal#398F93
Acento#FBBC34
Títulos#242424
Texto#767676
Superficie#FFFFFF
Playfair Display · títulos de la tienda

Stories worth keeping.

Lora · nombres de producto

Find your next book.

Texto de la tienda
Roboto 400 · 16 px
Títulos / títulos de libros
Playfair Display 400 / Lora 400
Títulos de sección
42 px → 36 px por debajo de 1024 → 24 px por debajo de 768
Etiquetas decorativas
Italianno 400 · 36 / 22 / 18 px
Hero actual
Caveat 600: 64 / 56 px; Libre Baskerville 700: 36 / 22 px
Texto del hero
Inter 400 · 18 / 16 px
Contenedor de la tienda
Máximo 1222 px
Radios de esquina
Tarjetas 10 px; botones y campos 35 px

Recorridos y material

Portada y selecciones → categoría o búsqueda → ficha del libro → carrito → pago. Las peticiones poco habituales tienen su propio recorrido de servicio, y el área de cliente conecta a cada comprador con sus pedidos.

Catálogo: la retícula de productos y la navegación facilitan elegir un libro.
Catálogo: la retícula de productos y la navegación facilitan elegir un libro.

Promoción

Optimizamos la web para buscadores, configuramos las cuentas de Yandex Direct y Google Ads y pusimos en marcha la publicidad y la promoción en buscadores.

El resultado

BOOKVA cuenta con una tienda online llave en mano y ya lanzada. Catálogo, búsqueda, fichas de producto, carrito y pago forman un solo recorrido, desde descubrir el catálogo hasta hacer el pedido. El área de cliente y las páginas de servicio completan la compra; arquitectura, diseño, desarrollo, configuración y lanzamiento formaron parte de un mismo proyecto.

Herramientas y desarrollo

WordPress · WooCommerce · Elementor Pro · tema Woodmart · PHP · JavaScript / jQuery · FlyingPress · Google Site Kit · Yandex Metrica con seguimiento de e-commerce