Contenido del caso
Volver a proyectos

UX/UI · Sistema UI

Campaments i Més

Un buscador de terrenos y reservas adaptadas a cada entidad.

Campaments i Més permite buscar, comparar y solicitar terrenos para entidades de ocio infantil y juvenil. El recorrido cambia según el tipo de entidad, las fechas y las condiciones del terreno, e incluye altas, validaciones, pagos y cierre de estancia. A partir de los wireframes del cliente, trabajé el buscador, completé los flujos y diseñé las pantallas y sus componentes en colaboración con desarrollo.

Equipo
K·Factor
Cliente final
Campaments i Més
Colaboración
Aura · desarrollo
Año
2026
Lectura
9 min
La búsqueda empieza en la home y continúa hasta el cierre de la estancia. Pantallas con textos provisionales.

El proyecto de un vistazo

Desafío
Facilitar la búsqueda y comparación de terrenos para entidades de ocio infantil y juvenil, y orientar a cada una en su alta y reserva. El recorrido debía contemplar distintos tipos de entidad, condiciones del terreno, validaciones y pagos.
Mi papel
Dentro del equipo de K·Factor, completé los recorridos a partir de los wireframes del cliente. Trabajé las pantallas, la identidad visual de la interfaz y la biblioteca de componentes y estados, en colaboración con desarrollo.
Decisión clave
Mostrar los pasos completados, el estado actual y lo que ocurrirá después, diferenciando las acciones del usuario de las validaciones del equipo. Dejar claro que enviar una solicitud no confirma la reserva.
Resultado
Entrega en Figma de los recorridos y las pantallas de escritorio y móvil, con componentes e indicaciones para solicitudes, validaciones, pagos y cierre de estancia.

Contexto y alcance

Los wireframes no resolvían todo el recorrido

La plataforma conecta la búsqueda y comparación de terrenos de acampada con la gestión de reservas. El alta cambia para las agrupaciones de MEG, otras organizaciones y las entidades externas. Las fechas, el tipo de entidad y las condiciones del terreno también afectan al precio. Había que conectar esas variantes con las solicitudes, validaciones, permisos, pagos y el cálculo final del coste.

Revisé las transiciones entre pantallas y resolví los pasos que faltaban. En cada etapa definí qué información mostrar, qué podía hacer el usuario y cómo explicarle el siguiente paso, según su entidad y el estado de la reserva.

Arquitectura de la información

Cómo se conecta toda la web

Había que unir la búsqueda, los favoritos y el comparador con la ficha del terreno. Después venían el registro, la solicitud y el área privada. La información sobre la organización y la ayuda también tenían su lugar.

Fuimos ajustando la estructura y los recorridos según las necesidades que surgían al revisar la búsqueda, la reserva y el alta.

Buscar, guardar y comparar conducen a la ficha del terreno antes de solicitar la estancia.

Diseño de interacción

Un buscador para empezar con lo esencial

El buscador era el elemento principal de la home. Reuní fechas, plazas, zona y terreno o población para empezar la búsqueda; reservé los filtros más detallados para los resultados.

Preparé paneles para elegir fechas concretas o flexibles, indicar participantes y encontrar un terreno por su nombre. Para móvil, una entrada compacta abre el formulario. También exploré la selección por zonas y comarcas, con un mapa de apoyo en escritorio.

En los resultados, los filtros permiten concretar capacidad, uso compartido o exclusivo, servicios y accesos. El número de terrenos ayuda a valorar la selección antes de aplicarla; un aviso explica cuándo se cobra un mínimo de participantes.

Buscador de entrada y propuestas de paneles para fechas, plazas y sugerencias.
Propuesta de interacción: elegir comarcas dentro de una zona, en escritorio y móvil.
Filtros detallados: condiciones del terreno, mínimo facturable y número de resultados.

Favoritos y comparación

Afinar y comparar para decidir

Al entrar desde una categoría de la home, la búsqueda conserva ese filtro. Los favoritos permiten guardar terrenos y verlos en lista o mapa. El comparador coloca hasta cinco opciones juntas para revisar sus diferencias.

La vista de favoritos reúne las tarjetas y su ubicación. El mapa de esta pantalla es contenido de muestra.
El comparador permite revisar precio, plazas, calendario y servicios de hasta cinco terrenos.

Flujo de reserva

Qué pasa después de solicitar un terreno

Enviar la solicitud no confirma la reserva. Primero, la central la revisa; después se paga el anticipo y se comprueba el justificante. Tenía que quedar claro cuándo actuar y cuándo esperar.

El flujo muestra esos pasos y lo que ocurre al terminar la estancia: confirmar los asistentes reales y revisar el coste final.

La solicitud, el anticipo y la revisión del pago alternan acciones del usuario y momentos de espera.

Flujo de alta

El alta cambia según la entidad

Una agrupación de MEG se busca en la lista; otras organizaciones necesitan encontrar su entidad o darla de alta. Las entidades externas reciben el acceso después de una revisión.

El NIF permite comprobar si la entidad ya está registrada. Si coincide, se muestran las entidades encontradas para elegir la correcta o indicar que ninguna corresponde. Antes de crear una nueva, se pide revisar el nombre para evitar duplicados por errores al escribirlo.

