Turning Overwolf's two-sided app marketplace from a download destination into an acquisition channel

The marketplace served people who already knew Overwolf, but it wasn’t attracting new users. I redesigned both sides of it, including discovery for gamers and listing tools for developers, increasing organic search share by 15 points and first-visit download CTR by 8, without weakening the desktop funnel.

Impact

Organic Search Share

+15pp

Organic share of app-page sessions

Mobile Bounce Rate

−20pp

Users leaving on mobile

First-Visit Download CTR

+8pp

First-time visitors clicking download

A redesigned App Store listing, with the rating, download count and supported games above the fold.

Project Snapshot

Timeline: January to December 2024
Role: Senior Product Designer (end-to-end individual contributor)
Team: PM, 2 Engineers, Developer Relations
Platform: Web (desktop & mobile)
Users: PC gamers, App developers

Other work

Developer platform

B2B · Web (desktop & mobile), Client (desktop) · 0 1

A shared token foundation that merged three design languages across 17 products and 4 brands

View case study
Developer platform

B2B · Web (desktop & mobile) · 1 2

A self-serve release pipeline for a multi-tenant developer platform, cutting DevRel release workload 75%*

View case study

* Observational figures, no A/B test.

--brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); }

Let’s build together

Senior, Lead, or Founding Designer roles.

Complex B2B and Design Operations preferred.

On-site or hybrid.