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.

Research

I started with the football apps fans already have on their phones: how they handle live scores, match pages and following a team. Then I looked at what Squawka could offer that they don’t, which came down to deeper stats and side-by-side player comparisons.

That shaped five tabs: Scores, News, Compare, Betting and For You. Starring a team, league or match feeds For You and the “Following” filter in the news.

Wireframes first

I wireframed every screen in greyscale before any styling, around 40 in all. Competitions, matches and teams share one page pattern, with tabs for matches, table, news, odds, player stats and team stats, so a fan only has to learn it once.

One match, eight tabs: overview, lineups, news, head-to-head, odds, match stats, player stats and team stats.

The same pattern for a competition.

Odds on, odds off

The biggest call was odds. Betting partners matter to the business, but not every fan wants prices next to their scores. A toggle in the header switches odds on and off across the app, so the same screens serve both.

Scores with odds off and on, annotated for the developers.

High fidelity

Once the structure was agreed I carried the new brand into every screen: the purple, the type, club crests and coloured stat bars. I presented the full set to the CTO and the Head of Squawka as annotated boards alongside the high-fidelity mockups.

From wireframe to final, and the mockups board from the presentation.

Four steps, four models

A character portrait from ChatGPT Image. A reference sheet that locks the look, made with Nano Banana 2, with the face masked on the full-body poses so only the headshot drives identity. A scene photo. Then video for each beat of the script with Seedance, through Atlas Cloud’s API, which generates the voice and the lip-sync in the same pass.

The cast, each in a fixed scene.

The Ad Studio

To make it repeatable I built the Ad Studio, a small web tool that writes the prompt for each step from a form. You describe the person once, list the poses for the sheet, block out the script beat by beat, and get ready-to-paste video prompts. Projects and a cast of characters save between sessions and export as files.

The four steps: character, sheet, script, video prompts.

Version 1: the room kept changing

The first ad cost about $10 for 29 seconds, and it looked wrong. Each beat was generated on its own from a plain studio photo, so the model built a new bedroom every time: the posters moved, a laptop appeared, the light changed. Lines were squeezed into fixed timecodes, so a 30-word line came out rushed and “webcam” became “webscam”.

Splitting voice from picture

Next I tried recording the voice first and animating the face to it with a lip-sync model (InfiniteTalk). That made room for a silent gameplay hook before anyone speaks, and for an ad that cuts between four characters.

The final reels

In November the pipeline made the reels for Emhance’s player app on Meta. Two rules shaped the scripts. Meta treats anything that sounds like a job as an employment ad, so the characters talk about an app, not pay. And after several tries the model still couldn’t say “Emhance”, so the name sits on screen instead.

I edited the reels in code with HyperFrames, cutting every pause and showing the real app on a phone beside the speaker.

The people are generated; the app screens are real.

Captain Spins: a mission, not a casino

Captain Spins was built around the Captain, a secret-agent character. Everything speaks his language. Promotions are missions with a brief to read, free play is a “Trial Mission”, and the best games are “Captain’s Top Picks”.

A red and blue shield monogram, tall condensed type and a hexagon motif tie it together, from the landing pages to the loading animation.

Casigo: let the games lead

Casigo launched in autumn 2020 and went the other way. Most casino sites are loud and crowded, so Casigo stayed clean and white and let the game art do the talking. The name joins “casino” and “go”, and the G doubles as a play button. The GO idea runs through the copy too: “Casino? No, CasiGO”, “GO Spin”, “GO Play”.

I designed the brand and the website: the logo, the palette, an icon set, the buttons, and the screens for logged-in and logged-out players on mobile and desktop. On mobile the navigation sits at the bottom, icons only, like the social and streaming apps players already use.

Vegas Lounge: an evening out

Vegas Lounge was the upmarket one: dark and calm, with a serif monogram and a handwritten “Casino”. The site is laid out like a venue. Game categories are rooms, from the Slots Hall to the Live Casino Parlour and the Table Room, each with a neon-style sign. The welcome offer is just as plain: “No Wager. No Fuss. 50% Cashback.”

The Vegas Lounge Planner took Casigo’s promotions calendar further. Each day of the month shows its offers as coloured dots, one colour per type, from cashback to tournaments.