Contenido del caso
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
