Module Equip - Off Road Mania
Concept UX for an arcade style off road racing game
Project Overview
This case study details my end-to-end UX design process for the Module Equip feature in Off Road Mania, an arcade-style, PvP off-road racing game. The feature is core to gameplay progression, enabling players to strategically equip, upgrade, and manage vehicle modules that directly impact race performance.
Tasked with delivering a flow that is both intuitive and deeply motivating, I approached this project as a lead UX designer would for a live production feature, despite it being part of an interview evaluation.
This case study reflects my leadership mindset, illustrating my ability to independently define UX strategy, synthesize complex player needs, and design scalable, player-centric systems that align with overarching game goals.
Understanding the Task
The brief required transforming a high-level specification into a greybox UI prototype for the Module Equip feature. The goal was to facilitate player interaction with their collection of racing modules by allowing them to:
-
Equip modules dynamically, respecting rarity and function
-
Upgrade modules when sufficient duplicates and currency are available
-
Passively expose locked or future modules to sustain player curiosity and engagement
From a lead UX perspective, I dissected these requirements and identified core user journeys and pain points. The constraints shaped my approach: a mobile-first, landscape-oriented interface, catering to a semi-casual audience, while maintaining PikPok’s characteristic OTT (over-the-top) style and collection-driven retention strategy.
I treated this as a live product challenge, focusing not just on visual design but on mapping player goals, minimizing friction, and motivating continual engagement through well-structured flows.
UX Strategy & Goals
I defined five strategic design pillars to guide all decisions throughout the project:
-
Clarity: The UI needed to offer immediate, unambiguous insight into what modules were equipped versus available inventory. Clear visual hierarchy and intuitive grouping were paramount for quick comprehension.
-
Progression: It was crucial to visually communicate module upgrade status and progression pathways. Players should feel a sense of accomplishment and ongoing opportunity at every visit.
-
Collection Drive: The system should spark players’ intrinsic motivation to collect rare and locked modules, using subtle teasers and visual hints to sustain long-term retention.
-
Responsiveness: Upgrade actions needed to be surfaced at the right moments with immediate feedback, reinforcing positive reinforcement loops.
-
Low Friction: To respect the quick-session nature of mobile arcade play, equipping or upgrading modules should never take more than 2-3 interactions, reducing cognitive load and streamlining decision-making.
These pillars were informed by the core player profile: goal-oriented racers with limited time but a strong desire for strategic customization and progression. The UX had to serve both casual drop-in play and deeper meta-game engagement.
Competitive Benchmarking
The design was explicitly inspired by two seminal titles highlighted in the project brief:
Mario Kart: Renowned for its dynamic, arcade-style racing with over-the-top vehicle abilities and fast-paced gameplay. Mario Kart’s effective use of power-ups and vivid visual effects informed my focus on delivering clear, engaging feedback and a playful presentation of modules within the equip system.
Clash Royale: A real-time PvP game featuring a trophy-driven league system and strategic collectible upgrades. This title influenced the core meta progression, particularly the tiered collection mechanics and league-based advancement, which I integrated to drive player motivation through progression and rarity tiers.
To further deepen my understanding of the deck-building aspect—which closely parallels the module equip experience—I also studied games like Strikeforce and Marvel Snap. These games offer streamlined, intuitive card/deck management systems that emphasize quick decision-making and strategic customization, which helped shape the flow and interaction design of the module equip screen.
These references highlighted a unique design challenge: blending the high-energy, accessible thrills of arcade racing with a layered, collection-driven meta-game experience. The best systems in these genres achieve this by balancing:
-
Clear and motivating progression paths,
-
Persistent engagement through teased locked and rare content, and
-
Minimal interaction friction that encourages player experimentation without overwhelm.
From these insights, I derived key design principles:
-
The visual and functional integration of performance impact and upgrade status is essential to keep players motivated and informed.
-
Visible teasers for locked and rare modules maintain anticipation and long-term engagement.
-
Simplified, efficient interaction flows support fast, confident player decisions and reduce cognitive load.
These principles directly informed my prioritization of visual hierarchy, feedback mechanisms, and modular design components throughout the project.
1. Card-Based Content Presentation
Modules, characters, and upgrades are consistently represented as collectible cards, making content highly scannable, tappable, and visually stylized. Cards convey rarity, level, and equipped state clearly—supporting both gameplay clarity and long-term player progression loops.
2. Clear Power & Stat Readouts
Every screen communicates power levels and stat impact upfront. Use of color-coded indicators (green = upgrade, red = locked), arrows, and sliders helps players instantly assess improvements or gaps—ensuring informed, confident decisions.
3. Upgrade Loops & Currency Visibility
Upgrades are typically 1–2 taps away. Games present multiple currencies (gold, gems, parts) prominently to reinforce monetization mechanics. Upgrade buttons are styled to draw attention, often accompanied by clear part requirements and progress indicators.
4. Modular Loadouts & Slot Systems
Loadout composition is central to gameplay. Whether it’s a squad or vehicle, drag-and-drop or quick-swap slotting is common—offering players control and clarity. Visual slot layouts foster a sense of ownership and strategic customization.
5. Progression Feedback & Locked States
Locked or upcoming content is displayed with greyed visuals, padlocks, or red frames, often accompanied by teasers ("Available in Rare Imports") to build anticipation. This approach supports retention through clear mid- and long-term goals.
6. Segmented Tabs & Smart Filtering
Content is organized through segmented tabs (by type, rarity, function), and smart filters improve usability at scale. These structures allow players to quickly find, compare, and equip items as collections grow.
Rapid Concepting
I initiated the design process with low-fidelity sketches to rapidly explore and validate multiple layout options and interaction flows without investing in high-fidelity mockups prematurely. This lean approach allowed me to:
-
Experiment with various arrangements of the equipped module panel versus the inventory grid, ensuring the player’s current loadout remains prominent yet easy to modify.
-
Define the upgrade flow—a streamlined tap to preview module details, with an intuitive confirm upgrade step that reduces cognitive overhead.
-
Incorporate visual treatment for locked modules, balancing curiosity with clarity on unlock conditions.
-
Plan for slot unlocking tied to league progression, making new opportunities immediately visible and actionable.
This phase was instrumental in aligning the flow logic with player motivations and minimizing future redesign effort, reflecting a leadership focus on efficient, validated iteration.
Module Equip – Greybox UI
Design Decisions and Reasoning
1. Ergonomic Interaction Design (Landscape Orientation)
-
Thumb-zoned interaction model: Left thumb governs car/module selection; right thumb handles module list and scrolling.
-
Ensures ease of use during prolonged engagement, common in F2P mobile loops.
2. Visual Hierarchy & Focus
-
Centralized car model grabs attention with a 15% screen share, reinforced by contextual stats.
-
Hierarchical placement flows from:
-
Car & stats
-
Equipped modules
-
Module collection
-
-
Reinforces the object of customization as the visual and functional centerpiece.
3. Card-Based Module Collection
-
Modules presented as collectible cards, using established UX metaphors:
-
Tappable, draggable, and rarity-coded (Orange = Common, Red = Uncommon, Blue = Rare, Violet = Epic).
-
-
Visually engaging and aligns with player expectations of progression, rarity, and gacha-style acquisition.
4. Progressive Unlocks & Motivational Triggers
-
Locked slots display league-based unlock requirements to inspire progression goals.
-
Clear visual indicators and tooltips (e.g., “Now you can equip an additional card...”) foster player aspiration and curiosity.
5. Stat Clarity & Feedback
-
Real-time stats reflect module changes with color-coded deltas (Green = improvement, Red = penalty).
-
Stats like acceleration, weight, nitro, etc. are immediately updated—supporting transparent decision-making.
6. Upgrade/Equip UX
-
Popup modules provide layered detail:
-
Left-aligned content for scanability (Level, Description, Current vs. Next stats).
-
Bottom-aligned CTA buttons for “Upgrade” and “Equip” reduce cognitive load.
-
Currency cost placed on button itself to minimize friction in decision-making.
-
-
Maintains a clear upgrade loop with visible economy mechanics.
7. Scrollable & Sortable Collections
-
Vertical scroll module list consumes 1/3 screen width with darker background to contrast focus areas.
-
Sort function improves discoverability (Level, Rarity, A–Z)—a UX necessity for deep collections.
Design Outcomes
-
Aligns with modern F2P game UX patterns while tailored to the context of vehicle customization.
-
Encourages collectibility, stat mastery, and upgrade motivation through visual feedback and streamlined interactivity.
-
Maintains user agency with clarity in cost, reward, and impact.
UX Flows
Module Card States
State 1: New Card Added to Inventory
-
A “New” badge with a distinct color is displayed on the card to make it stand out.
-
If the card is already equipped (in a module slot), tapping it opens a drawer with detailed information only.
-
If the card is in the available list, the drawer will also show an Equip option.
State 2: Not Enough Cards for Upgrade
-
The upgrade bar and arrow are shown in a neutral color, indicating that an upgrade isn’t currently possible.
-
Tapping the card opens a drawer showing card details and an Equip button.
State 3: Upgrade Available (Enough Duplicates)
-
When enough duplicate cards are collected, the arrow turns green, and a subtle CTA animation (bounce or pulsate) is applied.
-
A glowing green fill appears in the upgrade bar to highlight upgrade availability.
-
Tapping the card opens a drawer with both Upgrade and Equip options.
Module Card Equip Flow
1. Select a Card:
Tap a card from the module collection to begin the replacement process.
2. Open Card Drawer:
Tapping the card opens a drawer with two buttons:
-
Upgrade (shows cost if available)
-
Use (or an Info button if upgrade isn't available)
3. Highlight Selected Card:
Tapping Use highlights the selected card, dims the background with a black overlay to prevent accidental taps, and makes it easier to focus. Tapping outside cancels the selection.
4. Replace the Card:
Replace a module by either tapping or dragging and dropping the selected card onto the one in the module slot. Cards eligible for replacement will subtly animate (e.g., pulsate or bounce) to attract attention.
Module Card Replacement Flow
1. Select a Card:
Tap on a card from the collection of available modules that you want to use to replace an existing one.
2. Open Options Drawer:
Tapping the card opens a drawer with two buttons:
-
Upgrade: If enough currency is available, this allows you to upgrade the card.
-
Use: If upgrade isn’t available, the button will show info instead.
3. Activate Use Mode:
Tapping the Use button highlights the selected card and applies a dark overlay to the rest, helping to avoid accidental taps. Tapping outside the overlay will cancel the selection.
4. Visual Indicators for Replaceable Slots:
Cards in the module slots that can be replaced will display a subtle animation (like a pulsate or bounce) to indicate they’re interactive.
5. Replace the Module:
To complete the replacement, either tap the highlighted card onto the target module slot, or drag and drop it onto the card you want to replace.
Module Card Upgrade Flow
1. Select a Card:
Tap on a card from the collection of available modules that you want to use to replace an existing one.
2. Open Options Drawer:
Tapping the card opens a drawer with two buttons:
-
Upgrade: If enough currency is available, this allows you to upgrade the card.
-
Use: If upgrade isn’t available, the button will show info instead.
3. Activate Use Mode:
Tapping the Use button highlights the selected card and applies a dark overlay to the rest, helping to avoid accidental taps. Tapping outside the overlay will cancel the selection.
4. Visual Indicators for Replaceable Slots:
Cards in the module slots that can be replaced will display a subtle animation (like a pulsate or bounce) to indicate they’re interactive.
5. Replace the Module:
To complete the replacement, either tap the highlighted card onto the target module slot, or drag and drop it onto the card you want to replace.
User Testing
Once I was happy with the wireframes, all of them were interlinked in Figma to create a quick prototype. I invited my friends over to help me test the flow and screen interactions. Users were a mix of casual to midcore games and avid PC/Console gamers. Following feedback and insights were captured based on my chat with them while they interacted with the prototype.
-
Upgrade Clarity & Max-Level Handling: Module levels and progress are clearly shown, but the UI should visibly indicate when upgrades are unavailable (e.g., grayed-out buttons) and handle maxed-out modules gracefully.
-
Equip vs. Upgrade Feedback: The separation between equipping and upgrading is clear, but users should receive feedback when attempting redundant actions like equipping an already equipped module.
-
Stat Change Visibility: Stat adjustments are shown effectively, but negative effects should be highlighted more prominently through stronger color coding or small animations.
-
Module Slot Management: Slot availability is well communicated, yet the UI should guide users when slots are full by offering swap prompts or drag-and-drop replacement instead of failing silently.
-
Resource Constraint Handling: Upgrade costs are clear, but attempts with insufficient currency should be met with immediate, explicit feedback (disabled button, tooltip, or animation).
-
Complex Module Interactions: Rare or unique modules add depth, but the UI should warn or preview impacts when module abilities conflict or reduce performance.
The above feedback is something I direclty addressed as a part of the UI mockup creation step.
UI Art Mockups
The game’s meta took cues from Mario Kart for its fast paced arcade racing and from Clash Royale for its card collection upgrade system that enhances different performance vectors of the car. To match this mix of styles I adapted the UI to capture the bold and approachable look found in Supercell titles. I created a mood board of their games to study their clean layouts, chunky buttons, clear text, and engaging effects, ensuring the interface felt energetic, intuitive, and rewarding to interact with.
Based on the insights from the mood board, I chose a bright, vibrant color palette for the buttons, complemented by bold outlines and clean, minimalist icons to maintain clarity and visual impact. Starting from the base wireframe of the module/parts equip screen, I developed the UI further in high-fidelity mockups, translating the functional structure into a visually engaging interface.
During this process, I made several refinements to the layout and information hierarchy to ensure that key details were presented clearly and efficiently. These adjustments were aimed at enhancing user comprehension and interaction flow, making it easier for players to navigate, compare, and upgrade parts seamlessly. The result is a UI mockup that not only embodies the energetic, approachable aesthetic inspired by the mood board but also effectively communicates critical game information in an intuitive and visually appealing manner.
Typography
For typography, I wanted a style that felt bold, playful, and highly legible, in line with Supercell’s design language. I paired two typefaces to achieve this:
-
Eras Bold ITC – used for headers and key labels, giving a strong, geometric presence that commands attention while keeping a casual tone.
-
Lilita One – used for subtext, numbers, and secondary elements, with chunky, condensed forms that feel friendly and energetic while staying readable at smaller sizes.
This pairing creates a clear hierarchy while reinforcing the game’s arcade, over-the-top personality. Demonstrations of size, weight, and color variations show how the type system adapts across different UI elements while remaining cohesive.
UI Elements
This is the base UI screen mockup I designed which covers all the essential stats for the different UI elements for the player to equip different modules and upgrade their car to get the best outcome when they race with it. The stats display the increase in numbers with green color based on the currently equipped modules. Modules that have enough cards/shared to increase their level are denoted with their progress bar turning green with a shine animation effect and bouncing up arrow.
Upgrade Part Illustrations
For the Upgrade part illustrations, I drew inspiration from real-life car parts, simplifying and recreating them in Adobe Illustrator. The visual style was adapted from Supercell games, focusing on bold outlines, simplified forms, and vibrant colors. To further enhance the results, I leveraged ChatGPT by providing my base illustrations as references and asking it to refine them in line with Supercell’s UI style emphasizing strong outlines, clean shapes, and striking color palettes.
Module Equip Screen UI Mockup
This is the base UI screen mockup I designed which covers all the essential stats for the different UI elements for the player to equip different modules and upgrade their car to get the best outcome when they race with it. The stats display the increase in numbers with green color based on the currently equipped modules. Modules that have enough cards/shared to increase their level are denoted with their progress bar turning green with a shine animation effect and bouncing up arrow.