--- title: Designing the Trip Detail View description: "A multi-segment trip needs four tabs — Overview, Flights, Hotels, Documents — with a 'Next Up' component that always shows the next actionable item at a glance." canonical: https://nowah.xyz/blog/designing-trip-detail-view lastModified: "2026-08-07T08:00:47.041Z" --- # Designing the Trip Detail View A multi-segment trip needs four tabs — Overview, Flights, Hotels, Documents — with a 'Next Up' component that always shows the next actionable item at a glance. The booking is confirmed. The user has flights and a hotel. The conversation was great. Now they close the chat and navigate to their trip. What do they see? This transition — from [conversational booking](/blog/ai-travel-booking-conversation-first) to structured [trip management](/blog/launching-proactive-trip-management-ai-acts-alone) — is where many AI travel products stumble. The chat was dynamic and personal. The trip detail view needs to be organized and scannable. Different modes of interaction, different design priorities, but the same trip. The view must feel like a natural continuation, not a different app. ## Four-tab architecture ![Illustration for this section](https://pics.nowah.xyz/website-media/design-016-img-1.webp) We organize each trip into four tabs: Overview, Flights, Hotels, and Documents. Each tab serves a distinct purpose and presents a different type of information. Overview is the default landing tab. It shows a hero image of the destination, the trip dates, the number of travelers, and — most importantly — the "Next Up" component. This tab answers the question "What do I need to know about this trip right now?" Flights shows all flight segments in chronological order. Departure and arrival times, terminals, seat assignments, airline information, and booking references. For multi-leg trips, each segment is a separate card with a timeline connector between them. Hotels shows all hotel stays with check-in and check-out dates, room type, amenities, and property contact information. Each hotel is a card with the same visual treatment as the booking-stage hotel card, providing consistency between what the user saw when they booked and what they see when reviewing. Documents houses [boarding passes](/blog/launching-document-management-boarding-passes), confirmation emails, travel insurance, and visa documents. Each document is a card with a type icon, a title, and actions for viewing, sharing, and downloading. ## The "Next Up" component "Next Up" is the single most valuable component on the trip detail view. It surfaces the most time-sensitive, actionable item from across all trip segments: "Check-in opens in 2 days," "Your flight departs in 6 hours," "Hotel check-in at 3 PM today." The logic is straightforward. The component scans all trip events (flights, hotel check-ins, activity reservations) and selects the one that is nearest in the future and has an associated action. Check-in opening is prioritized over the flight departure itself because the user can act on check-in but can only wait for departure. The design uses a highlighted card style — slightly elevated, with a green accent border — to differentiate it from the static information below. The card includes a one-tap action button: "Check in now," "View [boarding pass](/blog/boarding-pass-problem-documents-chat)," "Get directions to hotel." The button connects directly to the relevant service, minimizing the steps between seeing the notification and completing the action. "Next Up" transforms the trip view from a static reference page into a dynamic assistant. Every time the user opens their trip, the most relevant information is front and center. They never have to scan through all segments to figure out what needs attention. ## Timeline versus card grid ![Supporting diagram](https://pics.nowah.xyz/website-media/design-016-img-2.webp) For the flights and hotels tabs, we chose a timeline layout over a grid. A timeline presents segments in chronological order with visual connectors between them. This mirrors how travelers think about trips — as a sequence of events, not a collection of items. Each segment card sits on the timeline with a date header and a connecting line to the next segment. The visual flow is top to bottom, past to future. Completed segments (flights already taken, hotel stays already checked out) are visually de-emphasized with lower opacity. Upcoming segments are full brightness. The current segment (the hotel you are currently staying at, the flight you are about to board) gets a highlighted border. This chronological treatment makes multi-segment trips scannable. A two-week trip through three cities with six flights and four hotels could be overwhelming as a flat list. As a timeline, it tells a story: fly here, stay here, fly there, stay there. The structure matches the mental model. ## Sticky tabs on scroll Long itineraries require scrolling. The tab bar sticks to the top of the screen during scroll, ensuring that the user can switch between Overview, Flights, Hotels, and Documents at any point without scrolling back to the top. The sticky behavior uses a 150-millisecond cross-fade transition when switching tabs. The content area smoothly transitions rather than jumping, maintaining the perception of a single cohesive view rather than separate pages. Each tab remembers its scroll position. If a user scrolls halfway through the Flights tab, switches to Hotels, then switches back to Flights, they return to where they left off. This state preservation reduces frustration on trips with many segments where scrolling to find a specific flight takes meaningful effort. ## Deep linking from chat The trip detail view is always accessible from the chat. After a booking is confirmed, the AI's confirmation message includes a "View your trip" button that deep links directly to the trip detail view, defaulting to the Overview tab. But deep links can be more specific. If the user asks the AI "When does my flight land in Tokyo?", the AI responds with the answer and includes a "View flight details" link that opens the trip detail view directly to the Flights tab, scrolled to the relevant segment. This precision linking means the user gets exactly the information they need without manual navigation. The return path is equally smooth. From any tab of the trip detail view, a "Chat about this trip" action returns the user to the conversation with the trip context already loaded. The AI knows which trip the user was viewing and can answer questions about it immediately. ## Building a trip detail view The trip detail view is the post-booking home for every trip. It needs to be comprehensive enough to serve as the single reference point for all trip information, organized enough to be scannable [under stress](/blog/designing-for-airports-ux-under-stress) (at the airport, in a foreign city, jet-lagged), and connected enough to the [chat interface](/blog/adapting-chat-interface-mobile-desktop) that the two feel like parts of the same product rather than separate modules. Four tabs, a "Next Up" component, timeline layout, sticky navigation, and bidirectional deep links with the chat. The trip booked through conversation deserves a post-booking experience that is equally thoughtful. --- Nowah is an AI travel agent that searches and books real flights and hotels through conversation — no filters, no thirty open tabs. [Plan your next trip](https://app.nowah.xyz).