The Atlantic UX Teardown: Two Red Buttons and No Price in View

Two red buttons of the same size end the free part of an Atlantic story: Subscribe on the left, Start Free Trial on the right, the word "OR" between them, and no price beside either. A reader reaches them after two paragraphs of the lead technology story, set in a single, uncluttered reading column. Before the story, every section front opens with an advertising band that holds its space whether an ad has loaded into it or not.

The path, in eight screens: the Technology front, its AI cluster, Kevin Roose's lead story up to the gate, the main menu, then Culture and Ideas. It is a signed-out desktop session from 29 September 2026, with a 1440×900 window. The site's own text was US English while the ads were targeted at Brazil, one of them in Portuguese. No button in the gate was pressed, and nothing past sign-in, newsletters, sharing or comments was opened. The headlines below are what was live that day and will have changed.

The same header on all eight screens

Every screen in the capture carries the same header; the only change is the menu button turning into an X while the menu is open. On the left: the red "A", a menu button, a search icon, and three text links (Popular, Latest, Newsletters). In the middle, "The Atlantic" in its script wordmark. On the right, Sign In as plain text and Subscribe as a filled red button. That button is the only solid block of color in the header, and it doesn't change between a section front, an article, or an open menu.

The header never adapts to where the reader is. Nothing in it marks the current section, so the header on Technology looks exactly like the header on Ideas.

Section fronts open below an ad band

On the Technology front, the space between the header and the gray section band is about 340 pixels tall. The ad inside it, a puzzle-games subscription offer, is about 90 pixels tall. The rest of the space is white. The section name, set in tall condensed capitals, starts below that, followed by a one-line topic rail ("Explore | Technology Artificial Intelligence"). By the time the "Artificial Intelligence" heading appears, the window has about 85 pixels left, enough to show the top edge of four images and none of their headlines.

The Culture front uses the same band, filled this time by a real-estate ad that takes most of it; two story headlines start at the very bottom edge of the window. On Ideas, the band is an empty gray rectangle with nothing loaded in it. One headline fits below it, and above that headline the first screen is mostly gray.

A fixed-height slot is usually there so the page doesn't jump when an ad loads late, and that is a fair reason to reserve it. The cost shows up on a 900-pixel-tall window, where the band takes more than a third of the height on every front we opened, whether or not an ad fills it.

The card and the article open with the same line

One scroll down, the AI cluster shows four cards in a row: image, photo credit in a small monospaced face, serif headline, a one- or two-sentence summary, then the byline and date in monospace capitals. The lead card's summary reads "A new world has arrived. Dario Amodei and Sam Altman cannot stop fighting over it." The article page repeats that sentence word for word as its dek, under the headline.

The reader who picked the card on the strength of that sentence finds it again at the top of the article and knows they're in the right place. The type stays consistent across the jump too: condensed capitals for section names, a serif for headlines and body, monospace for credits and timestamps, a sans for the navigation.

A 665-pixel column and a drop cap

The article page opens with a red "TECHNOLOGY" kicker, the headline, the dek and "By Kevin Roose", and then an illustration about 975 pixels wide that runs off the bottom of the first screen. No body text shows on that first screen.

Scroll down and an ad in Portuguese for coffee machines sits between the illustration and the first paragraph. Below it, the body runs in a single column about 665 pixels wide, with a three-line drop cap on the opening "B", generous line spacing, and one underlined link on a name. No sidebar, no related-story rail and no share buttons appear next to the text in the capture. The next ad slot waits below the second paragraph.

The gate: two red buttons, no price

The third paragraph fades from black to almost white over its nine lines, and the pitch starts below it.

A small monospaced label, "KEEP READING THE ATLANTIC.", sits over a three-line pitch that stays on the story's subject: "AI agents, data centers, and the future of work: Get human-centered insight on the tech stories you need to know."

Below the pitch, two columns split by a thin rule and the word "OR". The left one offers "one year of access and a role in supporting independent journalism" with a Subscribe button. The right one offers 30 days free "and see how The Atlantic fits into your daily routine" with a Start Free Trial button. The two buttons are the same red, the same width and the same height, and they share the screen with the header's Subscribe, which is that same red too. Whatever sits below the buttons, a price or a renewal term or a sign-in line, was off screen and is not covered here.

So the choice on screen is a year against a free month. Neither button is styled as the default. To compare them, a reader has to click through to learn what the year costs, or what happens on day 31. The copy does the comparing in words instead: "a role in supporting independent journalism" against "fits into your daily routine".

Twenty-one sections in three columns without labels

The menu button turns into a red X and opens a panel over the dimmed article. Under a single "SECTIONS" heading are three columns of seven links each. The first column runs from Ideas and Politics to Features. The second from Technology and AI Watchdog to Education. The third from Culture and Comedy to Events. The columns read like groups (public affairs, science and technology, culture), but none of them carries a label, so the grouping is left for the reader to infer.

Next to the list are three illustrated links (the archive, the Atlantic's games, podcasts and audio articles), and on the right the current print cover with Latest Issue, Past Issues and Give a Gift. The menu has no Subscribe link of its own. The red button in the header above it is still there.

Culture leads with a photo from the Technology front

Picking Culture from the menu opens the same layout: ad band, gray section band, then a grid. The lead image is the Saturday Night Live "Weekend Update" desk photo that appeared one screen into the Technology front, on the card for "An SNL Exchange That Captures the AI Disconnect". The Culture lead's headline is below the frame, so we can't confirm it's the same story. If it is, one piece is filed under both sections. Beside the lead sit two smaller image cards.

Ideas, picked from the menu again, drops the image grid. Under a "LATEST" heading, the first row has a headline, a one-line summary, a monospaced byline and timestamp, and an image on the right, in a narrower column than the Technology and Culture grids.

What we'd change

Size the ad band to the ad, or let the section name come first on short windows. The Technology and Ideas fronts above show what a 900-pixel window loses to it.

Put a number in the gate. A price under Subscribe and a line under the trial about what happens after 30 days would let the reader decide without leaving the article.

Label the menu columns. The three groups are already there.

Take it further

We read The Atlantic through the UX Clarity framework, the same lens we use in a Full UX Audit. The question here was whether a reader can see what they're being asked to decide, at the moment the product asks. For how that turns into a ranked list of fixes, read what a real UX audit looks like.

Want to know whether your own upgrade prompt shows the reader everything they need to say yes? Apply for a Full UX Audit →