A side-by-side teardown of the visual language used by category leaders in Travel & Transportation and Food & Drink — where they converge, where they diverge, and which decisions separate a merely competent interface from one that sells.
Across both categories, the apps that look most expensive are not the ones that add the most. They are the ones that decide, early and ruthlessly, what the interface is not allowed to do.
Airbnb, Uber, Blue Bottle and DoorDash all run near-neutral interfaces. Photography, maps and food are the only saturated elements on screen. The result reads as premium because nothing competes with the product.
The strongest apps reserve their brand colour almost exclusively for the primary commercial action. Airbnb's magenta appears once per screen — on Reserve. Blank Street's sage appears once — on Add to Bag.
"Add $17.50", "Add item AED 50.00", "ADD TO BAG ($4.50)". Near-universal in Food & Drink, spreading into Travel. It removes a verification step and measurably reduces cart hesitation.
Marketplaces sell someone else's product, so they badge heavily. Brand-owned apps can strip everything back because the brand itself is doing the persuading. Copying the wrong model is the single most common mistake.
Ride-hail and delivery leaders treat the live-tracking view as their most-seen screen and design it accordingly — desaturated maps, a single coloured marker, and a progress track that answers "how long?" before you ask.
Travel splits cleanly into two visual philosophies. Aspirational apps (Airbnb, GetYourGuide, Hyatt, Marriott) make photography the interface and reduce chrome to near-invisibility. Transactional apps (Booking.com, Skyscanner, Agoda) flood the frame with brand colour and put the search field, not a photograph, in the hero position. Both work — but only when the choice is deliberate.
Food splits along the same axis, but harder. Marketplace maximalists (Deliveroo, DoorDash, Swiggy, iFood, foodpanda) treat every card as an ad unit — photography plus four to six metadata chips plus a promo badge. Brand minimalists (Blue Bottle, Blank Street, Honest Greens) strip all of it away, because when you own the product you don't need to compete for attention inside your own app.
Same platform, same conventions, opposite instincts. Understanding why prevents borrowing a pattern that will not survive the transfer.
| Dimension | Travel & Transportation | Food & Drink | Why it differs |
|---|---|---|---|
| Role of photography | Aspirational. Wide landscape, sells a place you haven't been. | Appetitive. Tight crop, sells something you want in 30 minutes. | Travel sells a future self; food sells an immediate craving. |
| Colour strategy | Neutral chrome; photography supplies colour. Utility players invert this with brand-colour blocks. | Neutral chrome; the food supplies colour. Accent reserved for promo urgency. | Converged. Both learned that saturated chrome fights the content. |
| Information density | Low above the fold. One or two decisions offered. | High. 4–7 metadata points per card is normal. | Travel is a considered purchase; food is a rapid, comparison-heavy one. |
| Card construction | Image-as-card, text on page background (Airbnb model). | Contained card with white surface below the image. | Food needs a surface to hold price, rating, ETA and fee. |
| Badging | Sparse. "Guest favorite", "Popular", loyalty tier. | Heavy. Discounts, sponsored flags, PRO tiers, free delivery. | Food margins run on promotion; travel runs on trust. |
| Primary CTA | Verb only — "Reserve", "Find cars", "Search". | Verb plus price — "Add $17.50", "ADD TO BAG ($4.50)". | Food carts are incremental; travel is a single big commitment. |
| Live state | Map + sheet. Driver identity is the emotional payload. | Map + sheet + stepped progress. ETA is the emotional payload. | You get into a car with a stranger; you only wait for food. |
| Type scale | Larger. Display headings 26–34px; boarding codes to 56px. | Tighter. Headings 20–24px to preserve card real estate. | Travel has room to breathe; food is fighting for list space. |
| Depth & elevation | Minimal shadow; sheets and scrims create depth instead. | Light card shadows plus floating CTAs over content. | Food needs a persistent action layer above a scrolling feed. |
Of the 34 apps reviewed, the pinned bottom action bar carrying the running price appeared in every single app with a cart. It is the closest thing to a universal law in consumer mobile commerce — and the cheapest pattern on this list to implement.
These are table stakes. Deviating from them costs you familiarity and buys you very little. Adoption figures below are observed across the 34-app sample.
The highest interactive element on the home screen is a rounded search field — 44–52px tall, fully rounded or 12px radius, with a leading magnifier icon and placeholder copy written as a question ("Where can we take you?", "Search for shops & restaurants").
Aspirational apps float it over imagery with elevation. Utility apps embed it in a brand-colour block. Either way, it is the first thing the thumb finds.
32 of 34 apps
Backgrounds are white or a warm off-white. Text is near-black rather than pure black. Metadata is a mid-grey. The brand colour appears on the active tab item and the primary CTA — and almost nowhere else.
Uber takes this to its logical end and removes colour from the chrome entirely, delegating all of it to illustration. Airbnb allows exactly one magenta object per screen.
29 of 34 apps
Horizontal shelves are sized so the next card is 15–25% visible at the right edge. No arrows, no dots, no "scroll for more" label — the crop is the affordance.
Universally paired with a section header carrying a right-chevron or "View all" link, giving users two ways into the same collection.
31 of 34 apps
Top-left is merchandising — "Guest favorite", "Popular", "Must try", "Promo", "Ad". Top-right is personal — the heart, the save, the wishlist. Bottom-left, where used, is provenance: the merchant logo chip.
This is remarkably consistent and effectively now an expectation. Swapping the sides costs recognition for no benefit.
27 of 34 apps
Any live state — a car arriving, an order in transit — uses the same architecture. The map occupies the top 30–45%, a rounded sheet with a grabber handle covers the rest, and the sheet's first line is a plain-language status sentence in bold, 22–26px.
The best implementations desaturate the map so the marker is the only coloured object. The weakest leave a full-colour Google or Mapbox tileset fighting the sheet for attention.
All 12 apps with live states
A persistent bottom bar sits above the tab bar carrying the running total and a CTA whose label contains the price. Frequently paired with a quantity stepper on the left.
Travel is adopting it too — Airbnb's detail screen pins the nightly total beside Reserve, and the price is underlined to signal it opens a breakdown.
Every app with a cart
Rating → time → distance → fee → discount. Nearly every food card in the sample follows this sequence, separated by middots. Travel compresses it to price → rating.
The discount, where present, is always last and always the only coloured item in the row — usually red, green or the brand hue.
All 19 marketplace apps
Service tiles, empty states, benefit explainers and account rows increasingly use bespoke 3D or isometric illustration rather than flat icons. Uber, Expedia, Agoda and talabat all do it.
It solves a real problem — photography is unavailable for abstract concepts like "Reserve" or "Insurance" — and it is the fastest-moving trend in the sample.
14 of 34 apps · rising
Convergent patterns get you to parity. These seven decisions are what separate the apps people describe as beautiful from the ones they describe as fine.
Uber's entire interface is greyscale. Lyft and DoorDash strip colour from their maps. Airbnb's chrome is pure monochrome. The effect is that content looks more vivid without any content-side work at all.
Airbnb and Deliveroo both let photography define the card boundary with text on the page background beneath. Removing the white container removes a visual frame and makes feeds read as galleries rather than lists.
Honest Greens shoots every dish on a sand backdrop matching the app background. Blue Bottle uses a consistent seamless grey. Airbnb deliberately uses real, unstyled interiors. In each case the art direction is as tightly specified as the type scale.
Airbnb magenta means Reserve. Blank Street sage means Add to Bag. Deliveroo teal means basket. When an accent is rationed this hard it becomes a wayfinding tool — users learn to scan for the colour rather than read the button.
The tracking screen is opened repeatedly per order and is often the last impression of the experience. DoorDash, Postmates and Grab give it full design treatment. Most competitors ship a map and a status string.
Blue Bottle can remove prices from a browse screen because the brand carries the persuasion. A marketplace listing 4,000 restaurants cannot. Copying the wrong reference is the most common failure mode in this category.
"Where can we take you?" · "Where are you going?" · "Search 'Ice Cream'". The search field is the most-read string in the product and the leaders treat it as copy, not as a label.
Ten decisions, ordered by leverage. Items one to four cost almost nothing and account for most of the perceived quality gap.
Primary CTA and active tab state only. Audit every other use and remove it.
"Add $17.50" rather than "Add". Universal adoption; near-zero implementation cost.
Near-black text, mid-grey metadata, warm off-white surfaces. Let content be the only colour.
The most-read string in the product. Treat it as copy.
Top-left merchandising, top-right save, bottom-left provenance.
15–25% visible. Removes the need for any scroll affordance.
Custom greyscale tiles so the route and marker are the only colour.
Backdrop, crop, lighting and colour temperature — specified as tightly as type.
It is seen 5–10× per transaction and is usually the weakest screen you ship.
Aspirational or transactional. Marketplace or brand-owned. Hybrids read as indecision.
