Diseñé una app para reservar campings que sirve para ver qué parcelas se encuentran libres, guardar la reserva para verla sin señal y asegurar el lugar con una seña.
Empresa
GoCamp · proyecto conceptual, en desarrollo
Duración
2 semanas
Rol
UX/UI Designer, proyecto individual
Proyecto
Resumen del proyecto
GoCamp es una app para reservar parcelas de camping desde el celular. Se elige el camping, las fechas y las personas, se ve un plano con las parcelas libres, se paga una seña para asegurar el lugar y la reserva queda guardada para verla aunque no haya señal. Diseñé el flujo completo en Figma, con un panel para que el camping actualice su disponibilidad.
El desafío
En un camping la señal es escasa y la información suele estar desactualizada: no se sabe si hay lugar, qué parcela conviene ni si la reserva está asegurada. El problema salió de algo que vivimos todos los años con mi familia y mi pareja cuando viajamos al sur: llegamos a un pueblo sin saber si vamos a tener dónde dormir, y más en temporada alta. Sin disponibilidad ni señal para buscar en pueblos cercanos, a veces terminamos pagando más de lo que esperábamos. Como viajamos hace varios años y conocemos a otra gente, sabemos que a todos les pasó alguna vez.
Mi rol y herramientas
Investigación, UX, UI y prototipado, todo de punta a punta. Herramientas: Figma, con un sistema de diseño propio (variables, estilos de texto y componentes), y Framer para este portfolio. IA como apoyo, detallada en "Cómo usé IA".
Entender el problema
Lo que ya sé del proyecto
Es un proyecto conceptual y todavía en desarrollo.
Lo diseñé de punta a punta: búsqueda, fechas y personas, elección de parcela en un plano ilustrado, datos, pago de la seña y pago del resto.
Lo probé con 2 usuarios y, según sus comentarios, rehice el mapa, el pago y la navegación.
Diseñé reservas que funcionan sin conexión y un panel para que el camping actualice su disponibilidad desde el celular.
Armé un sistema de diseño propio en Figma con variables, estilos de texto, componentes reutilizables e íconos de baños.
Cómo trabajé con IA y el nombre
Proceso, en el orden en que lo trabajé
Detecté el problema.
Con la IA, le conté todo lo que tenía pensado: tipografías, referencias de color y cómo quería cada componente, con ejemplos de la interfaz que imaginaba.
En base a eso armamos el UI Kit; la IA me dio opciones y yo las evalué.
Armamos el logo, también con varias opciones.
Antes de armar las pantallas hicimos el storyboard y el user flow. En base a eso diseñamos las pantallas directamente en alta fidelidad y armamos el prototipo. Hoy el proyecto está en desarrollo y perfeccionamiento: faltan pruebas con más usuarios.
Cómo elegí el nombre
Estuve entre GoCamp y CampSpot. Como la app es para personas de todas las edades, de jóvenes a mayores, elegí un nombre fácil de decir y fácil de recordar.
Cinco decisiones
a) Un plano de parcelas que se entiende de un vistazo
Problema: elegir parcela sin ver el terreno es adivinar.
Decisión: un plano ilustrado con sectores (pinos, lago), la entrada y íconos de baños, fogón y agua. Al tocar una parcela se ve qué tiene cerca, por ejemplo: "Parcela 8 · a 25 m de los baños · a 40 m del lago · con sombra de pinos · plana". Los estados (libre, tu elección, ocupada, en el lugar) se distinguen por símbolo y no solo por color.
Evidencia: Guido dijo que el mapa era poco claro: debería ser más gráfico y mostrar qué hay cerca de cada parcela para decidir si la quiere. Con eso rehíce el mapa con referencias cercanas y, en el panel del camping, sumé subir una foto o croquis, o que GoCamp lo dibuje. Sigue pendiente mejorar sus gráficos.
b) Una seña obligatoria y el resto al llegar
Problema: un camping necesita saber que la persona va a ir, y quien reserva necesita que su parcela quede asegurada.
Decisión: se paga una seña de hoy ($20.000 de $100.000, en el ejemplo) con Mercado Pago o tarjeta, y el resto se elige después: efectivo al llegar con descuento ($72.000), transferencia o tarjeta ($80.000). Una línea explica por qué la seña es obligatoria.
Evidencia: Guido dijo que la seña debe ser obligatoria, porque si no los campings no guardan lugar, y que el resto se elija después de pagarla; también propuso separar los datos personales del pago. Lorena pidió poder pagar la seña con tarjeta de crédito o débito. Quedaron tres pantallas: Tus datos, Pagar la seña y ¿Cómo pagas el resto?
c) Una reserva que se ve sin señal
Problema: viajando de pueblo en pueblo, muchas veces en la ruta no hay señal ni para ver el mapa o cargar los datos que se necesitan, y a veces se olvidó guardarlos. También falla en el camping, justo cuando hay que mostrar el código de reserva.
Decisión: la reserva y los campings consultados quedan guardados en el celular. Sin conexión, la app avisa "Sin señal · te mostramos lo último que guardamos" y cada dato muestra cuándo se actualizó ("Dato de hoy 09:15 · hace 6 h"), con el consejo de revisar la fecha antes de ir.
Evidencia: Guido pidió que Mis reservas se vea sin conexión, con número de parcela y una dirección o mapa, porque es común quedarse sin señal. Quedó en la pantalla Reserva sin conexión. Falta probarlo en un lugar realmente sin señal.
d) Tuve en cuenta la accesibilidad
Problema: quien viaja con silla de ruedas, andador o poco recorrido necesita saber antes de reservar si la parcela le sirve.
Decisión: al elegir fechas hay dos opciones de accesibilidad: "Baño accesible cerca" (parcelas a menos de 30 m de un baño accesible) y "Parcela plana y cerca del acceso". En el plano, el baño accesible tiene símbolo propio, los estados no dependen solo del color y usé botones grandes para que sea fácil tocarlos
Evidencia: Lorena no encontraba dónde indicar niños, adultos o perros, y de ahí surgió sumar accesibilidad: parcelas cerca de baños para adultos mayores o personas con discapacidad. Todavía no se probó con alguien que use silla de ruedas o andador.
e) Un panel para que el camping actualice su disponibilidad
Problema: si el camping no actualiza, la app muestra datos viejos y se pierde la confianza.
Decisión: un panel que pregunta "¿Cuántas parcelas hay libres hoy?", deja repartirlas entre "reservables desde la app" y "solo en el lugar", y permite subir el croquis del camping. Si no tiene mapa, GoCamp lo dibuja con cada parcela numerada.
Evidencia: todavía sin validar: no se vio con alguien de un camping real, por eso sigue en proceso.
Sistema de diseño
Sistema de diseño: variables de color, estilos de texto y componentes reutilizables, para que las 20 pantallas se vean coherentes. Los colores (bosque, musgo, terracota y arena) remiten al sur argentino y a la vida de camping. La interfaz y cada botón se pensaron con un enfoque de diseño inclusivo, para que los entiendan también las personas mayores y cualquier otra persona, sin dar nada por sabido. Los datos de las pantallas (campings, precios, código de reserva) son de ejemplo para el caso de estudio.
Inconvenientes que aparecieron y cómo los resolví
Estos fueron los inconvenientes que aparecieron al probar el prototipo con Guido y Lorena, y cómo los resolví:
Lo que mostraron las pruebas
Con dos personas no hay números que mostrar, pero sí qué aprendí, y eso es lo que le da valor al caso
Resultados
Diseñé el recorrido completo, de la búsqueda al pago del resto, más el modo sin señal y un panel para el camping. Probé el prototipo con 2 usuarios y, a partir de lo que dijeron, cambié el mapa, el pago y la navegación.
Usuarios que probaron el prototipo
Pantallas diseñadas en Figma
Aprendizajes, próximos pasos y uso de IA
Límites honestos
Es un proyecto en desarrollo y conceptual: no hay un camping real detrás.
Los datos de las pantallas (campings, precios, código de reserva, disponibilidad) son de ejemplo.
Solo 2 personas probaron el prototipo, y falta probar el pago real, el modo sin señal en un lugar sin conexión y el panel con un camping.
La accesibilidad surgió de una sugerencia durante las pruebas. Todavía no se probó con personas que la necesiten, como quienes usan silla de ruedas o andador.
Próximos pasos
Entrevistar a gente que reserva campings y a dueños de camping, para validar el problema y el panel.
Probar el modo sin señal y el pago de la seña con más personas.
Probar los filtros de accesibilidad con personas que los necesiten.
Mejorar los gráficos del mapa del camping, con más opciones inspiradas en referencias de Pinterest.
Cómo usé IA
En GoCamp incorporé la IA en más etapas del proceso que en Cinyx para agilizar el trabajo. En cada una evalué lo que me devolvía y no me quedé con la primera opción. Claude me ayudó a armar el UI Kit y el sistema de diseño a partir de las referencias que le mandé (tipografías, colores y cómo quería cada componente), a crear el logo con varias opciones y a diseñar en alta fidelidad las pantallas del prototipo. Yo marqué los errores y las modificaciones que había que hacer, probé el prototipo junto con Guido y verifiqué las mejoras. Decidí yo: el problema, los criterios del nombre, qué corregir y qué mejoras quedaron después de probar. En este proyecto usé solo Claude como herramienta de IA.
Cierre
GoCamp sigue en desarrollo. Lo que está probado es el recorrido completo con dos personas. Falta probarlo con quienes más lo necesitan: quienes viajan sin señal, quienes usan silla de ruedas o andador y los dueños de camping.
