Project Background
Location: Toronto, ON
Timeline: 4 Weeks
Project Type: Additional Feature Integration
My Role: End to End User Experience Designer
Research Methods: Competitive Analysis, User Interviews
Usability Testing methods: Unmoderated Remote Testing
Tools: Figma, Maze
Introduction
Valve Steam, a leading digital distribution platform for PC gaming, has been a cornerstone in the gaming industry, offering an extensive library of games to a vast user base. As a UX designer, my objective is to augment the user experience and encourage users to make more purchases on the Steam platform by introducing a compelling feature. The aim is to not only enrich the overall user experience but also drive increased revenue for the company. My focus for this project is the Steam Points System.
Problem Statement
While Valve Steam has implemented a detailed points system, a crucial gap exists, as these accumulated points are currently restricted solely to purchase profile enhancements. The absence of a point system that enables users to redeem their earned points for game purchases within the Steam Store represents a missed opportunity. Such a system can incentivize user loyalty, promote engagement, encourage repeat purchasing and reward high value customers leading to their retention with the platform.
Design Process
Competitor Research
User Interviews
Personas
Storyboards
Task Flows
Wireframes
Prototype
Usability Testing
Iterations
User Interviews
Interviews were conducted with 5 individuals, aged between 15 and 40, all of whom had prior experience in playing games and making purchases through the Steam store.
Interview Insights
Users desire a more user-friendly interface and reduced friction. Prioritize intuitive navigation, effective communication of UI changes, and streamlined flows.
Users show a strong interest in sales, discounts, and personalized content. Expand on options to explore discounts (points system could be very useful here).
Users of various backgrounds express interest in a system influencing loyalty, as most of the other gaming stores have such a system in place. Implement a transparent and engaging addition to the point system to incentivize purchases and build user loyalty.
Competitor Research
I conducted a thorough investigation into competitors of the Steam Store by exploring various forums and websites. Specifically, I focused on platforms such as the Epic Store, Ubisoft, Nintendo, and GOG. In addition to an in-depth examination of these selected competitors, I expanded my research to include other relevant sources. I gathered and analyzed these valuable insights to compile a comprehensive and strategic competitive analysis.
Some of the major insights were:
Leveraging Epic Games Store's success with exclusivity agreements and frequent sales, Steam could explore strategic partnerships to secure exclusive titles and introduce regular discounts.
Introducing a point system similar to those of competitors, where users earn points through game purchases and other activities, could incentivize Steam users to make more purchases and enhance user loyalty.
This multi-faceted approach, incorporating exclusive titles, strategic collaborations, and a compelling point system, could position Steam as a more engaging and rewarding platform for gamers, ultimately driving user growth and revenue.
(image can be right clicked to open in a new windows for a bigger view)
Personas
These personas were synthesized from the crux of research. The personas have the same characteristics as the interviewees. With the range of information obtained with regards to age and motivations, frustrations, I came up with these 3 personas.
StoryBoards
I created storyboards to showcase the impact of a points system on users' game purchases. The idea is to convey that, despite spending money, users receive something in return, and their loyalty is acknowledged through this system. This, in turn, contributes to improved user retention, enhanced loyalty, and ultimately, increased spending by the users.
2
Task Flows
Steam already has a very robust points system. It includes points and currency conversion, a points store, points history etc. I made these two task flows that will affect the purchase of games, the ability to add points to your checkout and the ability to remove these points while buying a game, as per user needs. Right now a user can not apply any points at any point during the checkout process. These task flows show exactly where in the purchase/checkout flow they will be able to apply the points or remove any applied points before making a purchase.
Feature
Here is how the Steam Points System will work towards purchases:
Steam points can be earned by using money to buy games/dlcs (downloadable content) etc.
USD = 100 steam points
Steam points can be used to apply discounts to or buy games, dlcs, etc, at checkout.
3000 steam points = 1 USD
Maximum amount that can be redeemed in a single transaction is
50 USD (150,000 steam Points)
Any purchase made using steam points does not generate more steam points.
Lo-Fi Wireframes
Users expressed a desire for a clear, straightforward and user-friendly process. They sought to utilize their Steam points when making game purchases. After researching various competitors and analyzing their app/website designs, I developed 3 sets of low-fidelity wireframes. I was inclined to proceed with the 3rd design as it provides clearer instructions to users on utilizing their points while allowing Steam to maintain control over the amount of points/discounts applied.
Hi-Fi Wireframes
I expanded on my initial lo-fi wireframes by designing hi-fi counterparts through Figma. This design iteration is specifically tailored to enhance user flow with a friendly, forgiving and intuitive user interface. The hi-fi wireframes offer a seamless integration of the existing points system into the purchase process. My design has been highlighted in red with red description.
Game Details (Steam store original screen)
Added to Shopping Cart (Steam store original screen)
Review + Purchase (Steam points can be added to purchase)
Review + Purchase (Information box for the steam points)
Review + Purchase (Drop down menu to select points to be applied)
Review + Purchase (Point to be applied selected, not yet applied)
Review + Purchase (Selected points applied, the discount can be seen in the summary of charges below and the points earned from the purchase are reflected accordingly. There is an option to remove these points if the user changes their mind)
Purchase Confirmation (Steam store screen showing new points gained after using points for discount)
Warning Message Screen (This screen was designed incase a user interacted with the drop down menu and did not proceed to click apply, this screen would not appear the the drop down menu was not interacted with)
Usability Testing
A prototype was constructed from the Hi-Fi wireframes to perform usability testing for the integration of steam points into the checkout/purchase process.
Tester Demographics:
Number of Testers: 7
Age Range: 15 to 36
Experience with Steam: All testers had prior experience with Steam.
Task Flows Tested:
Apply Steam Points to Discount and Purchase a Game.
Apply and then Remove Applied Steam Points Before Checking Out Your Purchase.
Testing Results
Apply Steam Points to Purchase Games:
Direct Success (Primary Path): 3 out of 7 users
Indirect Success (Secondary Path with Warning Message): 3 out of 7 users
Unfinished Attempts: 1 out of 7 users
Success rate: 86%
Remove Applied Steam Points Before Checking Out Your Purchase:
Direct Success: 7 out of 7 users
Success rate: 100%
Insights
For the "Apply Steam Points to Purchase Games" flow, half of the users missed the 'Apply' button after selecting points. They were then guided through the secondary path to complete the transaction with points.
The following iterations were needed:
Increase the visual prominence of the 'Apply' button to ensure users recognize it as the next step after selecting points.
Implement visual or interactive feedback upon point selection to reinforce the action and inform users about the next step.
Final Iterated Design
As per the results from the usability tests, iteration were done to put emphasis on the "Apply' button by making UI changes and ensuring visual feedback to catch the users’ eye. The design was implemented to make the Apply button appear as the intuitive next step and the button changes color on interaction to be more visible.
Initial Design for the Apply button
Final Design for the Apply button
Initial Design for the Apply button. Drop down menu interaction.
Final Design for the Apply button. Drop down menu interaction.
Final design once points have been selected. The field as well as the button are now highlighted in blue.
Initial design once points have been selected
Check out the Interactive Prototype 🡒
Outro
This project underscored the significance of user-friendly design, where visual cues play a pivotal role in simplifying navigation and ensuring users can effortlessly anticipate and locate the next steps in the flow. This principle of intuitive design emerged as a critical aspect, influencing the successful fusion of the existing point system into the game purchasing experience on the Steam store.