Viajero, aplicación para iOS y Android

La misma idea, un producto nuevo

Viajero parte de un concepto antiguo mío, Yourney: un marketplace de tours autoguiados creados por guías locales, con una parada gratis para probar, micro-precios y pago en un toque. Quería conservar el problema y las funcionalidades, pero no la app: nombre, marca, arquitectura y diseño son nuevos.

Las condiciones del encargo eran claras: iOS y Android, respetando las guías de cada plataforma, y bilingüe de verdad, en español e inglés, porque el viajero que llega a Madrid y el que sale desde Madrid necesitan lo mismo en idiomas distintos.

Lo trabajé entero en Figma y en el mismo orden que sigo con un cliente: primero el mercado y los usuarios, después la estructura y al final la interfaz.

Un nicho que crece, pero que hay que activar

Empecé dimensionando la oportunidad con datos de mercado. España recibe casi cien millones de turistas internacionales al año y la mayoría de las experiencias todavía se venden fuera del móvil. El tour autoguiado con app existe, pero aún es minoritario: lo ha probado uno de cada ocho viajeros.

La lectura para el producto es directa: si el formato todavía hay que descubrirlo, el precio y la prueba gratuita tienen que quitar todo el riesgo de probar. Y la confianza no la da una voz sintética, la da una persona: nueve de cada diez viajeros creen que un guía local es la mejor forma de conocer un sitio.

Once apps, y nadie en la esquina buena

Analicé seis competidores directos, de tours autoguiados y audioguías, y cinco indirectos: marketplaces con guía presente, free tours y descubrimiento de lugares. Leí sus fichas en App Store y Google Play y, sobre todo, las quejas de sus usuarios, que es donde está el diseño que falta.

El patrón se repite: lo barato es genérico —voz sintética, contenido generado por IA, listas de lugares— y lo auténtico es caro: un marketplace con guía cuesta de 15 a 60 € y VoiceMap, de 4 a 20 $ por tour.

Ocho decisiones que salen de las quejas

Cada decisión de diseño apunta a una queja concreta de los usuarios de la competencia o a un hueco de la matriz. Después se convirtieron en requisitos del MVP, priorizados con MoSCoW, y en hipótesis que medir.

Cuatro pestañas y cuatro recorridos

La app se ordena en cuatro destinos: Explorar, Mapa, Mis viajes y Perfil. En iOS es una Tab Bar y en Android una Navigation Bar de Material 3, con el mismo orden para que un usuario que cambie de móvil no tenga que volver a aprender nada. El onboarding y el modo guía son flujos transversales.

Dibujé cuatro recorridos con sus ramas: descubrir, probar y comprar; hacer el tour sin conexión; cambiar el idioma; y, para la fase 2, el guía que crea un tour. Los dos primeros son los que se prueban en el prototipo navegable.

Primero la jerarquía, después el color

Doce wireframes de baja fidelidad cubren el flujo completo, del onboarding con el selector de idioma a la valoración del tour. En gris y sin marca, para discutir qué hay en cada pantalla y en qué orden.

Aquí se decidieron las cosas importantes: que la parada gratis termine con el desbloqueo a la vista, que el pago sea una hoja nativa encima de la ficha y que el reproductor ponga el vídeo arriba y el «Siguiente parada» siempre al alcance del pulgar.

Un pin, un play y cuatro colores

El logo es un pin de ubicación con un botón de play recortado: el lugar y el vídeo del guía en un solo gesto. En el icono de la app, una ruta punteada recuerda las paradas del tour. El logotipo usa Fraunces, una serifa editorial y cálida, en minúsculas.

La paleta es corta a propósito: navy para el texto y la estructura, burdeos para lo accionable, azul acero para el acento y la información, y crema como fondo, porque el blanco puro compite con las fotos de la ciudad. El blanco sobre burdeos cumple el contraste AA.

La ciudad delante, la interfaz detrás

Las fotografías de Madrid y los retratos de las personas están generados con IA en Higgsfield, con la misma luz de tarde para que todo parezca de una sola marca. Los mapas son reales: planos de OpenStreetMap con la ruta del tour, los pines de cada parada y su atribución.

La ficha del tour responde en una pantalla a las tres dudas del journey map: quién es el guía, qué incluye exactamente y si merece la pena. Por eso lleva la valoración desglosada en historias, ruta y vídeo, y el botón «Probar gratis» al lado del de comprar.

Un clic cambia el idioma de la pantalla entera

Todos los textos de la interfaz son variables de Figma con dos modos. Cambiar el modo de un frame de Español a English traduce la pantalla completa, y cada variable lleva su nombre de código para iOS (L10n) y Android (R.string), listo para desarrollo.

Diseñé con el texto más largo, el español, que ocupa en torno a un 25 % más. Los formatos también se localizan —1,99 € frente a €1.99, 2,4 km frente a 2.4 km— y el idioma de la app es independiente del de los tours: se puede usar Viajero en español y hacer un tour en inglés.

Las 13 pantallas existen en iPhone, siguiendo las Human Interface Guidelines, y en Android con Material 3: navigation bar con indicador en píldora, top app bar, bottom sheets, Google Pay y objetivos táctiles de 48 dp.

Los dos flujos clave, de principio a fin

El prototipo de Figma conecta las 52 pantallas con 164 enlaces y cuatro puntos de partida: iOS y Android, en español y en inglés. Las pantallas largas hacen scroll con la barra de navegación fija, y los carruseles y los filtros se desplazan en horizontal, como en la app real.

El vídeo recorre el flujo que más importa: explorar, abrir un tour, probar la parada gratis, pagar con Apple Pay, encontrarlo descargado en Mis viajes y hacerlo parada a parada, hasta la valoración final.

Una app, dos plataformas nativas

Los mockups usan las pantallas reales de Figma dentro de un iPhone y de un Pixel, de modo que lo que se ve es el diseño exacto y se actualiza si cambia.

Seis hipótesis listas para medir

Viajero es un concepto: no tiene usuarios, y por eso no pongo aquí cifras de conversión que no he medido. Lo que sí tiene es cada decisión conectada a una queja real o a un hueco del mercado, y seis hipótesis escritas con su métrica para comprobarlas.

El siguiente paso es un test de usabilidad con cinco o seis viajeros —la mitad hispanohablantes y la mitad angloparlantes— sobre el prototipo, y tres guías que publiquen un tour de prueba. Después, iterar y abrir la fase 2: la app del guía.