Cardplayer - Website Redesign for a flagship poker media brand

📌

CardPlayer is ClickOut Media’s flagship poker media brand, built on decades of authority. Publishing since 1988, it’s widely recognized as the world’s oldest poker magazine and online guide, carrying strong trust and SEO equity. After its acquisition by ClickOut Media, CardPlayer became a core commercial asset in a broader poker/iGaming portfolio. Its performance depends on organic search, editorial velocity, and affiliate monetization, making template scalability and content structure directly tied to revenue.

Over years of incremental growth, the product accumulated template sprawl, inconsistent patterns, and weak desktop mobile parity, increasing design debt and making further iteration costly. The redesign goal was to re-architect the template ecosystem, not to ship a visual refresh.

⏱️

ContractProject

5 months

🧑‍💻

ductTeam
Solo Designer, Solo designer, 1 Seo Director, 1 PM, Dev Team

🌐

Product
Poker Media Website

⛳

Objectives

Modernize CardPlayer’s legacy experience into a scalable, contemporary template system by consolidating repetitive layouts into canonical patterns, improving editorial hierarchy and scanability, restoring desktop mobile parity, strengthening brand authority and trust signals without diluting its DNA, and increasing delivery efficiency through clearer governance and implementation-ready structure.

📬

The missions

Audit and map the template ecosystem

Define reuse vs rework rules

Consolidate archives and listings into canonical patterns

Standardize hierarchy, spacing rhythm, and reusable blocks across core templates

Set responsive rules

Provide macro progress tracking for stakeholders

🌎

Work setup

Remote from Bangkok (GMT+7) with structured async handoff across EU timezone. Operational overlap with Singapore, Sydney, and Tokyo without schedule constraint.

Mission 1: System diagnosis and Scope control

📒

Context

The product had become a patchwork of templates added over years to ship fast. The outcome was predictable: the same user intent served by multiple layouts, unclear rules, inconsistent navigation across sections, and endless debates because no one had a system view. The real risk wasn’t “bad UI”, it was an unfinishable redesign.

CardPlayer’s redesign was a large template migration with multiple stakeholders and hard business constraints. At this scale, the main risk isn’t UI quality, it’s execution failure: unclear scope, inconsistent implementation, and the system decaying back into new one-off variants. Jira covered micro delivery, but it didn’t provide macro visibility on progress, priorities, dependencies, or remaining scope. In parallel, the design system risked becoming too heavy to maintain if component variants exploded in Figma.

🎯

My daily tasks

Audited the experience as a system: intents, page families, recurring patterns, and high-impact inconsistencies

Turned the audit into an executable plan: inventory, prioritization, dependencies, and delivery order

Defined a clear decision rule for every request: reuse by default, rework only when IA or navigation hierarchy is broken

Aligned Product, SEO, and Engineering on canonical templates and what should not be redesigned

Maintained a macro tracking layer (in parallel to Jira) to give stakeholders a clear view of scope, priorities, progress, and blockers

1. Established scope clarity and prioritization

📔 Context

The redesign started with a broad “redesign everything” ambition, but the team had no established method to manage a redesign at this scope (no roadmap, no definition of done, no sequencing).

🚨 Problem

No prioritization model -> unclear what to ship first and what could wait

Parallelizing everything -> delivery risk and stakeholder confusion

💊 Solution

Built the first full template inventory -> grouped templates by category (content, magazine, poker rooms etc…)

Introduced priority tiers (high/medium/low) -> sequenced delivery instead of redesigning everything at once

Defined “what ships” vs “what can wait” -> reduced scope drift and enabled clearer handoff planning

2. Etablished a desktop first strategy

📔 Context

At project start, the site wasn’t responsive and analytics showed desktop as the primary traffic driver. The business needed the highest-impact surface stabilized first.

🚨 Problem

Designing mobile early would have meant designing on unstable, inconsistent foundations

Risk of building two different experiences if parity rules weren’t defined from a stable desktop baseline

Scope explosion if desktop and mobile were rebuilt in parallel

💊 Solution

Stabilized high-priority desktop templates first to protect the primary traffic surface

Started mobile declination only once core desktop patterns were standardized, ensuring mobile was a consistent adaptation of the system rather than a separate redesign

Outcome: desktop-first became a data-driven sequencing decision, not a design preference, and reduced parity drift risk later.

3. Reworked global navigation and content categorization

📔 Context

