The original Roleo "AI Exposure" report is a clever viral asset — but as a conversion surface it leaves a lot on the table. Below are four full rebuilds of the same page, each applying Baymard Institute UX research and conversion psychology, each leading with a different persuasion strategy.
Seventeen issues found on the original report page, each mapped to the research principle it violates and the fix carried into all four rebuilds.
"50% replaceable by AI" sat as a plain serif heading with no visual weight.
The score becomes the dominant element: an animated gauge (A), a giant count-up + risk meter (B & D), or a progress donut (C).
Baymard — visualize key metrics; Von Restorff isolation effect; the peak-end rule (the count-up creates a memorable beat).
Above the fold offered only share buttons. "Join Roleo" appeared only after scrolling past the task grid.
A primary CTA sits in the hero, then repeats after the breakdown, after the value section, in the FAQ run-up, and in a scroll-triggered sticky bar.
Baymard — the primary action must be visible at the decision moment, not hunted for.
"Healthily deceived" + a carrot-cake badge + "self-deception going mouldy" — charming, but it never says what Roleo does or why to care.
The hero headline now states the situation and the offer in one line; brand wit is kept but moved downstream of clarity.
Baymard — above-the-fold clarity; users decide to stay within seconds and need "what is this / what's in it for me" first.
"Join Roleo" — join what, for what outcome?
Outcome-oriented labels: "Get my personalized career plan" (A), "Build my AI-proof plan" (B), "Start my free game plan" (C).
Baymard — button microcopy should describe the result; generic verbs measurably depress click-through.
Nav "Get started" → app.roleo.com competed with body "Join Roleo" → roleo.com — two destinations, two labels.
One primary action, one label, one destination, repeated. Share is visibly demoted to a secondary tier.
Hick's Law — each added choice slows the decision; a single repeated CTA compounds intent.
The shared report page — the highest-intent surface — carried no ratings, testimonials, or usage signal.
Added a rating, a usage stat, and three role-matched testimonials placed just before the decision points.
Cialdini — social proof; people follow peers, especially those in the same job title.
"32% already happening today" and "more exposed than 93% of professions" appeared only in the page's <meta> description — never on screen.
Both are surfaced as headline stats; the 93rd-percentile becomes a social-comparison anchor (a distribution bar in A, a slab in B).
Baymard — lead with your most compelling evidence; social comparison sharpens personal relevance.
"How are the results calculated?" sat collapsed at the very bottom — yet the score's credibility is what makes the fear (and the conversion) work.
A visible "verified methodology" strip sits right under the score; the full FAQ answer is still available.
Authority bias — a credible-feeling measurement is believed and acted on; an unsourced number is dismissed.
"Skills which make you safe" sat as a third equal column with no link to the product or the CTA.
The safe column is visually elevated and footed with a bridge line — "Roleo helps you shift your week here" — turning relief into the reason to click.
Every section should advance the narrative toward the action; an unconnected payoff leaks intent.
"Hidden from employer. No cost. No risk." was one tiny line in the dark box, easy to miss.
A reassurance line — free · invisible to your employer · no credit card · 2 minutes — sits directly under every CTA.
Baymard — anxiety spikes at the click; resolve cost, privacy, and effort objections exactly there.
A full "Latitude59 special" section (team photo, 3-step sticker steps) pushed the FAQ and any real CTA further down the page.
Demoted to a slim, dismissible top banner — present for attendees, invisible to everyone else's decision path.
Baymard — remove anything that competes with the primary task; protect the scent of the conversion goal.
Four collapsed questions after the event section — past where most readers stop.
Tightened FAQ relocated to immediately before the final CTA, so objections are cleared right as the decision is made.
Baymard — place objection-handling adjacent to the action it unblocks.
Centered serif headings of similar size throughout; the eye had no clear landing order.
A deliberate hierarchy: score first, CTA second, supporting evidence third — enforced by size, color, and weight.
Baymard — users scan in an F/Z pattern; hierarchy tells them where to look and in what order.
"Apocalypse" wording, but nothing conveyed that the risk is moving or that acting now matters.
Honest, trend-based urgency: "32% automatable today — and that number only moves one way." No fake countdowns.
Loss aversion + present bias; Baymard cautions against fabricated scarcity, so urgency is tied to a real trend.
"Unlocks new career opportunities and helps you survive the AI job market apocalypse" — evocative, but not concrete.
Three specific, tangible benefits: a 24/7 role-scanning agent, an ordered skill roadmap, and total stealth from your employer.
Baymard — concrete, specific benefit copy outperforms abstract promises; show what's behind the click.
LinkedIn / Instagram / Copy-link buttons were the sole interactive element in the hero — yet sharing isn't the conversion goal.
Share is retained (it drives the viral loop) but restyled as a quiet secondary row beneath the primary CTA.
Visual hierarchy — the loudest control should be the action you most want; secondary actions must look secondary.
A 3-column task grid and fully centered layout — fragile on the phones where most shared links are actually opened.
Mobile-first responsive: columns stack, tap targets ≥ 48px, score scales with the viewport, sticky CTA keeps the action one thumb away.
Baymard mobile UX — shared report links are predominantly opened on mobile; the small screen is the primary canvas.
roleo-redesign/ folder of standalone HTML.