Skip to case study
Product & design team

Wargames have no mascot. Their players still want the shirt.

Slitherine publishes strategy and war games — Panzer Corps, Field of Glory, Distant Worlds — under its own name and Matrix Games. We designed its first official merch store: delivery to Europe and the United States, prices in ten currencies.
Service
UX/UI design & CRO
VIEW SERVICE
The first screen: the current drop in a rotating banner, delivery and currency in the top bar, and search, account and cart in one strip.
Client
Slitherine Ltd
Industry
E-commerce · gaming merchandise
Website
The client
A strategy publisher since 2000, and its first shop for things you can hold
Slitherine, based in Epsom in the UK, publishes strategy and war games under the Slitherine, Matrix Games and Ageod labels.
2000
founded in Epsom, UK
200+
strategy and war games
10
currencies at checkout
5
game worlds in the first range
What we were asked for
An official store for the Slitherine and Matrix Games community, built from the client’s work breakdown: nine deliverables, from the home page to password recovery.
Screens
Home, catalogue, product page, cart, checkout, account, sign-in and search, with every state from an empty cart to a declined card.
Platforms
Desktop, plus phone versions of the home page, catalogue, product page and cart. Delivery to Europe and the United States only.
The brief, in the client’s words
“The strongest opportunities appear to lie in historical warfare themes, military-inspired designs, operational map aesthetics, and premium artwork connected to key franchises.”
From the client’s own competitor research: Bethesda, Riot and Blizzard sell characters and factions. Slitherine’s catalogue has none to sell.
Where we started

Merch stores sell heroes. These games have none.

From the client’s competitor research and notes on the first concepts
[ 01 ]
Bethesda, Riot and Blizzard build merch around a character or a faction. Slitherine’s games are units, maps and eras.
[ 02 ]
The launch range is small. Three large cards look premium; fifteen small ones look like a shop with little in it.
[ 03 ]
Concepts that stacked featured items, best sellers and a brand story on one page pulled attention off the merch.
One 1440 × 900 screen
Our first home page, before the scope was cut to the client’s work breakdown: a collection switcher, drop badges and fabric specs above the first product. The client kept the layout and took the rest out of the first release.
Who buys
Two buyers, one range
Men from 25 to 45 and older who play strategy and war games, and often collect what comes with them. From the client’s brief.
[ 01 ]
Plays one game
The player of one game
Has hundreds of hours in Panzer Corps 2 or Field of Glory II and wants something from that game, not the publisher’s logo.
Comes for
The game’s own items, their size, and the price in their currency.
Stops at
A catalogue that mixes every game, a size guessed from a photo, a total that changes at the last step.
Answered by
A Game filter in the catalogue, a size guide in a window, sold-out sizes kept with “notify me”, and delivery shown before payment.
[ 02 ]
Collects the publisher
The collector of the publisher
Has played Slitherine and Matrix games for years, already has an account on slitherine.com and buys several things at once.
Comes for
New items, the current offer, and a way to add one more thing without starting over.
Stops at
Another account to create, a code field that sends them hunting, not knowing where the parcel is.
Answered by
Sign-in with the Slitherine or Matrix Games account, a discount code folded in the cart, Quick add, and orders with four steps and a tracking link.
The bet

The merch sells the games, so the store stays out of its way.

[ 01 ]
Fewer, larger products: three or four cards in a row, one offer, one countdown with a real deadline.
[ 02 ]
Nothing hidden until payment: currency, delivery date and VAT are on screen from the cart onwards.
[ 03 ]
Every state drawn: an empty cart, a sold-out size, a declined card, a cancelled order.
Three rules, seven pages. Every screen below is one of them applied.
Stage by stage
What a buyer meets, stage by stage
One block per stage: the question the buyer arrives with and what we put there.
[ 01 ]
Home & search
The question it answers
Is this the official store, and is there anything for my game?
What we did, and why
A banner rotator for the current drop, a strip of promises — official merch, delivery to Europe and the US, secure checkout — new arrivals four in a row, and search that suggests products as you type.
[ 02 ]
Catalogue
The question it answers
Where is the merch for my game, in my size?
What we did, and why
Filters by category, game, size, colour and price, a count beside every option, chips that undo a filter in one click, and an empty state that offers the next step.
[ 03 ]
Product page
The question it answers
Will it fit, what is printed on it, and when does it arrive?
What we did, and why
A gallery within one screen, colour taken from the photo and size never guessed, a size guide in a window, sold-out sizes kept visible with “notify me”, and delivery and returns under the button.
[ 04 ]
Cart
The question it answers
What will I pay, and can I use my code?
What we did, and why
A drawer over the page: steppers, a discount code folded into one line, the saving under the total, and Quick add for items that go with the order, with the size picked in a small window.
[ 05 ]
Checkout & account
The question it answers
Is this safe, how do I pay, and where is my parcel?
What we did, and why
Contact, delivery and payment in three steps that fold into summaries; card, PayPal, Apple Pay or Google Pay; a confirmation page with the four steps of the order; and an account that shows them again with dates.
Stages 04 and 05 carry the order. Both of them are below, closer.
FOR ONLINE STORES · THE 90-DAY OFFER

