App de rutes de viatge amb
mapes offline i geolocalització
Vam transformar un servei web de guies de viatge en apps natives iOS i Android amb mapes descarregables, experiència 100% offline i geolocalització de tots els punts d'interès. Sense connexió, sense roaming, sense perdre's.
Client
Way Away
Any
2015 – 2017
Serveis
Estratègia, UX/UI, App iOS & Android
Plataformes
iOS · Android · Tablet
01 — El Repte
Una guia de viatge que funciona al món real
Way Away havia construït un servei web reconegut a Espanya: rutes de viatge curades al detall, amb itineraris dia per dia, recomanacions de transport, hotels i restaurants per a desenes de destinacions de tot el món. El producte web funcionava bé. El problema era que els viatgers l'usaven a casa per planificar, però l'abandonaven en el moment en què més el necessitaven: durant el propi viatge.
El repte era transformar aquell contingut estructurat en una experiència mòbil que funcionés sense connexió a internet. Un viatger a Tòquio, a l'Amazònia o en una ciutat sense cobertura no pot dependre de dades mòbils per consultar el seu itinerari. L'app havia de ser tan útil al metro de Xangai en mode avió com a casa amb WiFi.
El punt tècnic més crític del projecte era trobar i implementar la solució de mapes adequada: un proveïdor que permetés descarregar el mapa de cada destinació per a ús offline i sobre el qual poguéssim geolocalitzar tots els recursos del contingut de Way Away —visites, restaurants, hotels i punts de transport— amb un sistema de colors que permetés distingir-los d'una ullada.
02 — La nostra Solució
La guia de viatge perfecta, sempre a la butxaca
Vam dissenyar i desenvolupar les apps natives per a iOS i Android partint d'un principi clar: el contingut de Way Away era excel·lent i no calia reinventar-lo, sinó portar-lo al mòbil de la forma més natural possible. L'arquitectura de contingut del CMS web —destinacions, rutes, dies, i les quatre pestanyes de Ruta / Transport / Hotel / Activitat— es va traduir directament a una jerarquia de navegació mòbil intuïtiva.
La sincronització amb el compte web va ser un altre eix central: un viatger que compra una ruta a la web la té disponible a l'app i viceversa. La primera descàrrega del contingut (amb el mapa offline inclòs) es fa amb WiFi; a partir d'aquí, l'app funciona completament sense connexió.
Mapes offline per destinació
Cada destinació inclou el seu mapa descarregable complet. El sistema verifica l'espai disponible abans de la descàrrega i l'actualitza si el contingut ha canviat.
Geolocalització de POIs
Tots els punts d'interès —visites, restaurants, hotels i transport— apareixen al mapa amb codi de colors. En prémer qualsevol recurs s'obre el mapa centrat en aquell punt.
Rutes estructurades dia per dia
Navegació per dies amb les pestanyes Ruta, Transport, Hotel i Activitat. Només es mostren les pestanyes amb contingut. Fotos a amplada completa amb zoom tàctil.
Sincronització web ↔ app
Mateix usuari a web i app. Les rutes comprades en qualsevol dels dos canals estan disponibles en tots dos. Actualització de contingut on-demand.
Compra integrada a l'app
In-app purchase natiu (App Store / Google Play) per comprar noves rutes directament des de l'app sense sortir de l'experiència.
Versió optimitzada per a tablet
En tablet, el menú de dies i pestanyes roman visible a l'esquerra com a columna persistent, aprofitant l'espai extra per a una lectura més còmoda.
03 — Procés
Del contingut web a l'experiència de viatge
Discovery & Arquitectura
Anàlisi del CMS web, mapatge de l'estructura de contingut, recerca i selecció del proveïdor de mapes offline, i definició de l'arquitectura de l'app.
UX/UI & Prototipatge
Disseny de la jerarquia de navegació, fluxos de descàrrega offline, interaccions amb el mapa i adaptació específica per a smartphone i tablet.
Desenvolupament & QA
Desenvolupament paral·lel iOS i Android, integració de mapes offline, geolocalització, in-app purchases, sincronització amb el CMS web i proves exhaustives de l'experiència offline.
Llançament & Evolució
Publicació a App Store i Google Play, optimització de l'experiència a partir de dades d'ús i desenvolupament de noves funcionalitats com gestió de tasques i comentaris personals.
04 — El Producte en Detall
Pensat per al viatger real, no per a l'usuari amb WiFi
El mapa que viatja amb tu, sense gastar un byte de dades.
Abans de sortir de viatge, l'usuari descarrega el mapa complet de la destinació amb un sol tap. A partir d'aquell moment, el mapa funciona amb total independència de la connexió: navegació, zoom, cerca de punts d'interès i geolocalització en temps real de l'usuari, tot offline.
Vam avaluar i comparar diversos proveïdors de mapes abans de seleccionar la solució més adequada per als requisits del projecte: capacitat de descàrrega offline per zona geogràfica, qualitat cartogràfica, possibilitat d'afegir capes de POIs personalitzats i rendiment en dispositius de gamma mitjana.
Dia 3 · Dilluns 14 oct
Kyoto: temples i geishas
Comença el dia al barri de Gion abans que arribin els turistes. A les 7h els carrers d'empedrat i les machiya encara estan en silenci...
Santuari Fushimi Inari
Veure punt al mapa →
Nishiki Market · Dinar
Veure punt al mapa →
Cada dia del viatge, perfectament organitzat.
L'estructura de navegació replica la lògica que els usuaris ja coneixien de la web: cada ruta està dividida per dies, i dins de cada dia apareixen només les pestanyes que tenen contingut (Ruta, Transport, Hotel, Activitat). Si un dia només té informació de ruta, es mostra directament sense menú de pestanyes.
Cada recurs —visita, restaurant, hotel— inclou fotografies a amplada completa amb zoom tàctil, la seva descripció detallada i el botó per localitzar-lo al mapa. L'usuari pot marcar recursos com visitats i afegir notes personals que se sincronitzen amb el seu compte.
Descobreix destinacions, compra el que vulguis, viatja quan puguis.
L'app mostra tot el catàleg de destinacions disponibles organitzat per àrees geogràfiques. Cada destinació pot tenir diverses rutes en funció dels dies disponibles (una ruta de 7 dies, una altra de 10, una altra de 14...), cosa que permet al viatger adaptar la guia al seu temps real.
La compra es fa de forma nativa mitjançant in-app purchase, integrat amb App Store i Google Play. Si l'usuari ja té la ruta comprada a la web, apareix disponible automàticament a l'app sense necessitat de tornar a pagar.
Portafoli global de destinacions
Àsia, Europa, Amèrica, Oceania i Àfrica organitzats per àrees. Rutes de cultura, aventura, gastronomia, natura, platges i grans ciutats.
Rutes per nombre de dies
Cada destinació ofereix diverses opcions segons els dies disponibles. L'usuari tria la ruta que s'adapta a la seva agenda real.
Informació pràctica de la destinació
Cada destinació inclou secció d'informació pràctica: visats, salut, moneda, endolls, recomanacions de seguretat i consells locals.
Notificacions push
Sistema de notificacions per informar de noves destinacions, actualitzacions de rutes i contingut rellevant segons les destinacions de l'usuari.
05 — Stack Tecnològic
Tecnologies utilitzades
Stack seleccionat per garantir l'experiència offline, la sincronització amb el CMS web existent i la publicació nativa en totes dues botigues.
Apps Mòbils
- Swift (iOS nativa)
- Kotlin (Android nativa)
- StoreKit / Play Billing
- APNs / FCM (push)
Mapes & Offline
- Mapbox (mapes offline)
- Geolocalització GPS
- SQLite (emmagatzematge local)
- Caché de contingut offline
Integració & Backend
- API REST (CMS Way Away)
- Autenticació OAuth
- Sincronització incremental
- Delta updates de rutes
Tens un projecte similar en ment?
Explica'ns la teva idea. El nostre equip analitzarà el teu cas i et respondrà en menys de 24 hores laborables.
Projecte següent