Working prototypes, not mockups

I built each direction as a working page in the real codebase. Leadership could scroll each one, see real copy and product UI in place, and compare them on equal terms.

I kept the copy honest across all of them: real customer quotes only, no invented stats, and only capabilities the product actually has.

I worked with David Hartery, head of marketing, on the brief and the messaging.

Four directions

01 Refresh

The small tweak. Same structure as the live site, rebuilt in a cleaner card language with heatmap imagery from the product and a live dashboard mockup.

02 Arcadia

The frontier direction, built around Arcadia, the player-intelligence model. A light aurora look, product UI redrawn from the real Figma screens, and one dark cinematic moment to introduce the model.

03 Signal story

The provocation. A black page and one animated field of dots that morphs as you scroll: a wave, a cloud of feeling, a player’s face, a pulse line, then the results customers reported.

Decisions along the way

• The provocation changed course. The first version walked through a player study step by step. I dropped it: a director wouldn’t care about the detail. The rebuild tells the story visually, with almost no copy.
• Imagery beside text, never behind it. Full-bleed images on cards felt like too much, and heatmaps fading in behind text felt unsettling. Imagery sits beside or behind the cards instead.
• Flat beats clever. I tried 3D card flips and perspective planes, and rolled both back. They looked dated and pulled focus from the product.
• One message everywhere. All four directions use the same approved positioning, so the review compared design, not copy.

Outcome

I presented the directions to leadership on a single review page with scroll-through recordings of each, then on live preview links.

The directions weren’t taken forward after a change in product leadership. What they show still stands: four distinct answers to one brief, each built well enough to judge in a browser rather than imagine from a slide.

The old brand

A cracked, cartoon-style wordmark with an arrow through it, over an orange gradient bar and an all-caps serif menu. It had energy, but nothing about it said trust. It was hard to read, its detail got lost at small sizes like a favicon, and there was only one version, so it couldn’t adapt to different spaces.

The old site header, June 2024, from the Wayback Machine.

The call

A trident. It ties in with the Titan name and the shop’s ambition to be a titan of trading cards, and it works as a mark on its own. Yellow, the colour most associated with online card shops, against a deep midnight blue. The wordmark is Inter with added serifs, for a more prestigious feel, and the site uses Inter throughout.

The first concept used a lightning bolt as the mark. I took the early designs to a review with OneTwenty’s CTO, where we signed off the custom logotype and the colour palette. We also agreed the bolt wouldn’t stand out enough in a crowded market: lightning is everywhere in trading cards, not least because Pikachu is the face of so many card shops. I replaced it with the trident, developed the full identity, and presented it to the leadership team for final approval.

Before and after.

The system

Logo and colour

Horizontal, vertical and mark-only versions, so the logo fits a site header, a card back or an app icon. Four colours: Titan Yellow, Titan Midnight, Titan Void and white.

Website

A new homepage with a hero banner for each new release, quick links to every game, and best sellers up front. Menus, filters and sorting were redesigned for mobile and desktop.

Social

A Canva template for product posts, easy for the team to edit, with the Trustpilot score on every post. Alongside it, a review carousel and countdown posts for launches.

The problem

The old brand, across the logo, the site and social. It had two problems. It wasn’t consistent: two versions of the wordmark, an old-school script and a more modern cut, were used interchangeably across the site and social, so it was never clear which one was the brand. And it was red: in a league where red belongs to some of the biggest clubs, it read as taking sides. A Liverpool result posted in Squawka red could pass for the club’s own account.

The old brand: logo, homepage and two social posts. Note the two different wordmarks on the posts.

The call

We rebuilt the brand around purple, a colour no major Premier League club owns, so the brand reads as neutral to every fan. Everything else followed from that: a new “S” mark, a bolder sports type style, and a system that could flex from a mobile site to a matchday story.

The system

Matchday stories

Big, loud type for the moments fans react to: a late goal, an unbeaten run, a player name, a new podcast episode.

Social templates

37 templates covering every matchday graphic, from stat leaders and stat lists to line-ups and match previews. I built them as reusable Figma components and designed them to be used in Twenty3 Studio, where they pull in live Opta stats, so a two-person team could keep a large football brand on-brand every matchday without designing each post from scratch.

Before

After

Site

The same product, redesigned in the new system: news, fixtures and results, and the bookmaker pages that fund the site.

LinkedIn: one offer, three ways in

Every ad carries the same offer: 30 real players, results in two days, $2,500, and your money back if you learn nothing. Over three rounds I tried different ways in: one leads with the price, one with an argument every game team has had, and one with what the product actually shows.

Meta: an app, not a job

The Meta ads read like any consumer app: play new games, earn rewards. I made single-image reels and two carousel sets in the look of the app’s landing page, with a black background, heavy lowercase type and a holographic highlight.

AI video

To get UGC-style reels without a shoot, I built a pipeline: design a character, lock their look in a reference sheet, script the beats, then generate each beat as video with Seedance through Atlas Cloud. I edited the reels in code with HyperFrames, cutting every pause and showing the app on a phone beside the speaker.

Two rules: the characters explain the app but never claim results, so nothing reads as a fake testimonial; and the scripts never say “Emhance” aloud, because the model kept mispronouncing it, so the name sits on screen instead.

Stills from the three AI reels. The people are generated; the app screens are real.