As a Product Manager, I've always believed that the best software doesn't just solve a problem—it creates a cohesive, delightful, and highly contextual experience. When planning our upcoming trip to London, we set out to build something that was as utility-dense as it was immersive.
The vision was simple: "What if we could experience our journey through a real-time, wizard-inspired companion app?" Translating this vision into reality required a journey of constant iteration, strict UX audits, and serious engineering discipline. Here is the story of how the Marauder's Map companion app evolved from a single-file concept into a modular, production-ready travel suite.
"I solemnly swear that I am up to no good." The guiding UX philosophy behind our magical UI transitions
The Product Evolution Timeline
Every great product begins with compromises to achieve fast validation. The timeline below highlights our exact milestones as we chipped away at technical debt and polished user interactions.
Day 1: The Native SwiftUI Rebirth
We kicked off the project with a simple request: a dedicated mobile companion app to hold our travel itineraries and bookings offline.
Our initial prototype was a slow, non-responsive WebView shell. Recognizing the friction of web wrappers on the go, we immediately scraped it and rebuilt the shell natively in SwiftUI, creating the core four-tab architecture:
Initial Native Architecture
- DashboardView: Houses the live Time-Turner countdown timer ticking down to departure, traveler profiles with custom avatars, and a pending quests checklist.
- ItineraryView: Renders the daily schedule cards with smooth spring transitions.
- DocumentsView: Interfaced with our Google Apps Script backend to pull file metadata dynamically, fallback to local storage, and display files via
SFSafariViewController. - ChecklistView: A pre-departure check list persisted locally using
@AppStorage.
Google Sign-In & Script APIs
Travelers' data privacy is paramount. We implemented the Google Sign-In SDK (OAuth 2.0) directly into the app shell to secure access to private document folders in our Gringotts Vault.
Simultaneously, we updated our Google Apps Script backend. By passing a query parameter (?v=api), the backend was configured to bypass HTML rendering and return a lightweight JSON payload of the indexed files, drastically accelerating loading times over cellular networks.
Gamification & Automated Bookings Scanning
To add interactive magic to the itinerary, we introduced a location-based **Scavenger Hunt** badge system using CoreLocation geofencing bounds, triggering custom camera capture prompts to unlock scrapbook entries.
We also built automated file checking: on app launch, the dashboard automatically scans sandboxed PDFs in the local Bookings/ directory and checks off checklist items (such as museum tickets or hotel bookings) whose filenames match itinerary tags.
Visual Identity Overhaul & Plist Audits
We executed a major visual overhaul to elevate the user experience. We created our core design system using custom gold gradients (goldGold, goldStroke), rounded glassmorphic sheets with material blurs, and spring animations on expands.
To ensure stable deployment on physical devices, we resolved launch-time crashes by adding missing core privacy permissions (such as location authorization strings) and URL configurations to the target Info.plist profiles.
Home Screen Widgets & Live Refreshes
Companion utility should extend beyond the active application. We introduced iOS Home Screen Widgets (the "Daily Prophet" travel monitor) to display flight schedules and checklist item counts directly on the user's home screen.
To ensure the widget data remains accurate, we hooked up immediate reloading events via WidgetCenter.shared.reloadAllTimelines(), triggering instant updates whenever the user modifies their checklist or changes the active itinerary focus.
Spatial Awareness & Proximity Tools
We integrated core location tracking and spatial calculations. By introducing a proximity analyzer, we could calculate distance vectors (within a 10km radius) to key accommodations and transportation hubs. This laid the foundation for our geofenced scavenger hunt.
Diagnostic Logging & Spell Rank Progression
To ensure bulletproof reliability on the ground, we introduced a local diagnostics panel driven by a rolling AppLogger file in the Documents directory to track GPS drift and network packet drops.
We also gamified exploration by adding **Spell Rank Progression**—completing location-based scavenger quests awards points, advancing the traveler's status from "Muggle Tourist" to "Minister of Magic."
The Great Architectural Overhaul
Today, we completed our most comprehensive refactoring phase to date. We addressed critical code debt, resolved strict compilation limits, and added missing system layers to prepare the app for the App Store.
Architectural & UX Upgrades
- Dynamic Data Abstraction: Eliminated hardcoded structures by creating a dynamic TripData.json schema managed by a thread-safe TripDataManager.
- Modular Layout Decomposition: Refactored the monolithic DashboardView.swift into independent SwiftUI files (including countdown meters, traveler badges, and scavenger quests). This reduced the main dashboard file to under 290 lines of clean layout code.
- Shared App Groups: Enabled full widget synchronicity by sharing preferences over a shared app suite container (
UserDefaults(suiteName: "group.com.jananibalu.maraudersmap")), allowing our Home Screen widgets to display live trip updates. - Camera Roll & Simulation: Declared Photo Library permissions to save scrapbook check-ins directly to the iOS Camera Roll. We also added a GPS simulation suite in our diagnostic panel to test geofenced quests pre-departure.
Refining UI & UX: Injecting the Magic
A high-utility app shouldn't feel sterile. We spent hours dialing in custom styling tokens and immersive visual mechanics in our SharedComponents.swift and ThemeSystem.swift files:
- Thematic Palette: A carefully selected color system featuring deep obsidian background layers (`#0d0615`), warm parchment whites (`#f5efe3`), and glowing gold accents (`#d4af37`).
- Liquid Glass Transitions: Crafted a fluid layout structure using SwiftUI's native material blurs (
.ultraThinMaterial) and custom gradients (plumGlass,goldStroke). We paired this glassmorphism with asymmetric scale/opacity transitions (such as.scale(scale: 0.95).combined(with: .opacity)) and spring physics to make sheets and overlays appear to morph and dissolve fluidly. - Magical Footstep Trails: Created custom map helpers that perform coordinate interpolation and bearing calculations. It dynamically projects animated footsteps orienting themselves along the traveler paths in real-time, replicating the visual signature of the map.
- Concealment Gating (I solemnly swear...): Wrapped the map behind a parchment overlay. Travelers must tap the map scroll and declare their intention to trigger the reveal transition, or choose "Mischief Managed" to lock it.
- Haptic Engine Integration: Integrated tactile haptics (
UIImpactFeedbackGenerator) on checklist toggles, quest badges, and diagnostic commands, adding physical weight to interactions. - Embedded PDF Document Canvas: Created a custom
WKWebViewcontainer sheet to load ticket files locally without throwing the user into Safari, preserving the immersive styling. - Micro-Animations: Implemented spring transitions on expanding timeline entries and rotational animation loops on the Time-Turner countdown.
- Accessibility Auditing: Audited color contrast ratios, increased tap targets to 44x44 points, and ensured map annotation buttons carry explicit accessibility labels.
Engineering Under the Hood
From an engineering perspective, modular code is robust code. By segregating the logic:
- We resolved MapKit compilation errors by enforcing accessibility modifiers on inner button content rather than the map annotation wrappers.
- We established clean data protocols so that changing the underlying trip itinerary requires modifying just one JSON file rather than refactoring multiple view hierarchies.
- We isolated file system writes to a background queue to ensure UI rendering remains butter-smooth during photo capture saves.