// slides-v2.jsx — Maclean's Education case study, V2 remix // Structure follows the V2 brief: Cover w/ stats → Challenge → Users → Role → Scope → Process → Outcomes → Reflection → End const { useMemo: useMemoV2 } = React; // ─── DESIGN TOKENS ────────────────────────────────────────────────────────── const TYPE_SCALE_V2 = { display: 132, title: 72, subtitle: 44, lead: 38, body: 28, small: 24, micro: 22, }; const SPACING_V2 = { paddingTop: 110, paddingBottom: 110, paddingX: 140, titleGap: 56, itemGap: 28, }; const PALETTES_V2 = { studio: { bg: '#F7F5F1', surface: '#FFFFFF', ink: '#1A1A1A', inkSoft: '#5C5953', rule: '#E4DFD5', accent: '#1A1A1A' }, editorial: { bg: '#FBFBFB', surface: '#FFFFFF', ink: '#0E1A2B', inkSoft: '#5B6878', rule: '#E4E7EC', accent: '#1F3A68' }, bold: { bg: '#FFF1F6', surface: '#FFFFFF', ink: '#1A1A1A', inkSoft: '#5C5953', rule: '#F0D9E2', accent: '#E5197F' }, }; const DENSITY_MULT_V2 = { compact: 0.85, regular: 1, comfy: 1.15 }; function useTokensV2(tweaks) { return useMemoV2(() => { const palette = PALETTES_V2[tweaks.aesthetic] || PALETTES_V2.studio; const accent = tweaks.accent || palette.accent; const m = DENSITY_MULT_V2[tweaks.density] || 1; const scale = Object.fromEntries( Object.entries(TYPE_SCALE_V2).map(([k, v]) => { const scaled = Math.round(v * m); const floor = k === 'micro' ? 22 : 24; return [k, Math.max(scaled, floor)]; }) ); const space = Object.fromEntries( Object.entries(SPACING_V2).map(([k, v]) => [k, Math.round(v * m)]) ); return { palette: { ...palette, accent }, type: scale, space }; }, [tweaks.aesthetic, tweaks.accent, tweaks.density]); } // ─── PRIMITIVES ───────────────────────────────────────────────────────────── function FrameV2({ tokens, children, style, padded = true, bg }) { const { palette, space } = tokens; return (

{children}

); } function EyebrowV2({ tokens, children, color }) { const { palette, type } = tokens; return (

{children}

); } function SerifV2({ tokens, children, size, style }) { const { type } = tokens; return (

{children}

); } function ContentV2({ tokens, kicker, title, children }) { const { space } = tokens; return (

{kicker} {title}

{children}

); } // ─── COVER ────────────────────────────────────────────────────────────────── function CoverV2({ tokens }) { const { palette, type } = tokens; return (

Case Study · 03 UX · IA · Sub-brand · Product

Maclean's Education From buried content
to a destination.

"Canada's most trusted education rankings had an audience problem — not with their content, but with where it lived."

); } function CoverStat({ tokens, v, l }) { const { palette } = tokens; return (

{v} {l}

); } // ─── DIVIDER ──────────────────────────────────────────────────────────────── function DividerV2({ tokens, number, kicker, label }) { const { palette, type } = tokens; return (

{number}

{kicker} {label}

); } // ─── 01 · CHALLENGE ───────────────────────────────────────────────────────── function ChallengeV2({ tokens }) { const { palette, type } = tokens; return ( Great traffic. Zero retention.}>

Maclean's Education rankings are Canada's most trusted — and they get traffic. But students who arrived for rankings left immediately. High bounce rates. Low pages per session. No pathway forward.

The content was living inside the main Maclean's feed: competing with politics and pop culture, competing for attention it couldn't win with a student audience. No connective tissue. No reason to stay.

The sub-brand itself was ambiguous. Was this "Maclean's Education"? Students called it "the Maclean's Guide." That gap was the signal.

Before — buried in the main feed

macleans.ca — education content mixed into the general feed

); } // ─── 02 · USERS ───────────────────────────────────────────────────────────── function UsersV2({ tokens }) { const { palette, type } = tokens; const tiers = [ { tier: 'Primary', name: 'Maya Chen', role: 'Grade 11–12 student', desc: 'High-stakes university decision mode. High intent. Seasonal.', color: '#E8C9A7' }, { tier: 'Secondary', name: 'David Tremblay', role: 'Parent', desc: 'Researching options alongside their kids. Wants structure and credibility.', color: '#A7C4E8' }, { tier: 'Tertiary', name: 'Priya Sharma', role: 'Institutions + advertisers', desc: 'Tracking brand presence and demographic targeting.', color: '#C9A7E8' }, ]; return ( One primary user. High intent. Seasonal.}>

{tiers.map((a, i) => (

{a.name.split(' ').map(n => n[0]).join('')}

{a.tier} {a.name}

{a.role} {a.desc}

))}

Method With limited research budget, I used synthetic personas anchored to behavioral analytics — traffic patterns, engagement data, seasonal spikes. The data confirmed: students arrive with intent. The experience wasn't meeting them.

); } // ─── 03 · ROLE ────────────────────────────────────────────────────────────── function RoleV2({ tokens }) { const { palette, type } = tokens; const owned = [ 'User research (synthetic + behavioral analytics)', 'Information architecture', 'Sub-brand visual strategy', 'Hub design & content taxonomy', 'Component design + dev alignment', 'Editorial buy-in & prioritization workshops', ]; const collab = [ { k: 'Head of Product', v: 'Scope, prioritization, stakeholder management' }, { k: 'One developer', v: 'Staging environment & WordPress template architecture' }, { k: 'Editorial team', v: 'Content taxonomy, art direction, operational buy-in' }, ]; return ( Sole UX designer. End to end.}>

