The idea with the second design would be that i just shows the pass image, and when you select it, it’d open like a detailed with the name, details about the pass, cost, buy button, etc.
The reason I think the second one could be better is cause I could fit all the gamepasses on the one page, where as the first ones player will have to scroll down to see all (thus not seeing all of them) but idk.
Wanting to do the best design to get players to actually see the gamepasses, see what they get with them, etc. and to get them actually buying them. Any tips.
Please note, I only used 3 for these examples. There will more than likely be a dozen or so gamepasses
I like the second design best, however you might want to include some indicator on which gamepass each one is (eg. Changing the icons to all be different and/or making mouse over display the name).
The second design introduces friction. You should always try and minimise the work the user has to do, especially if you want them to buy something.
I think people will be less likely to buy your passes in design 2 because they have to click each pass individually to see what it does and how much it costs and then click again to go back to the grid view. That takes longer than a flick of the mouse wheel.
If the icons in design 2 had names and pricing then at least players wouldn’t need to waste time to view passes they don’t want.
I like design 1, however I would make the close button fit in the corner of the page rather than part of it in the page and part out the page. Apart from that it is a very clean and user friendly design.
They are both great designs. I prefer the 2nd design because it’s mobile-orientated, if you’re utilizing UI constraints. Would look great across all devices as well!
I think this was already stated, but go with the first design. In monetization, it’s less likely you’ll make money off of a microtransaction if the player has to do work to find out what each pass does and how much it is. The first design eliminates that problem entirely. The second one creates it. Hiding the cost is also a bad idea as players will assume there’s something you don’t want to see - (personal experience) it’s a reason I don’t buy from synth websites who aren’t upfront with their pricing; they don’t want you to know how much they cost because they’re overpriced and customers wouldn’t even consider them if they knew the prices. I know I don’t represent everybody, but it is a psychological thing that players like to do less work to purchase microtransactions.
My personal favorite is the second one but as mentioned before the lack of easy viewability of the gamepass information is an issue, I also feel like the bottom gamepasses on the first GUI would be overlooked cause they’re so far down. Either way great work!
I can see you’ve took some inspiration from it with your UI, which is fine.
Both examples you created are fine, they just need a bit of touching up to make it look great. If you are wanting to stick with the second design, then I’ll list some things that should be changed/fixed.
Add some padding to the sides/top, they are nearly reaching the end of the frame. If you don’t want to do this, then just change the grid/list layout to the center.
Upload a higher quality/bigger size circle as the one right now is a bit pixulated around the edges.
This is purely my opinion, but the blue text is a little too dark for me.
I’d advise on shrinking down the buy button a tad, you don’t want it too small, but you don’t want it reaching the edges of the circles.
While others have said that just having images as gamepasses may decrease profit because players don’t find out what they’re getting, i’m not sure just how true this statement actually is. A lot of front page games now a days don’t describe what a gamepass does in game. You have to visit the website. I mean, Jailbreak doesn’t even offer the option to buy gamepasses from an ingame shop UI, you either get the roblox popup when you do something that requires a gamepass, or you have to buy it from the store on the website.
Anyway, best of luck with your UI, if you need any more help, just say so.
I believe that the first design would be a better option, as only images displayed (until the user clicks on it to find out what it does), can allow for more work, and more work means that less people would purchase the pass.
The first design displays a picture, as well as a description on what the pass does. I believe that this makes for an easy glance on what the pass can do, but also gives it a picture, making it pleasing to the eye.
