High-Fidelity Webstore 

To achieve a high-conversion environment, I focused on three pillars:
 

1. Aesthetic Fidelity 

2. In-Game Experience on the Web

I directed the design to ensure that every asset, button, and effects mirrored Predecessor in-game UI. If a player feels like they are still "in the game," the friction to purchase disappears.

3. Frictionless Checkout UX

"Two-Click" purchase flow. By integrating unified account systems, we allowed players to complete webstore transaction in seconds, with their items appearing in their game inventory after restarting the game.

Challenge 1: The "Trust Gap" in E-Commerce
 

Problem:
Players are often hesitant to enter payment info on a website compared to a trusted platform like Steam or PlayStation. If the webstore looks like a "generic shop," conversion drops due to a lack of perceived security and brand alignment.

Solution: Unified Visual Language.
I directed the implementation of a "Game-to-Web" design. By using the exact typography, iconography, and effects found in Predecessor, I created an immediate psychological link to the game. When the webstore feels like a 1:1 mirror of the game, player trust increases, resulting in a higher "Add to Cart" rate.
 

Challenge 2: Synchronizing the "Instant Gratification" Loop
 

Problem:
One of the biggest advantages of platform stores (Steam/Epic) is the instant delivery of items. In a DTC web environment, any delay between "Clicking Buy" on the web and "Seeing the Item" in-game causes player anxiety and support tickets.

Solution: Real-Time Transaction Feedback UX.
A "Success State" workflow that bridged the gap between web and game. Upon purchase, the web interface triggers a celebratory purchase complete that mimics the in-game behaviour. This visual confirmation reassures the player that the digital asset is already waiting for them in their inventory before they even relaunch the game.

 

Seamless experience on Desktop and Mobile:

Promo codes for discounts and rewards:



 

Visit the Predecessor Webstore:
https://store.predecessorgame.com/store