En este proyecto

UX/UI · Sistema UI

Campaments i Més

Dar claridad a un proceso de reserva complejo.

Quien organiza una acampada necesita encontrar un terreno y saber cómo avanzar hasta cerrar la estancia. A partir de los wireframes del cliente, definí las conexiones entre pantallas y diseñé los pasos y estados que faltaban para orientar al usuario entre condiciones y validaciones.

Equipo
K·Factor
Cliente final
Campaments i Més
Colaboración
Aura · desarrollo
Año
2026
Lectura
7 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
Guiar al usuario desde la búsqueda de un terreno hasta el cierre de la estancia, en un proceso con distintas condiciones, validaciones y pagos.
Mi papel
Responsable del diseño UX/UI dentro del equipo de K·Factor, en colaboración con desarrollo.
Decisión clave
Conectar las pantallas y definir qué información y acciones necesita el usuario en cada etapa, incluidas las esperas y los errores.
Resultado
Pantallas para escritorio y móvil, con los recorridos, estados y componentes preparados en Figma.

Contexto y alcance

Los wireframes no resolvían todo el recorrido

Campaments i Més ofrece terrenos de acampada a entidades de ocio infantil y juvenil. Además de encontrar un espacio, tenían que registrarse, solicitar la estancia y completar los pagos, permisos 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

Empezar fácil. Concretar después.

Quería que buscar un terreno fuera la primera acción en la home. El buscador reúne fechas, plazas, zona y terreno o población. Los filtros más detallados llegan después.

También diseñé cómo elegir fechas concretas o flexibles, indicar participantes y encontrar un terreno por su nombre. Para móvil preparé dos variantes: una entrada compacta y un formulario vertical.

El buscador principal y algunos de sus paneles. A la izquierda, las dos variantes para móvil.

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.

La decisión de diseño fue resolver qué hacer ante una coincidencia y guiar al usuario antes de crear 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 checkout

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.

Consultar el terreno y pasar a la solicitud sin repetir lo elegido.

Estados y seguimiento

La espera también necesita un estado

Al revisar el recorrido, detecté que faltaba un paso entre enviar la solicitud y poder pagar. Añadí «solicitud recibida, pendiente de validación»: la petición había llegado, pero la reserva aún no estaba confirmada.

Los pasos terminados siguen visibles junto al actual y los pendientes. Tras la confirmación, un aviso recuerda que hay que contactar con el propietario para concertar la visita previa. Sus datos ya están disponibles.

El estado que faltaba entre enviar la solicitud y recibir su validación.

Iteración del área privada

Cerrar la estancia también es un flujo

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.

Sistema UI 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. También definí qué muestran los formularios al escribir, elegir una opción o corregir un error.

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

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

El valor de decidir juntos

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.

Más trabajo

Explorar los proyectos

Volver a la selección

Imagen ampliada