We make your online store convert 80% better in 90 days, without a bigger ad budget.

When ads stop working and a bigger budget no longer brings more sales, we look at how people behave in your store, read the analytics, talk to your buyers, and rebuild the offer and the interface so that purchases repeat and the average order grows by 20%.
Your name*
Email*
Free audit
A result forecast for your niche
First result within 14 days

5.0

5.0 on Clutch · 15 reviews
All fifteen are five-star
C
D
T
P
ClipSwift · DEOZEN · Tandem · PickUpShoes
Clients we can name
Clutch Special Kudos
2024 · 2025 · 2026
Stage 04 · Cart
The whole order, without leaving the product
A drawer over the page instead of a cart page: the buyer checks the size, uses a code and adds one more thing while the product they chose stays behind the panel.
Discount applied
The code folds back into one line once it works, and the saving moves under the total. Quick add waits on the left edge.
Quick add, size chosen
1
2
3
Plays one game
[ 1 ]
Size is never pre-selected
Quick add opens a small window: colour taken from the photo, size left empty until the buyer picks it, so nothing lands in the cart in the wrong size.
Collects the publisher
[ 2 ]
A code field that doesn’t send people looking
The discount code sits folded above the subtotal. Whoever has one opens it; nobody else leaves the store to search for a code.
Both buyers
[ 3 ]
The saving under the total
The total already includes every discount, and “You save £11.00” sits under it instead of a line with a minus.
What we left out
A free-delivery progress bar. The store doesn’t offer free delivery, and a bar that never fills would promise something that isn’t there.
Stage 05 · Checkout & account
From paying to knowing where the parcel is
Checkout asks three things in turn and folds each into a line you can change. After that, the account answers the one question left: where the order is.
Checkout · payment
Payment, the third step: card fields on their own panel with a lock, PayPal, Apple Pay and Google Pay beside the card, and the total with the delivery date above the button.
Account · orders
1
2
3
Both buyers
[ 1 ]
Four steps, each with a date
Confirmed, packed, shipped, delivered: the same four steps the buyer saw after paying, now with the date of each.
Collects the publisher
[ 2 ]
Tracking appears with the number
The link to the carrier shows up once there is a tracking number. A cancelled order has no link at all.
Collects the publisher
[ 3 ]
Addresses kept for the next order
Several saved addresses, so a second order doesn’t start from an empty form.
What we left out
A required account. The guest pays first; saving the details is one password field on the confirmation page.
Slitherine Merch · What every decision on this page rests on
[ 02 / 04 ]
02 · Product page
[ 01 ]
How common the damage is
82%
of sites have severe usability issues on the product page
Baymard Institute · product page benchmark
[ 02 ]
How much of it gets read
20%
of the words on a page is what an average visit has time for
Nielsen Norman Group · how little users read
[ 03 ]
What one blocked size costs
68%
of sites won't let a shopper order an item that is temporarily out of stock
Baymard Institute · product page research

No mascot was invented. The store sells what the players already know: the units, the maps and the eras.

What changed
A store where there was none: home, catalogue, product page, cart, checkout, account and sign-in, every state drawn.
What we left alone
The merch itself. The range, the prices and the artwork are Slitherine’s; we designed the place that sells them.
What we would do next
Read add-to-cart and checkout completion after launch, then bring in what the first release set aside: collections by era and a wishlist.

More of our work on Behance

View on Behance

Review

5.0

1111111DizArm UX/UI Agency's work improved user retention and navigation, increased brand recognition, and the client's professional presence in the market. Moreover...

Bohdan Lyshchenko

Founder at ClipSwift

5.0

DizArm UX/UI Agency's work improved user retention and navigation, increased brand recognition, and the client's professional presence in the market. Moreover...

Bohdan Lyshchenko

Founder at ClipSwift

5.0

DizArm UX/UI Agency's work improved user retention and navigation, increased brand recognition, and the client's professional presence in the market. Moreover...

Bohdan Lyshchenko

Founder at ClipSwift

5.0

DizArm UX/UI Agency's work improved user retention and navigation, increased brand recognition, and the client's professional presence in the market. Moreover...

Bohdan Lyshchenko

Founder at ClipSwift

5.0

DizArm UX/UI Agency's work improved user retention and navigation, increased brand recognition, and the client's professional presence in the market. Moreover...

Bohdan Lyshchenko

Founder at ClipSwift

The first step is always a conversation

Fill out the form today and get a response within 1 hour. If we miss that window, you'll receive a complimentary product audit or concept development from DizArm.

0/5000
Budget* (Optional)
0/5000
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

I would be happy to provide additional information about the solutions developed by our team and assist you in selecting the optimal approach.

Bohdan Lyshchenko
[ CEO ] DizArm.Creative
hello.dizarm@gmail.com
We want to create innovation with you
How to structure process project manager?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.