The existing navigation was built from legacy growth, with overlapping categories and unclear content grouping. For an SEO and affiliate media product, navigation is a growth surface: it drives discovery, internal linking, and revenue routing.

🚨 Problem

Content categories overlapped -> weak orientation and diluted internal linking structure

High-intent surfaces (Tools, Guides, key commercial categories) were not surfaced clearly

Navigation structure didn’t reflect business priorities (what should drive traffic and monetization)

💊 Solution

Rebuilt the information architecture -> simplified and clarified top-level categories

Repositioned high-intent sections (Poker Tools, Guides, key commercial pages) to improve discoverability

Reduced noise and improved grouping -> clearer user mental model + stronger internal linking foundations for SEO

4. Defined unique vs secondary templates

📔 Context

Over time, CardPlayer added new “templates” in a fast-paced environment to ship quickly. Many of these pages were not truly unique products: they were small variations of an existing intent, created without a global view of the ecosystem.

🚨 Problem

Multiple templates delivered the same utility, differing only by minor layout decisions

No canonical baseline -> teams kept creating one-off variants instead of reusing patterns

Design debt compounded: inconsistency, higher maintenance cost, slower iteration

💊 Solution

Audited live templates and grouped them by user intent and content hierarchy to identify what was truly unique vs what was a secondary variation

Defined a canonical set of core templates and demoted secondary templates into controlled variants

Merged accidental variants back into the canonical system using standardized modules, hierarchy rules, and density constraints

📊

Measurable Results

100% of template scope mapped and categorized

Priority tiers established (high/medium/low) enabling sequenced delivery vs parallel chaos

Global navigation re-architected to align Information Architecture with high-intent growth surfaces

Mission 2: Canonical layouts and growth levers under monetization constraints

📒

Context

Multiple templates existed for the same user intent across archives and listings, fragmenting UX and multiplying maintenance cost. The goal was to modernize by defaulting to reuse, and reserving rework for cases where IA or navigation hierarchy was objectively inconsistent.

🎯

My daily tasks

Applied a reuse vs rework decision rule during reviews to stop one-off layouts

Designed canonical archive and listing structures and validated reuse across content families

Standardized list and card hierarchy, density, and pagination rules to reduce drift

Coordinated with PM, SEO, and engineering to confirm what could be consolidated without harming business constraints

Documented variation rules so implementation wouldn’t recreate template sprawl

1.Layour Rework : Negotiated monetization constraints without degrading UX

📔 Context

A major constraint was monetization: ad columns were a core revenue model. But the homepage also needed to perform as a credibility and discovery surface, not just an ad frame.

🚨 Problem

Two ad columns can compress content, reduce readability, and weaken perceived quality

Homepage needed to balance monetization with editorial authority and navigation to high-intent sections

Stakeholders were initially split between keeping the layout vs revising structure

💊 Solution

Negotiated a homepage-specific compromise: reduced right-side ad load to reclaim central content focus

Kept a monetization column where it mattered (best bonus / key redirects) while moving secondary items into the content flow

Accepted full two-column constraints on other templates where the trade-off was less harmful, preserving revenue mechanics while standardizing layout rules

2. Canonical archive/listing system (reduce template sprawl)

📔 Context

Archive/list templates represent the largest repeated surface area on SEO-driven media sites and drive a major share of traffic entry points and internal recirculation.

🚨 Problem

“Same intent, different template” across blog/news, press releases, topics, tournaments, authors, poker rooms, regions, CPTV, strategy

Inconsistent hierarchy, spacing, and card logic -> fragmented UX and duplicated dev effort

Any CRO/UI change required multiple passes across variants

💊 Solution

Standardized a canonical archive/list skeleton with predictable zones:

header/context + authority cues

optional sub-navigation

filtering/sorting (when relevant)

primary list zone

pagination/continuity rules

3. Growth opportunities: importing proven affiliate patterns

📔 Context

CardPlayer’s redesign wasn’t only about fixing inconsistencies. It needed to compete with modern affiliate poker ecosystems and maximize conversion surfaces already proven across competitor and sister sites.

🚨 Problem

The initial brief missed key templates and growth components that drive SEO and monetization (taxonomy archives, search results, etc.)

Under-leveraged authority and trust cues despite CardPlayer’s legacy

Homepage and template structures lacked some proven conversion patterns used across competitor affiliate products

💊 Solution

Imported proven patterns from competitor affiliate sites like:

📊

Measurable Results

9 archive families → 1 canonical archive/list skeleton (blog/news, press releases, topics, tournaments, authors, poker rooms, regions, CPTV, strategy)

