Wireframing a User Flow from the Momondo App
Momondo is a booking app I use frequently, mainly to compare flight prices around Europe. I chose this app to study user flow and try my hand at wireframing as my second prework challenge with Ironhack.
As a project, the app provided the perfect training ground for a newbie tackling complex UX design. Travel apps have to balance a ton of moving parts like multi-city searches, date pickers, price graphs, and heavy filter options without making the screen feel messy or overwhelming.
The app is designed to mitigate the choice overload with something intuitive and easy to follow.
The screens I chose for my user flow were:
Search & Home → Results → Deal Overview → Itinerary → Fare Selection
Components included:
- System bars, top action headers (back, close, share, save), and bottom navigation bars were used to control the app globally.
- Input and Selection used route text fields with swap buttons, date pickers, dropdown selectors, segment tabs, filter chips, and toggle switches.
- Data and content was displayed in cards showing flight result summaries, pricing and fare tier option cards with feature checklists. Advertisements were given containers.
- The layout used progress patterns such as vertical itinerary timeline views, price alert cards, and a multi-step linear progress wizard.
- Distinct call to action buttons (“Search”, “View deal”, “Continue”) and inline helper icons.
The components were used to create Lo-fi wireframe flow and a task analysis breakdown.
On screen 1, users are able to input origin and destination, travel dates, and passenger details.
The user selects between a return, one-way or multi-city trip. They input the origin and destination cities and select their dates. Through dropdowns they can select the number of travellers and the class. Call to action is through a Search button. The system then validates inputs, and triggers a database search for matching flight itineraries.
Screen 2 filters the list dynamically and navigates the user to the specific offer overview.
Here, users are able to review available flights and refine their options based on price, timing, or directness. Users can scan result cards, tap filter chips (such as number of stops, times, number of bags) to narrow the options, or enable price tracking alerts. They then tap a specific flight card to select their preferred choice.
Screen 3 opens a detailed view displaying the full leg-by-leg schedule.
On this screen users verify the airline, general route details, and base pricing inclusions. Here, users can read inclusion specs such as the baggage rules together with any restrictions on the ticket and tap the primary CTA, View Deal .
Screen 4 transitions the user into the booking funnel.
Here users can inspect the exact departure or arrival times, connection points, and airport codes. Users review the outbound and return timeline tree views, tap Continue on the sticky bottom bar and head to an external booking site.
Screen 5 saves selected fare configuration and loads the personal information entry form for customers to proceed to the check out screens.
Users now choose between a light or inclusive fare package based on their flexibility and baggage needs. They compare feature checklists across fare cards, and tap Continue on the selected tier to proceed to the booking process.
Enough information had been collected to develop into an interactive wireframe prototype.
Below the top status elements on the home screen is a category selector row, search parameter fields for trip type, route, and dates, along with a primary Search call to action. To begin looking for flights, the user taps the prominent Search button in the main card.
Get Lew Cooper’s stories in your inbox
Join Medium for free to get updates from this writer.
A list view opens to display the search results: available flight options sit alongside horizontal filter chips and price trend cards. The user scrolls through the result cards and taps on a specific flight offer to review its details.
A deal summary screen displays the offer overview. Here, the flight’s core inclusions and total price are presented alongside a price alert toggle. After verifying the base features, the user taps the primary View deal CTA.
An overlay modal opens displaying the itinerary detail, a vertical timeline tree view of both outbound and return leg schedules. The user reviews the exact departure times and airport codes before tapping the sticky Continue button at the bottom of the screen.
The app transitions to an embedded fare selection web view hosted on a third-party booking agency, loading Step 1 of a 4-step wizard. The user compares itemised feature checklists across different fare tier cards for a Light or Inclusive fare and selects their preferred option to save the configuration and proceed to passenger detail entry.
Users retain full control across the flow, with top-left back arrows and close icons enabling seamless navigation back to preceding screens.
This app breaks down a massive, data-heavy process into clean, easy-to-follow steps.
It allows for a lot of empty space and neat containers resembling plane tickets or boarding passes. These all serve to reduce user stress as they navigate a complex selection process with many adaptations and choices to be made. Stripping away the polished visual styling and examining the underlying information architecture and layout hierarchy turned out to be a real breakthrough.
Just as scaffolding supports a learner through complex concepts, lo-fi wireframes allowed me to look past the surface to focus entirely on the bones of the app. This project was definitely a learning curve as I got to grips with Figma mechanics, design systems, and industry terminology. Dissecting a live product down to its basic building blocks demystified how it works under the hood, showing me that mastering a tool like Figma is less about memorising shortcuts and more about building a curious, structured mindset for tackling complex user journeys. I am looking forward to taking what I have learned and using it as I continue my design journey!
