Modiphius Entertainment
Conversion focused redesign for a leading tabletop gaming publisher
Conversion focused redesign for a leading tabletop gaming publisher
Conversion focused redesign for a leading tabletop gaming publisher
Agency
blubolt
Role
Head of Design
Type
Gaming
The Challenge
A universe of worlds, one broken system
Modiphius Entertainment makes tabletop role-playing games, board games, and licensed products for IPs including Fallout, Star Trek, and Mass Effect. But their Shopify store was outdated, customers struggled to find products, the UI undersold the quality of the games, and landing pages for each IP lived on disconnected platforms. They needed a site that could scale with a growing catalog while staying consistent and manageable for a small team.
Stakes: A failed relaunch would damage customer trust, and disconnected platforms would create further operational drag during peak sales season, impacting store performance.
Constraints: A 12-week timeline, combined with limited stakeholder availability and a late Black Friday launch decision.
Modiphius Entertainment makes tabletop role-playing games, board games, and licensed products for IPs including Fallout, Star Trek, and Mass Effect. But their Shopify store was outdated, customers struggled to find products, the UI undersold the quality of the games, and landing pages for each IP lived on disconnected platforms. They needed a site that could scale with a growing catalog while staying consistent and manageable for a small team.
Stakes: A failed relaunch would damage customer trust, and disconnected platforms would create further operational drag during peak sales season, impacting store performance.
Constraints: A 12-week timeline, combined with limited stakeholder availability and a late Black Friday launch decision.
The Insights
A loyal audience, resistant to change
Modiphius customers are die-hards. They know these games inside out. They're passionate, engaged, and loyal. They're also resistant to change.
Customer feedback and my own experience in this community made one thing clear: a dramatically modern redesign would alienate the people who love the brand most. The new experience needed to feel like Modiphius, not a generic template with their logo slapped on.
This insight shaped every decision that followed. Rich, engaging, high-performing, but recognisably theirs.
Modiphius customers are die-hards. They know these games inside out. They're passionate, engaged, and loyal. They're also resistant to change.
Customer feedback and my own experience in this community made one thing clear: a dramatically modern redesign would alienate the people who love the brand most. The new experience needed to feel like Modiphius, not a generic template with their logo slapped on.
This insight shaped every decision that followed. Rich, engaging, high-performing, but recognisably theirs.
The Key Decisions
The Key Decisions
Strategic decisions that shaped the outcome
Strategic decisions that shaped the outcome
Decision 1
Refined information architecture
Terminology matters in niche communities. "RPG" versus "TTRPG" signals whether you understand the audience. As someone who plays these games, I brought that knowledge into internal discussions.
We balanced commercial priorities (promoting sales, featured products) with user expectations (finding specific game lines, understanding product types). The navigation needed to serve both without forcing customers to think in business terms.
Result: Navigation that felt native to the community while serving business goals. The client recognised the authenticity immediately.
Terminology matters in niche communities. "RPG" versus "TTRPG" signals whether you understand the audience. As someone who plays these games, I brought that knowledge into internal discussions.
We balanced commercial priorities (promoting sales, featured products) with user expectations (finding specific game lines, understanding product types). The navigation needed to serve both without forcing customers to think in business terms.
Result: Navigation that felt native to the community while serving business goals. The client recognised the authenticity immediately.
Decision 2
Simplified filtering based on scroll depth data
The existing collection pages had 50+ filters across multiple accordions. Scroll depth data showed filters at the bottom weren't being seen. For new users, key filters like game type were buried below less useful options.
I recommended restructuring: game types and core categories at the top, filler filters removed. Less friction on the path to purchase. The data made the case; the solution was about prioritisation, not complexity.
Result: Cleaner collection pages that surface useful filters first.
The existing collection pages had 50+ filters across multiple accordions. Scroll depth data showed filters at the bottom weren't being seen. For new users, key filters like game type were buried below less useful options.
I recommended restructuring: game types and core categories at the top, filler filters removed. Less friction on the path to purchase. The data made the case; the solution was about prioritisation, not complexity.
Result: Cleaner collection pages that surface useful filters first.
Decision 3
Focused deliverables on high-impact templates
Shopify works with templates. A single product template can serve hundreds of SKUs. Rather than designing every page, I worked with the Project Manager and Head of Data to analyse page URLs and SEO crawler data, identifying which pages drove traffic and where we needed content flexibility.
This informed a template map showing exactly what we would deliver and why. After design, I walked the client through the content map so they understood how existing content would translate.
Result: Efficient use of design time. The focused approach created space for richer work on high-traffic templates.
Shopify works with templates. A single product template can serve hundreds of SKUs. Rather than designing every page, I worked with the Project Manager and Head of Data to analyse page URLs and SEO crawler data, identifying which pages drove traffic and where we needed content flexibility.
This informed a template map showing exactly what we would deliver and why. After design, I walked the client through the content map so they understood how existing content would translate.
Result: Efficient use of design time. The focused approach created space for richer work on high-traffic templates.
Decision 4
A flexible IP system that eliminated platform fragmentation
Modiphius manages dozens of IPs with distinct visual identities. Previously, landing pages for Mass Effect or Fallout lived on external platforms, disconnected from the store. Different team members knew different platforms. Nothing was consistent.
I designed a theming system within Shopify's native customizer: colour schemes per IP, locked typography and spacing for brand consistency, and animation presets under 100ms for performance. The system was built for future expansion.
Result: All landing pages in one platform. Mass Effect feels like Mass Effect, but still feels like Modiphius underneath.
Modiphius manages dozens of IPs with distinct visual identities. Previously, landing pages for Mass Effect or Fallout lived on external platforms, disconnected from the store. Different team members knew different platforms. Nothing was consistent.
I designed a theming system within Shopify's native customizer: colour schemes per IP, locked typography and spacing for brand consistency, and animation presets under 100ms for performance. The system was built for future expansion.
Result: All landing pages in one platform. Mass Effect feels like Mass Effect, but still feels like Modiphius underneath.
The Work
The Work
Content architecture
Tabletop games are information-dense. A starter box might include rulebooks, dice, character sheets, miniatures, and adventure modules. Customers need to understand what they're buying.
I designed a dynamic product page with clear structure:
Hero section: Media and key information at top
Dynamic cards: Player count, all-in-one vs requires core rules, jump-in-and-play status
IP background: Textured imagery (Fallout's weathered aesthetic, Skyrim's mountains) reinforcing brand without overwhelming
Rich description: Drawer buttons for FAQs and product details, video placement
Specs section: Rulebook pages, adventure pages, dice, miniatures
Digital products: Tied to dynamic content for physical/digital bundles
Each section shows only if content exists. The client builds richness over time without empty sections cluttering the page.
Tabletop games are information-dense. A starter box might include rulebooks, dice, character sheets, miniatures, and adventure modules. Customers need to understand what they're buying.
I designed a dynamic product page with clear structure:
Hero section: Media and key information at top
Dynamic cards: Player count, all-in-one vs requires core rules, jump-in-and-play status
IP background: Textured imagery (Fallout's weathered aesthetic, Skyrim's mountains) reinforcing brand without overwhelming
Rich description: Drawer buttons for FAQs and product details, video placement
Specs section: Rulebook pages, adventure pages, dice, miniatures
Digital products: Tied to dynamic content for physical/digital bundles
Each section shows only if content exists. The client builds richness over time without empty sections cluttering the page.
The Complication
Navigating stakeholder perspectives
Samantha (brand) was focused on brand experience and consistency. While Shareef and Apiyna (marketing) cared about copy, imagery, and day-to-day content management. Chris (founder) wanted the best experience but had specific opinions shaped by deep product knowledge.
I proactively walked each stakeholder through how the design would work as I built it, addressing questions before they became blockers. When feedback came from different angles, I challenged it with evidence while staying open to discussion. Buy-in came from demonstrating that decisions were backed by experience, not preference.
Navigating stakeholder perspectives
Samantha (brand) was focused on brand experience and consistency. While Shareef and Apiyna (marketing) cared about copy, imagery, and day-to-day content management. Chris (founder) wanted the best experience but had specific opinions shaped by deep product knowledge.
I proactively walked each stakeholder through how the design would work as I built it, addressing questions before they became blockers. When feedback came from different angles, I challenged it with evidence while staying open to discussion. Buy-in came from demonstrating that decisions were backed by experience, not preference.
Setting up long-term flexibility with content architecture
The template system went beyond visual design. Each template needed clear content rules: what shows, what hides, what's required, what's optional. Product pages needed to handle everything from a single PDF download to a collector's edition with miniatures, rulebooks, and accessories.
I created a content matrix mapping product types to template sections. The client could see which fields to populate for each product category. This wasn't just documentation for handoff. It was a tool for the client to maintain quality after launch, ensuring new products matched the standard without design oversight.
The matrix also informed development prioritisation. Sections that affected the most products were built first.
Setting up long-term flexibility with content architecture
The template system went beyond visual design. Each template needed clear content rules: what shows, what hides, what's required, what's optional. Product pages needed to handle everything from a single PDF download to a collector's edition with miniatures, rulebooks, and accessories.
I created a content matrix mapping product types to template sections. The client could see which fields to populate for each product category. This wasn't just documentation for handoff. It was a tool for the client to maintain quality after launch, ensuring new products matched the standard without design oversight.
The matrix also informed development prioritisation. Sections that affected the most products were built first.
The Complication
Navigating stakeholder perspectives
Samantha (brand) was focused on brand experience and consistency. While Shareef and Apiyna (marketing) cared about copy, imagery, and day-to-day content management. Chris (founder) wanted the best experience but had specific opinions shaped by deep product knowledge.
I proactively walked each stakeholder through how the design would work as I built it, addressing questions before they became blockers. When feedback came from different angles, I challenged it with evidence while staying open to discussion. Buy-in came from demonstrating that decisions were backed by experience, not preference.
Setting up long-term flexibility with content architecture
The template system went beyond visual design. Each template needed clear content rules: what shows, what hides, what's required, what's optional. Product pages needed to handle everything from a single PDF download to a collector's edition with miniatures, rulebooks, and accessories.
I created a content matrix mapping product types to template sections. The client could see which fields to populate for each product category. This wasn't just documentation for handoff. It was a tool for the client to maintain quality after launch, ensuring new products matched the standard without design oversight.
The matrix also informed development prioritisation. Sections that affected the most products were built first.
The Delivery
Development handoff
My Figma files mirror Shopify architecture: sections to sections, blocks to blocks, theme settings to design variables. Developers see the same mental model they'll build in code.
Handoff included:
Annotated designs with spacing, states, and responsive behaviour
Figma variables matching theme settings (outer padding, inner gaps, desktop/mobile variants)
Prototypes for key interactions (sticky elements, mobile menu)
Animation specs down to millisecond timing and easing
Content plan mapping every field to its source (auto-migration, existing data, new metafields)
The MoSCoW prioritisation was built from my annotations.
Design QA
Two-stage process. First, static review: HTML-to-Design plugin pulls the staging store into Figma for overlay comparison at each breakpoint. Second, interaction review: scaling behaviour between breakpoints, Customizer settings, transitions and animations.
This caught padding inconsistencies, icon display issues, and badge rendering problems before launch. QA wasn't checking whether development matched the design. It was catching the things that slip through when complex systems meet real content.
Content population
After the build, I set up templates with correct settings and populated example content. The client could see how the system worked in practice and replace examples with their own content rather than starting from scratch.
This reduced the gap between "design approved" and "ready to launch." The client wasn't learning the system with empty templates. They were editing working examples.
My Figma files mirror Shopify architecture: sections to sections, blocks to blocks, theme settings to design variables. Developers see the same mental model they'll build in code.
Handoff included:
Annotated designs with spacing, states, and responsive behaviour
Figma variables matching theme settings (outer padding, inner gaps, desktop/mobile variants)
Prototypes for key interactions (sticky elements, mobile menu)
Animation specs down to millisecond timing and easing
Content plan mapping every field to its source (auto-migration, existing data, new metafields)
The MoSCoW prioritisation was built from my annotations.
Design QA
Two-stage process. First, static review: HTML-to-Design plugin pulls the staging store into Figma for overlay comparison at each breakpoint. Second, interaction review: scaling behaviour between breakpoints, Customizer settings, transitions and animations.
This caught padding inconsistencies, icon display issues, and badge rendering problems before launch. QA wasn't checking whether development matched the design. It was catching the things that slip through when complex systems meet real content.
Content population
After the build, I set up templates with correct settings and populated example content. The client could see how the system worked in practice and replace examples with their own content rather than starting from scratch.
This reduced the gap between "design approved" and "ready to launch." The client wasn't learning the system with empty templates. They were editing working examples.
The Results
Measurable impact and lasting partnership
The launch period included Black Friday, so headline revenue isn't a clean measure. But 65% higher conversion and 46% higher order value point to genuine design impact, and a foundation the client trusted enough to build on with a monthly retainer for ongoing optimisations.
Conversion rate increase during the launch period, indicating stronger alignment between customer intent and purchase flow.
Conversion rate increase during the launch period, indicating stronger alignment between customer intent and purchase flow.
Average Order Value Increase, suggesting customers felt confident purchasing higher-value bundles and collector editions.
Average Order Value Increase, suggesting customers felt confident purchasing higher-value bundles and collector editions.
Let's get the conversation started.
I work with a small number of brands at a time so I can give each project the attention it needs. Whether you're planning a full redesign or looking to improve what you've got, a quick call is the easiest way to see if we're a good fit.
Get In Touch
