[01]
Steam
Authorization
This screen is designed for user authentication via their Steam account, enabling access to their in-game inventory.
Objective:
Simplify the login process while ensuring data security.
UX Solution:
Minimize the steps required for authorization—users enter their credentials once and gain instant access to their in-game items.
Research Findings:
Competitors often implement multi-step authentication, which creates user frustration. This issue is addressed in this design through quick integration with the Steam API.
[02]
Inventory Loading and Item Selection
Users are prompted to select items from their in-game inventory to use as payment.
Objective:
Make the selection process convenient and intuitive.
UX Solution:
-
Sorting and filters to simplify item searches.
-
Display of the total value of selected items.
Research Findings:
Users often struggle to locate specific items in their inventory. To address this, search and filtering functionality was implemented.
[03]
Item Value Confirmation
This screen displays the total value of the selected items and allows users to confirm the payment.
Objective:
Ensure transparency in value calculations.
UX Solution:
-
Automatic calculation of item values.
-
Notifications if the total value does not meet the minimum deposit requirement.
Research Findings:
Competitors often fail to inform users about minimum deposit restrictions. This issue has been addressed by integrating notifications at the selection stage.
[04]
Payment Platform Integration
This stage handles the transfer of selected items to complete the payment process.
Objective:
Ensure the item transfer is secure and transparent.
UX Solution:
-
Integration with the external Steam API to manage the transfer process.
-
Display of progress at each stage.
Research Findings:
Users appreciate clear visualizations of progress. On this screen, each step is clearly marked to eliminate confusion.
[05]
Transaction Processing
This screen informs the user about the current transaction status, providing key details such as a unique Transaction ID and the estimated completion time.
Objective:
Notify the user that their transaction is being processed and reduce anxiety by providing clear information about the process.
UX Solution:
-
Display a step-by-step progress tracker highlighting the current stage (e.g., "Balance replenished").
-
Include the unique Transaction ID for added transparency.
-
Provide text indicating the maximum processing time and assurance of automatic balance updates.
Research Findings:
The screen helps retain users on the platform by providing a clear and accessible transaction status. Effective communication and an appealing design build trust and enhance the overall user experience.
[06]
Payment Confirmation
The final stage where the user is shown the payment status and transaction success.
Objective:
Ensure the process is completed with clear confirmation.
UX Solution:
-
Display a notification of successful payment.
-
Show a link to return to the main page.
Research Findings:
Positive feedback from users when the transaction is completed contributes to an improved user experience.
Stages of UX Research
User Analysis:
● Conducted an analysis of the needs and behaviors of users who actively use online gaming platforms and have in-game items in their inventory (e.g., via Steam).
● Identified pain points associated with traditional payment methods.
● Segmented the audience into those who prefer using gaming assets as an alternative to monetary transactions.
User Journey Research:
● Visualized the key steps users take when interacting with the "Pay By Skins" feature.
● Identified critical friction points, such as:
Difficulty selecting items.
Mismatch in deposit amounts.
Lack of visual payment progress.
Competitive Analysis
To identify best practices and potential improvements, an analysis of similar features on comparable platforms was conducted.
Competitor Solutions Examined:
● Reviewed interfaces of platforms utilizing "Pay By Skins" mechanics (e.g., trading platforms or exchange services).
● Identified strengths:
● Simple inventory connection process.
● Clear visualization of selected items and their value.
● Uncovered weaknesses:
● Lack of flexibility in item selection.
● Complicated payment confirmation processes.
UX Comparison:
● Analyzed navigation elements, step-by-step interfaces, and the visual presentation of the payment process.
● Highlighted areas for improvement:
● Simplifying payment stages.
● Adding visual cues and notifications about the current status.
Conclusions and Project Outcome
Based on UX research and competitive analysis, the interface for the "Pay By Skins" payment page was developed, which:
-
Simplifies the process of selecting and transferring in-game items.
-
Minimizes the number of steps required to complete the payment.
-
Ensures visual transparency and clarity at every stage.
-
Seamlessly integrates with the overall platform styling, enhancing the user experience.
This project aims to attract the gaming audience that prefers innovative and flexible payment methods.