Homepage layout simplified under monetization constraints: reduced right-column ad load to reclaim central content readability while keeping core revenue placements

Growth modules added beyond the initial brief: Google News subscribe CTA, newsletter capture placements, country guides/tools surfacing, magazine offer reframing

Authority cues systemized: trust blocks standardized with proof points (legacy, social signals, review counts) across high-intent templates

Missing templates identified and added to scope: taxonomy archives + search results template to remove SEO/growth bottlenecks

Mission 3: Rework key templates to reduce variations and page count

📒

Context

After defining canonical vs secondary templates in Mission 2, it became clear that some “unique” templates were generating disproportionate complexity: layered page variants existed to deliver the same intent, mostly due to legacy fast shipping and lack of global governance. These were not good candidates for controlled variation. The highest leverage move was to rework them into fewer, scalable skeletons, while reusing canonical modules wherever possible. The objective was to reduce template count, collapse variation layers, and improve discoverability and conversion pathways without relying on cosmetic changes.

🎯

My daily tasks

Used the canonical vs secondary template taxonomy to identify which templates truly deserved a dedicated model vs a modular variation

Mapped end-to-end user journeys (Magazine, Tournament, Region, CPTV) to spot where users were forced to bounce between pages to complete one intent

Collapsed multi-template flows into single scalable skeletons with modular sections (less branching, clearer rules)

Designed hub-level navigation structures (pillars/tabs/dropdowns) to improve discoverability and reduce variation layers

Reused canonical archive/list patterns inside reworked templates to avoid creating new one-off systems

Standardized core conversion modules (read online, download PDF, print subscription, key entry points) so monetization pathways stayed consistent

1. Magazine template rework

📔 Context

CardPlayer’s magazine experience supports a single user journey: discover issues, find a specific issue, then select it to view a summary (chapters) before reading online or downloading the PDF. The paid conversion lever is print delivery subscription, so the flow needs to be smooth and credibility-driven.

ℹ️ Latest issues and issue search lived in separate templates, with a third page for issue summary.

🚨 Problem

The journey was split across 2 different discovery templates (latest issues vs search/browse) plus a separate issue summary page, adding friction for one intent

Users had to switch pages just to move from discovery to selection to understanding what’s inside

Fragmentation increased variation layers, maintenance cost, and inconsistent UX patterns across the same flow

💊 Solution

Replaced the multi-template flow with one unified Magazine template that supports: latest issues, search/browse, and issue summary (chapters) in a single place

Optimized the selection UX by making the issue preview/summary immediate, reducing unnecessary navigation steps

Standardized the core actions (read online, download PDF, subscribe to print delivery) as consistent modules within the same template system

Reduced page/variant proliferation by standardizing how issues and related content are surfaced

2. Tournament template rework

📔 Context

Tournament content is high-intent and information-dense. Legacy implementation tended to split behaviors across multiple layouts and variants.

ℹ️ Tournament content was fragmented across multiple page types and navigation paths (news, winners, schedules, history), forcing users to bounce between templates to understand one event

🚨 Problem

Multiple competing layouts to cover tournament needs (news, winners, schedule, history, tournament type etc…)

Variation layers made the template hard to scale across tournaments and harder to maintain

Users and editors lacked a predictable structure, increasing drift over time

💊 Solution

Consolidated tournament behaviors into one hub-style template with explicit content pillars

Standardized navigation structure to reduce the need for separate layouts (News, Main Event Winners, Bracelet Winners, Schedule of Events, History)

Reduced variation layers by defining a single scalable skeleton with modular sections

3. Region template rework

📔 Context

Region browsing is a high-intent entry point (local poker rooms + regional news). The legacy implementation mixed content types and didn’t reuse a canonical listing patterns, creating inconsistency and poor discoverability.

🚨 Problem

No reusable archive/list pattern: region pages were treated as one-offs, mixing news and rooms without a clear structure

Switching context was heavy: region selection and content-type navigation (news vs rooms/tournaments) wasn’t predictable, increasing friction and variation layers

💊 Solution

Rebuilt the region experience as a structured index: pre-selected region landing with clear entry to the goal (regional news)

Added a simple content switch: tabs to move between News and Rooms (and related regional tournament content where relevant)

Restored reuse by plugging the page into canonical archive/list patterns + a single region dropdown for switching countries/states without creating new templates

4. CPTV template consolidation rework

📔 Context

CPTV existed through several separate layouts, fragmenting the experience and creating a high maintenance surface.

