Travel
TRIPPILOT
Selected over multiple candidates to deliver a freelance mobile prototype for a US-based AI road trip app across international timezones.
// Across
- Role
// Down
- Duration
// HIGH FIDELITY
Visual Interface
The outcome of a structured design process. I lead with the interface, followed by the systematic logic that built it.
.png)
.png)
.png)
.png)
.png)
// THE_BRIEF
Problem & Solution
The Problem
Planning a road trip is fragmented and time-consuming. Travelers must juggle separate apps for navigation, food, hotels, and activities. This constant context-switching causes decision fatigue, meaning people spend more time researching than enjoying their trip.
The Solution
TRIPPILOT: An AI-powered road trip planner that generates a personalized, complete itinerary in under 60 seconds. By inputting a destination, dates, budget, and interests, users instantly receive a fully customizable route complete with timing, food, attractions, lodging, and cost estimates.
The Client
Stephon Orelus, a US-based entrepreneur, needed a
high-fidelity mobile prototype to demonstrate TripPilot's core value proposition to testers and stakeholders. The prototype needed to feel as close to a real app as
possible — not a collection of static screens, but a living, interactive experience.
// METHODOLOGY
AI-Augmented Workflow
Brief &
Discovery
Architecture & Logic
Visual Identity & System
Systematic Execution
Interaction Design
// THE_EVIDENCE
The Blueprint
CLIENT BRIEF
Stephon provided detailed documentation including wireframes, product specifications, MVP requirements, user flows, and a Hero Trip document — a complete 9-day family road trip from Taunton, MA to Tampa, FL used as the primary demo experience. My role was to transform this documentation into a polished, interactive prototype that felt like a real app.
VISUAL REFERENCES
The visual identity was anchored in established travel and navigation apps. I synthesized key design patterns from industry leaders to make TripPilot feel instantly familiar and effortless.
- Google Maps: Borrowed the use of navigation blue to signal trust and clear direction.
- Airbnb: Adopted generous white space and card-based layouts to make dense trip data approachable.
- Apple Maps: Analyzed how to keep interfaces clean and intuitive during complex routing.
IDEATION & WIREFRAMING
Stephon provided detailed written wireframes and product specifications. I translated these into mid-fidelity Figma wireframes to validate layout logic and information hierarchy before moving to high-fidelity execution.
.png)
DESIGN TOKENS
I established the visual foundation before touching any screens — navigation blue as the primary color, inspired by Google Maps and Apple Maps, paired with Raleway for headings and Plus Jakarta Sans for body text.
Color System
BRAND COLORS
--brand-primary
#0052FF
--brand-primary-light
#E5EEFF
NEUTRALS/GRAYS
--gray-card-bg
#FFFFFF
--gray-bg
#F9FAFB
--gray-border
#E9ECEF
--gray-text-secondary
#4B5563
--gray-text-primary
#111827
SEMANTIC COLOR
--semantic-success
#178740
--semantic-star
#8F7200
--semantic-delete
#EB0005
Typography Scale
Wordmark
Stephon confirmed there was no finalized logo at the time of the prototype, giving me creative freedom to establish a placeholder wordmark. I designed "TripPilot" with the second word bolded in navigation blue — creating a simple but purposeful typographic identity that communicates direction, precision, and forward movement.
USER FLOW
Before connecting any prototype interactions, I mapped the complete user journey — from Welcome through all possible paths including Explorer Mode and the four Dynamic Schedule Engine interactions.
COMPONENTS
I built a library of atomic components and interactive states to keep the experience consistent across all 25+ screens.
I used high-contrast primary buttons for key CTAs and card-based components to present trip information at a glance.
By building a modular chip system for preference selections, I ensured users could make choices quickly without
cognitive overload.
Every loading state, toast notification, bottom sheet, and swap card was designed as a reusable component — ensuring the prototype felt like a real, cohesive product rather than a collection of individual screens.
DESIGN DECISIONS
Selected Card State — Emphasis & Confidence
When a card is selected, it scales larger with a more prominent border and bolder typography. This reduces misclick anxiety — users feel confident they tapped the correct option without second-guessing themselves.
Travel Pace Icons — Visual Comprehension
Each Travel Pace option features a colored icon inside a photo frame, giving users an immediate visual cue before reading the description. This reduces cognitive load — users understand the option at a glance.
Route Map — Spatial Awareness
The Trip Overview includes a simplified route path map showing only the travel line between stops. This helps users visualize journey complexity without overwhelming them with full map detail.
Highlights Carousel — Progressive Disclosure
The "What to Look Forward To" section uses a horizontal scrolling carousel rather than stacking all highlights vertically — keeping the screen uncluttered while maintaining discoverability.
Timeline Indicator — Scannability
A vertical timeline runs along the left edge of all itinerary stop cards, anchoring each entry to a specific time. Users can locate a time of day instantly without reading through card content.
Explorer Mode Loading State — AI Feedback
A brief loading screen appears before the Generated Day result, signaling that the AI is actively building a personalized plan — setting the right expectation rather than an abrupt transition.
PROTOTYPING
I turned all screens into a fully interactive prototype, stress-testing every user path. Key prototype achievements:
- Loading Sequence: 5 auto-advancing steps with 2-second delays, transitioning from spinner to green checkmark with progress bar — building anticipation before the Trip Overview reveal.
- Explorer Mode: 4 complete category flows, each with 3 clickable recommendations leading to unique Generated Day result screens.
- Dynamic Schedule Engine: 4 interaction types each showing before/after route updates with confirmation messaging.
- Universal Swap: All 5 Day 1 itinerary stops have working swap screens with 3 alternative suggestions each.
// TESTIMONIALS
The Validation
"What ultimately led me to choose you was your understanding of the product, your communication, and your ability to translate the vision into a realistic and well-structured prototype experience."
Stephon Orelus
Founder & Entrepreneur • US-Based Client
"I appreciate your responsiveness and attention to detail."
Stephon Orelus
Founder & Entrepreneur • US-Based Client
// TAKEAWAYS
Reflection &
Final Thoughts
“TripPilot is my first paid international freelance project — $265 USD
earned, selected over multiple candidates for product thinking, not just visual craft.”
This project taught me that client work is fundamentally different from personal projects. Every design decision needed to serve Stephon's vision. When he requested scope expansions mid-engagement — expanding Explorer Mode to 4 categories and adding universal
swap functionality — I learned to scope, quote, and negotiate professionally rather than silently absorbing extra work. Managing expectations honestly, explaining Figma's limitations clearly, and communicating proactively across international timezones are skills no tutorial teaches.
Being chosen over other candidates specifically for product thinking and communication — not just visual design — validated my Technical Empathy approach. Stephon's feedback confirmed that understanding the product matters as much as executing the screens.
Delivering a prototype that Stephon described as feeling "like a real product" — and earning his trust enough that he immediately commissioned additional paid scope. That progression from hired → delivered → re-hired is the freelance relationship I want to build throughout
my career.
.png)