Shop revamp
The in-game shop is one of the most prominent features players associate with revenue generation in free-to-play online games. Beyond driving profitability, it helps players understand the structure and function of in-game items and set clear acquisition goals.
Duration
Appx. 6 months
Team members
1 game designer, 1 UX designer, 1 UI artist, 2 UI programmers, 1 QA
Tools
Figma, Miro, Confluence, Jira
Process
Discover
Playtests with Soft launch players
Across playtests, shop UI usability issues were consistently identified. Given that playtests are conducted within a limited timeframe covering the entire game, surfacing UI issues under this methodology means these problems are critical
Internal feedbacks
Monetization specialists needed to freely test diverse sales strategies by exposing a wider range of offers.
However, current shop structure limited the number of offers, restricting experimentation.
Underperforming KPIs
Monetization KPIs, including ARPU, were underperforming and required improvement.
While multiple factors were considered, team hypothesized that shop UI were contributing to this.
Key insights
✔️ Players struggled to navigate the shop
✔️ Players had difficulty distinguishing between offer categories
✔️ Players were confused as to whether the product was loot boxs or bundles
✔️ Conversion rate from Corridor (Offer List) to the Showcase (Offer Detail) was low
✔️ Conversion rate of final funnel from shop entry to actual purchase was low
Define
HOW MIGHT WE clarify navigation for Non-purchasing & purchasing players
while enabling monetization specialists to experiment more flexibly?
Comperative benchmarking
Key finding from comparison
-
R6M’s corridor (Offer list) used a tab functioning as a navigation bar
-
As the number of offers increased, the scrolling required to browse all items became excessive.
-
Offers could not be easily filtered by category, forcing players to manually scan for specific item types
-
-
R6M’s corridor lacks clear affordances that encourage players to explore offer details
-
R6M’s showcase (Offer detail) layout does not provide enough space to clearly present diverse item info.
Provisional Player journey map
It focused on journey when players enter the Shop from Main Lobby, excluding other entry points
Desk research - Human ergonomic consideration
Shop is one of the most complex features in the game, requiring dense info and interactions.
To ensure usability on mobile, layout and UI elements need to design with Mobile human ergonomics in mind.
-
Thumb-friendly zones were prioritized, especially for horizontal layouts, with primary interactions placed within the right-hand thumb reach.
-
Related touch elements were grouped closely together, minimizing touch travel distance.
-
Compared to PC, mobile screens are smaller and scanned at a glance, so non-interactive visual elements are prioritized in the center of the screen.
Design
Validation
Flow chart
Prototyping
High-fidelity prototypes were created to support test requirements.
-
Built only planned development specs in response to the production team’s request.
-
Offer presentation images and UI art suggestions required validation.
Solutions
Overall layout
Redesign to a Mobile-Friendly Layout
As-is
-
Horizontal scrolling was difficult to use with one hand.
-
Tabs and touchable elements were spread across the center, without considering left/right thumb zones.
-
Interactive elements were placed far apart.
-
Item info was displayed inconsistently across the screen.
To-be
-
Switched to vertical scrolling, allowing more space per gesture while keeping interactions within thumb-zones.
-
Navigation elements were placed adjacent to the purchase CTA, reflecting the natural user flow.
-
Left area was dedicated to item info, enabling flexible and consistent presentation of diverse data.
Enter the Shop
Using Tabs Properly for Scalability and Clear Hierarchy
As-is
-
Tabs did not represent a clear item hierarchy.
-
Although visually styled as tabs, they functioned as navigation, limiting the number of items displayed.
-
Term ‘Pack’ felt too similar to ‘Bundle’, causing confusion.
To-be
-
Tabs were structured based on player-recognized info hierarchy.
-
Tabs were used as true tabs, clearly separating sections and allowing more items to be displayed.
-
Term ‘Pack’ was retained for brand consistency, but ‘Draw’ was added to imply a loot box.
Explore the Shop
Visually distinct item type components with Consistent info
As-is
-
Collection and sing items were hard to distinguish.
-
Packs and bundles were difficult to differentiate.
-
Word placement, alignment, and use cases were inconsistent, making scanning difficult.
-
Related info was scattered.
To-be
-
Visual distinctions were clarified so item types could be recognized at a glance.
-
Pack (loot box) imagery was used to clearly differentiate packs from bundles.
-
Info placement was standardized.
-
Related info was grouped to support quick understanding.
Explore an Offer
Clear Separation Between Packs and Bundles on Landing Screens
As-is
-
First item in any offer category was preselected, often showing an MVP item and making it unclear which category offer belonged to.
To-be
-
Each offer category has a distinct landing screen, clearly communicating the category on entry.
-
Tapping the selected item again returns players to the landing screen, reinforcing category awareness.
Design iteration with Usability test
Validation with User Research team in Halifax
-
Proactively collaborated with User Research team to align on hypotheses and a prototype.
-
Tested with 10 mobile shooter players who played R6M and R6S and prior purchase history in F2P games.
-
Testing was conducted using Figma prototype above.
Primary goal was successfully achieved
-
Enabling players to navigate the shop effectively and clearly distinguish between packs and bundles.
-
Several minor visual issues were identified and later addressed during UI art polishing.
To develop in the future
Context-Aware Offer Display
Improving navigation provides a foundation for both players and monetization specialists,
but driving KPI growth requires going further. However, future iterations should consider player context when displaying offers, for example:
-
Showing ‘Most purchased first-purchase offers’ to players with Novice players.
-
Highlighting ‘Cosmetic collection offers for the operator with the longest playtime’ to Expert players.
Unify and Reinforce Item info component across the Game
Currently, item info is presented inconsistently across R6M features. Unifying these into a single, improved item component would help players better understand items throughout the game and positively influence purchase decisions. As players better understand an item’s value, desire increases.
Supporting features such as in-game previews before ownership or clear set info would further encourage collection and engagement.