Led a 0→1 microsite initiative — UX research, IA, sub-brand strategy, and product design — turning scattered education content into a navigable destination that grew engagement 35% while navigating a simultaneous backend migration.

What I owned

— {r}

Collaborated with

{collab.map((c, i) => (

{c.k} {c.v}

))}

); } // ─── 04 · SCOPE & CONSTRAINTS ─────────────────────────────────────────────── function ScopeV2({ tokens }) { const { palette, type } = tokens; const items = [ { k: 'Timeline', v: '5 months — November to April.' }, { k: 'Budget', v: 'Tight. Most editorial budget consumed by twice-yearly guide production.' }, { k: 'Tech', v: 'Simultaneous backend migration. WordPress constraints. One new component allowed.' }, { k: 'Legacy', v: 'Team PTSD from a prior failed rebrand — inherited Figma files that were "just Maclean\u2019s but a different blue."' }, ]; return ( Everything. With nothing.}>

{items.map((c, i) => (

{c.k} {c.v}

))}

Early lesson Never say "redesign." Never say "microsite." Call it what it is for the team in front of you: a new home for their audience.

); } // ─── 05 · PROCESS ─────────────────────────────────────────────────────────── function ProcessV2({ tokens }) { const { palette, type } = tokens; const findings = [ { n: '01', t: 'Research said "stay." The experience said "go."', d: 'Behavioral data showed rankings driving strong seasonal spikes with near-zero recirculation. High intent — zero pathway forward. Students weren\u2019t bouncing because content was bad. They were bouncing because the experience ended.' }, { n: '02', t: 'The naming question revealed the real problem.', d: 'I tested "Maclean\u2019s Education" as a standalone identity — and killed it. Students said "the Maclean\u2019s Guide." That wasn\u2019t a brand. That was a habit. The sub-brand needed to feel purposeful and distinct, not relabeled.' }, { n: '03', t: 'Skipping wireframes was the right call.', d: 'Given the team\u2019s history with failed redesigns, I moved straight from research to low-fi Maclean\u2019s variations — working inside the existing system. Editorial buy-in came from seeing it in context, not from abstract wireframes.' }, { n: '04', t: 'One new component. One big unlock.', d: 'Within constraints allowing one new component build, I designed a flexible CTA hero — pointing to subscribe, newsletter, or guide gateway. A small change that shifted the mental model: from news feed to destination.' }, ]; return ( Research said 'stay.' The experience said 'go.'}>

{findings.map((f) => (

{f.n}

{f.t} {f.d}

))}

); } // ─── 05b · ARTIFACTS ──────────────────────────────────────────────────────── function ArtifactsV2({ tokens }) { const { palette } = tokens; return ( From low-fi in-context to a destination.}>

{[ { src: 'assets/homepage-early-concept.png', label: 'Concept exploration' }, { src: 'assets/home-v1-final.png', label: 'Final hub design' }, { src: 'assets/mobile-medical-rankings.jpg', label: 'Mobile hub' }, ].map((a) => (

{a.label}

))}

); } // ─── 06 · OUTCOMES ────────────────────────────────────────────────────────── function OutcomesV2({ tokens }) { const { palette, type } = tokens; const rows = [ { cat: 'Business', metric: 'Pageviews & ad impressions', result: '+35%' }, { cat: 'Engagement', metric: 'Pages per session (overall)', result: '2.2' }, { cat: 'Engagement', metric: 'Pages per session (school exploration)', result: '3+' }, { cat: 'Retention', metric: 'Student Hub return visitors', result: 'Growing YoY' }, { cat: 'Reach', metric: 'Canadians reached via Maclean\u2019s Education', result: 'Millions (seasonal)' }, ]; return ( Buried content became a destination.}>

Category Metric Result

{rows.map((r, i) => (

{r.cat} {r.metric} {r.result}

))}

600,000 visitors in a single week — the biggest traffic week in the site's history, within a year of launch.

The 35% pageview lift is a direct business story: better IA = more ad inventory for a high-value B2B vertical. The 3+ PPS on school exploration confirmed the architecture was working — students weren't just arriving, they were exploring.

); } // ─── 07 · REFLECTION ──────────────────────────────────────────────────────── function ReflectionV2({ tokens }) { const { palette, type } = tokens; const lessons = [ { n: '01', t: 'Art direction belongs to editorial. UX behaviour belongs to product.', d: 'Establishing that split early saves weeks of misaligned effort.' }, { n: '02', t: 'Team trauma is a real constraint.', d: 'Naming, framing, and process language all carry baggage. Read the room before you open Figma.' }, { n: '03', t: 'Synthetic personas are legitimate research.', d: 'Anchored to strong behavioral data, they\u2019re a real method when budget doesn\u2019t allow primary research.' }, ]; return ( What Would I Do Differently}>

Fight harder for the school profile filter in v1. It was the right cut given constraints — but it was the highest-value descoped feature for our primary user, directly serving students at the most critical point of their decision.

What this project confirmed

{lessons.map((l) => (

{l.n} {l.t} {l.d}

))}

The framework gives Maclean's Education room to grow into personalization, in-article rankings, and deeper return-visitor features. The destination exists. The next phase is making it sticky.

); } // ─── END ──────────────────────────────────────────────────────────────────── function EndV2({ tokens }) { const { palette, type } = tokens; return (

Thank you Let's talk. Visit the site →

); } function ColField({ tokens, k, v }) { const { palette, type } = tokens; return (

{k} {v}

); } // ─── EXPORT ───────────────────────────────────────────────────────────────── Object.assign(window, { useTokensV2, CoverV2, DividerV2, ChallengeV2, UsersV2, RoleV2, ScopeV2, ProcessV2, ArtifactsV2, OutcomesV2, ReflectionV2, EndV2, });