El objetivo era orientar al usuario ante una coincidencia, antes de que creara otra entidad.

Ante una coincidencia de NIF, el usuario puede elegir una entidad existente o revisar los datos antes de crear otra.

Ficha del terreno y solicitud

Solicitar no es confirmar la reserva

La ficha reúne fotos, servicios, ubicación, disponibilidad y condiciones. Al solicitar el terreno, las fechas y los participantes se conservan, incluso si hay que iniciar sesión.

Quien hace la solicitud y quien será responsable de la estancia pueden ser personas distintas. Separé sus datos y aclaré el siguiente paso: la petición se revisa antes de pagar.

Formulario completo: datos de la reserva, solicitante, responsable y envío. Datos personales de ejemplo.

Estados y seguimiento

Gestionar las reservas y saber qué toca hacer

El área privada separa las reservas activas del histórico y señala las tareas pendientes. Al revisar cada reserva, detecté que faltaba un estado entre enviar la solicitud y poder pagar. Añadí «solicitud recibida, pendiente de validación»: la petición había llegado, pero aún no estaba confirmada.

Incorporamos un seguimiento por pasos: los completados siguen visibles, el actual se destaca en verde y los pendientes explican lo que ocurrirá después. El objetivo era reducir la incertidumbre durante las esperas y que el usuario supiera dónde estaba, qué debía hacer y qué dependía de la revisión del equipo.

El recorrido contempla cargar el justificante y esperar su revisión. Tras la confirmación se habilitan la documentación y el contacto del propietario; un aviso recuerda que hay que concertar la visita previa.

Reservas activas, tareas pendientes e histórico. Referencias, terrenos y fechas de ejemplo.
El paso actual se destaca en verde; los siguientes anticipan qué ocurrirá y cuándo deberá actuar el usuario.

Iteración del área privada

Confirmar los asistentes y revisar el coste en la misma vista

La tabla de asistentes quedaba al final de la página y la encuesta interrumpía la liquidación. Reuní la tabla y el cierre de estancia en la misma vista, con un aviso para confirmar los asistentes.

Añadí el coste orientativo justo después de la tabla, para consultarlo antes de confirmar. La encuesta pasó después de la liquidación y antes del contacto. Así, las tareas para cerrar la estancia quedaban juntas.

Asistentes y coste orientativo juntos. La encuesta aparece después de la liquidación.

Reglas de precio y componentes

Explicar de dónde sale el precio

El precio cambia según la entidad, las fechas y el mínimo de personas que cobra el terreno. Preparé las variantes del resumen para explicar cada cálculo y separar el total del anticipo.

Por ejemplo, si van 8 personas y se cobra un mínimo de 10, hay que explicar ese precio sin cambiar los 8 asistentes reales. Cada variante conserva el desglose para que el usuario pueda revisar cómo se ha calculado el importe.

El mínimo facturable se distingue de los asistentes reales. A su lado, variantes con varias tarifas y precio especial.

Identidad y sistema UI

Una biblioteca de componentes para todo el recorrido

Trabajé el color, la tipografía, los iconos y los componentes para dar coherencia a la interfaz. El verde identifica acciones y selecciones; el amarillo señala avisos. El acento de los contadores se distingue del rojo reservado a los errores.

Preparé botones, tarjetas, campos, selectores y sus estados. Por ejemplo, un formulario distingue el campo activo del desactivado y explica qué corregir cuando hay un error. Documenté estas reglas en Figma para aplicarlas a la búsqueda, el alta, la solicitud y el área privada.

Decisiones de diseño

Trade-offs: decisiones y renuncias

  • Un aviso de temporada por delante de la composición visual. El aviso amarillo de la home se activa en determinadas temporadas y contiene información que el usuario no debe pasar por alto. Decidimos darle protagonismo cuando está activo, aunque altere el equilibrio visual de la página. Su importancia justificaba esa prioridad.
  • Una búsqueda inicial breve, con el detalle en un segundo paso. Dejé en la home los criterios principales y reservé los filtros detallados para los resultados. La entrada reúne menos opciones, a cambio de que quien necesite afinar la búsqueda tenga que hacerlo después.
  • Cerrar la estancia antes de pedir una valoración. Moví la encuesta después de la liquidación para mantener juntas la confirmación de asistentes y la revisión del coste. La encuesta pierde prioridad en la página, pero deja de interrumpir esas tareas.

Diseño, desarrollo y cliente

Revisar las propuestas juntos

Proponía el recorrido y el diseño y los revisaba con Aura, de desarrollo. Después los presentábamos en la reunión semanal con Campaments i Més y ajustaba las pantallas y los componentes según lo acordado.

La hoja de seguimiento recogía los cambios y pendientes. Por ejemplo, acordamos dejar visible el desglose de precios. Yo diseñaba cómo mostrarlo; desarrollo se encargaba del cálculo.

Entregué en Figma las pantallas de escritorio y móvil, los componentes y las indicaciones de comportamiento: el recorrido principal, las esperas, los errores y las condiciones que podían cambiarlo.

Aprendizaje

Contrastar las decisiones con desarrollo y el cliente

Este proyecto me hizo ver el valor de las reuniones semanales para contrastar propuestas con desarrollo y las personas del cliente implicadas, compartir dudas y acordar las decisiones del proyecto.

Imagen ampliada