🚨 Problem

Different CPTV layouts for related intents, multiplying template pages and variant layers

Inconsistent entry points and navigation triggers encouraged drift and new one-offs

Any UI update required repeated work across parallel layouts

💊 Solution

Consolidated CPTV into a constrained layout system and reused canonical patterns

Standardized key entry points and navigation triggers (tour, videos, highlights) within one scalable model

Reduced template variation count by merging everything in 1 scalable skeleton with modular sections

📊

Measurable Results:

Magazine: 3-page journey → 1 unified template (latest + search + issue summary in one place) → fewer clicks to reach “read/download”, clearer path to print subscription CTA

Tournaments: multiple layouts → 1 hub template with fixed pillars (News, Winners, Schedule, History) → predictable navigation, easier to scale across events without creating new variants

Regions: mixed, hard-to-scan pages → 1 structured Region template (pre-selected region + clear tabs + canonical listings) → clearer information hierarchy with regional News and Tournaments surfaced first, making high-intent content faster to access than before

CPTV: parallel layouts → 1 constrained skeleton with standardized entry points (tour, videos, highlights) → fewer branches to maintain, consistent navigation across video content

System-level outcome: reduced variation layers on the highest-complexity surfaces, meaning future updates require 1 template change per surface instead of maintaining multiple competing layouts

Mission 4: Governance, delivery efficiency, and stakeholder visibility

📒

Context

As the redesign progressed, the main risk shifted from design quality to execution: misalignment between Product SEO, PM, and Design on what “done” meant and what should ship first, plus a lack of shared visibility on WIP. The team was not operating with a redesign program mindset, so decisions drifted and progress was hard to communicate.

In parallel, the Figma environment created delivery friction: the legacy and new versions were mixed in the same file, which polluted the workspace and made it hard to isolate the redesign the way I normally do. Branching was not adopted as a standard workflow, so I had to drive governance, protect handoff clarity, and prevent future rework.

Finally, system scalability became a senior-level constraint: at CardPlayer scale, component and organism design can explode into variants and slow down the entire file if not managed with explicit rules.

🎯

My daily tasks

Ran alignment loops between Product SEO Director, PM, and Design to lock scope, priorities, and a shared definition of “done” as the redesign evolved

Built a macro WIP tracking system to communicate progress, priorities, and blockers to stakeholders beyond Jira ticket-level visibility

Cleaned up and restructured the Figma workspace to reduce noise from the legacy version and keep the redesign implementable

Pushed for workflow discipline to isolate the new redesign workstream and stabilize handoffs despite limited branching adoption

Defined component scalability rules to decide when to use organism variants vs modular swaps (preventing variant explosion)

Documented implementation rules (canonical vs variants, module swap logic, components strategy) to reduce churn and stop design debt from coming back

1.Built macro governance on top of Jira

📔 Context

Jira tracked micro delivery (tickets, status, assignees), but the redesign was a program: stakeholders needed a macro view of scope, priorities, dependencies, and remaining work across multiples templates.

🚨 Problem

No macro visibility -> hard to answer “what’s done, what’s next, what’s blocked” at program level

Without a global view, teams tend to ship fast local fixes, creating inconsistent templates and accumulating design debt

Progress needed to be measured by effort, not only by number of pages, since templates don’t require the same level of work

💊 Solution

Built a Google Sheets tracker to model the redesign program end-to-end (Desktop + Mobile)

Tracked templates by priority tiers (High/Medium/Low) and weighted each template using effort points to reflect real workload

Used the tracker to align scope, sequencing, and stakeholder expectations alongside Jira execution

Used effort points to make iteration trade-offs explicit: stakeholders could see which templates consumed the most effort due to requested re-iterations, so scope changes and delays were decisions made with full visibility (not surprises).

ℹ️ Google Sheets tracking tool that I created to communicate about my work in progress. You can access the template 👉 here

🧮

Tracking metrics Calcul

Pages = number of templates fully completed

Effort Points = weighted workload per template (XS=1, S=2, M=3, L=5, XL=8, XXL=13)

Delivery % = effort completed ÷ total effort (more accurate than page count when templates vary in complexity)

2.File Structure & Naming Convention

📔 Context

When I joined, the Figma file contained the live production design system and screens. I couldn’t delete or refactor legacy styles/variables because the team still needed to ship production updates in parallel (ex: A/B tests on toplists). On top of that, the company plan didn’t allow Figma branching, so I couldn’t isolate the redesign in a clean branch the way I normally do. As stakeholders were reviewing the file directly, the lack of structure created constant confusion about what was production, what was validated for the redesign, and what was still WIP.

