Work archive02 · Mobile product / Travel
Ongoing project · High-fidelity prototype · Expo / React Native
Hopli · Travel Life OS
Plan the journey, live the moment, and turn every trip into a story—with a travel companion that grows alongside you.
Try the live prototype
Live product trial
Create a trip, then explore the whole loop.
Start with an honest first-trip flow, build a local itinerary, move through Plan, Calendar, Capture, Profile, Cat Atelier, Closet, and the new Memory Book. Your demo state stays in this browser.
Open Hopli prototype18 exported routes · local demo data · mobile and desktop layouts
Product thesis
A trip should not break into five disconnected apps.
Hopli treats travel as one continuous arc: inspiration becomes a plan, the plan becomes live context, and the trip becomes a memory worth keeping.
The companion layer adds emotional continuity. A customizable Hopli Cat travels across planning, check-ins, collectibles, outfits, and post-trip stories without turning the core utility into a game.
Prototype scope
Connected journey
One system, before, during, and after the trip.
Inspire
Start with the way you want to travel.
Choose transport, destination, dates, and travel style without confronting a long planning form.
Plan
Turn constraints into a readable day.
A timeline, calendar, route preview, preparation list, and local travel vault keep the plan legible.
Live
Keep useful context close to the moment.
The prototype connects itinerary changes, check-ins, saved information, and capture tools around the active trip.
Remember
Let the journey become a story.
Photos, notes, check-ins, keepsake pages, Memory Book export, and companion progression carry the trip beyond checkout.
01 · Plan the journey
From one-tap setup to a time-and-space view.
The home flow reduces trip setup to four transport modes and three essential decisions. The day plan then pairs a reorderable itinerary with a styled route preview, making sequence and distance visible together.
02 · Travel support
The itinerary stays useful while the trip is happening.
Calendar, preparation, capture, check-in, and Memory Book flows share one visual language. Demo weather and route information remain clearly labelled as previews until live services are connected.
03 · Companion system
Utility with a memory of its own.
Cat DIY and Hopli Closet are not separate projects. The latest Cat Atelier uses the authored Hopli v4 GLB for orbit inspection, breed and look customization, tokens, collectibles, and a persistent travel outfit.
04 · Persistent identity
A demo profile that carries the journey forward.
Martin 张 anchors trips, cities, countries, check-ins, passport marks, travel books, and the companion state in one locally persistent prototype identity.
Technical foundation
Designed as a product system, built as a vertical slice.
- Product structure
- Expo Router · React Native · TypeScript · five-tab navigation
- Local state
- SQLite-backed trips, itinerary, memories, checklists, vault, profile, and cat state
- 3D companion
- React Three Fiber · Three.js · authored v4 GLB · PBR materials · orbit controls
- Device flows
- Native media flows, keepsake composition, Memory Book export, and local persistence
What I brought
Product thinking across utility, emotion, and implementation.
Product & UX strategy
Mapped a full travel lifecycle and kept every feature tied to a moment before, during, or after the trip.
Interface system
Created a warm editorial mobile language that can hold dense plans, memories, controls, and playful companion states.
Interactive prototyping
Built a persistent multi-route vertical slice with native device flows, structured local data, and responsive layouts.
3D experience direction
Connected breed customization, real-time orbit, wearable geometry, tokens, and saved looks to the travel narrative.
Honest demo boundaries
What is real now—and what still needs production services.
The prototype is interactive and locally persistent. The following experiences remain deliberately represented as demo states:
- 01
AI itinerary planning has interaction scaffolding; no production model workflow or constraint solver is connected yet.
- 02
Weather and maps are visual previews, not live forecasting, geocoding, or turn-by-turn navigation.
- 03
Data and selected media remain local; authentication, cloud sync, collaboration, and remote backup are not connected.
- 04
The current Hopli v4 GLB is a high-fidelity prototype asset; production rigs, fur, cloth simulation, LODs, and wider device profiling remain future work.
Ongoing development
A complete direction, still becoming a complete product.
Hopli now demonstrates the core travel loop, local continuity, Memory Book tools, and companion system as one browser-testable high-fidelity prototype. It is not yet a launched travel service.