🚨 Problem

Legacy + redesign mixed in the same file -> high risk of using the wrong styles/variables and creating inconsistencies

No branching -> impossible to “freeze” handoff-ready work while continuing exploration elsewhere

Stakeholders lacked WIP clarity -> hard to tell status, priority, and what needed validation

File noise slowed delivery -> harder reviews, more back-and-forth, higher chance of mistakes

💊 Solution

Solution

Implemented an emoji-based naming convention to make WIP instantly readable in the page list: Status (● Not Started, 🛠 In Progress, 👁 Waiting for validation) and Priority (🔺 High, 🔸 Medium, 🔹 Low)

Introduced locked legacy style/variable conventions ‘🔒’ to clearly signal “do not touch / not for redesign use”

Structured pages and sections to separate production references from redesign workstreams

Retrospective improvement noted: would push for a dedicated redesign file or branch-enabled workflow to fully isolate new foundations and stabilize handoffs

3.Components & Memory Usage Optimisation

📔 Context

At CardPlayer scale, the risk isn’t “missing components”, it’s overbuilding organisms. Too many heavy organism variants make the file slow, hard to maintain, and difficult for another designer to take over. The goal was to keep the system reusable while keeping Figma performance and handover clarity high.

🚨 Problem

Organism variant explosion increases file weight and slows iteration

Large variant sets are hard to maintain, and updates stop propagating cleanly

Without a clear rule, teams either over-componentize (bloated file) or duplicate locally (system breaks)

💊 Solution

Keeping Organism variants under control

If 3–4 variants cover the need: keep controlled organism variants (file stays manageable)

Atomic & Molecular level optimisation

If variants would explode: build one master organism and generate variations by swapping molecules/atoms directly in context (“one master to rule them all”)

📊

Measurable Results:

455 effort points modeled across the redesign program (227 desktop + 228 mobile) to quantify total workload and scope

143 templates tracked end-to-end (71 desktop + 72 mobile) with a single macro view beyond Jira

Effort-based delivery reporting implemented: progress measured by weighted workload (XS–XXL) rather than raw page count

Iteration transparency enabled: effort points made re-iteration cost visible, so trade-offs and delays were decided with stakeholders in full awareness

100% WIP readability in Figma pages through emoji-based status/priority naming (Not started / In progress / Waiting for validation + High/Medium/Low)

Variant explosion prevented via an explicit scalability rule (controlled organism variants vs atom/molecule swaps), keeping the file maintainable and handover-ready

Key Result

🚀

CardPlayer redesign was executed as a template-system migration for an SEO and affiliate-driven business. I reduced template sprawl through canonical patterns, rebuilt high-complexity templates into scalable skeletons, and embedded governance so stakeholders could track scope and trade-offs in real time. Beyond restructuring, I identified and introduced additional monetization and growth surfaces through competitor benchmarking (proven affiliate patterns), then optimized UX to route users more intelligently toward revenue pathways (offers, subscriptions, tools, and high-intent content).

📈

Success metrics (post-launch) to control

Affiliate CTR on priority templates (homepage, reviews, tools entry points)

Organic sessions and SERP CTR on reworked hubs and archive families

Newsletter and Google News subscriptions as repeat traffic indicators

Outcomes

Scope governed at scale: 143 templates tracked end-to-end with 455 effort points (desktop + mobile) and priority tiers, giving macro visibility beyond Jira

Delivery at handoff (desktop): 66.2% completed (90/227 effort points, 39/71 templates) with 76.7% high-priority desktop completed (61/138 points, 23/37 templates)

SEO scalability: 9 archive families → 1 canonical archive/list skeleton, reducing fragmentation on the largest repeated surface area

Variation layers reduced on key hubs: Magazine/Tournament/Region/CPTV reworked into single scalable models instead of parallel layouts

Growth readiness added beyond the brief: trust blocks standardized, newsletter + Google News subscription hooks, tools/guides surfacing, and missing SEO templates identified (taxonomy archives, search results)

Process constraints

Paused before 100% delivery due to budget-driven team reduction, limiting reporting to system/delivery KPIs rather than live performance

No post-launch instrumentation yet: affiliate CTR, scroll depth, organic sessions and SERP CTR impact remain pending deployment

Snapshot at handoff: some high-priority templates were reopened for late-cycle iterations after stakeholder reviews.