Closed Esqarrouth closed 2 years ago
Store Page Redesign - Payment Page UI (Iteration 1) https://www.loom.com/share/8312d485d54e4d139995243f7a0ac3e2
For Review: @goktugyil @demiculus
Suggestion:
Remove the coins tab in the store page and just add the coins top up button in the header (None of the games that has in-game currency has a section of their top-up in their store page ex. Roblox, LittleBigSnake)
Redesign the store cards a bit, I know the cards has been approved already but checking some store tabs in other games and game platforms such as GOG and Steam shows that we're not following industry standard.
Remove the coins tab in the store page and just add the coins top up button in the header (None of the games that has in-game currency has a section of their top-up in their store page ex. Roblox, LittleBigSnake)
A lot of mobile games have it in their store as I've seen
Redesign the store cards a bit, I know the cards has been approved already but checking some store tabs in other games and game platforms such as GOG and Steam shows that we're not following industry standard.
Feel free to suggest updates with reasons but focus on the subscription more. Make sure you're modularizing and not doing everything at the same time.
I agree w gokus 1-2-3-5, not sure about 6 that needs a/b testing to see which method is more effective.
For this, make the background cover the button as well
- Header coins: If coins at top is going to lead somewhere, instead of just opening a coin buy popup, it should take to store and show the coin popup
not sure about 6 that needs a/b testing to see which method is more effective.
Yes. But easiest and baseline is the store page. Popup is an abtest optimization future and it is harder to implement
Store Page Redesign Iteration 2 + Store Cards Redesign https://www.loom.com/share/c29c607268a347e19ec2be49760374ef
select payment methods:
Amazon Cart, many recommendations, info, buttons:
Amazon Checkout, item info, address, payment, shipment, place your order x2
nothing else:
Here is how it should look like. Design with this outline:
CLICK ME SENPAI
with stripe and xsolla and showing payment methods inside them
- Header coins: If coins at top is going to lead somewhere, instead of just opening a coin buy popup, it should take to store and show the coin popup
not sure about 6 that needs a/b testing to see which method is more effective.
Yes. But easiest and baseline is the store page. Popup is an abtest optimization future and it is harder to implement
Agreed, keep the popup as abtest idea for store. @samgawaran create an a/b test ideas section somewhere. Suggest them when the time is right.
the buttons have small ? icons, which show a text field about the payment method
Add this to a/b test list
Store / Payment Design (Iteration 3) + Scenarios https://www.loom.com/share/bd64888cd9154e75b92233db102490cc
this is 13 minutes long. (a lot of stuff to show) I'll be adding timestamps for you guys:
00:00 - 00:28 (Added Leaderboards Beta
in Header)
00:28 - 05:00 (Main Prototype Flow) - For Goku and Demi Review
05:00 - 06:23 (Explaining old designs, not important)
06:23 - 08:42 (Scenarios for Store and Payment page)
08:42 - 12:10 (Answers to Feedback - 2x2 image sizes, popup consistency, etc.)
12:10 - 13:09 (Adding mobile versions and iteration 4 - not important)
I thought these were getting shorter :D
Please center the texts before I get a stroke 😄
@goktugyil I don't like that the payment options are Stripe or Xsolla. Payment options should be credit/debit, google/apple, paypal, etc. Isn't that what people should be clicking on? And redirected to the corresponding payment platform depending on their choice.
@goktugyil I don't like that the payment options are Stripe or Xsolla. Payment options should be credit/debit, google/apple, paypal, etc. Isn't that what people should be clicking on? And redirected to the corresponding payment platform depending on their choice.
hmm yes, it doesn't look as good as I hoped
Store / Payment Design (Iteration 3) + Scenarios https://www.loom.com/share/bd64888cd9154e75b92233db102490cc
this is 13 minutes long. (a lot of stuff to show) I'll be adding timestamps for you guys:
00:00 - 00:28 (Added Leaderboards
Beta
in Header) 00:28 - 05:00 (Main Prototype Flow) - For Goku and Demi Review 05:00 - 06:23 (Explaining old designs, not important) 06:23 - 08:42 (Scenarios for Store and Payment page) 08:42 - 12:10 (Answers to Feedback - 2x2 image sizes, popup consistency, etc.) 12:10 - 13:09 (Adding mobile versions and iteration 4 - not important)
Feedback:
Checkout feedback:
will last until
: get rid of that, no value. it is implicit informationConversation:
I am not sure about pack info in checkout page pack at left vs pack at top. thoughts @demiculus ? (https://www.loom.com/share/bd64888cd9154e75b92233db102490cc 5:40)
Check out the other sites. It mostly shows the amount not any other information. The user has already decided to make the purchase of the item, they don't need to see the item again, they need to see "how" they will continue the purchase.
I've read this article: https://www.oberlo.com/blog/trust-badges
@samgawaran add the latest one: secure ordering and money back guarantee badges to a/b test list
checkout page being a standalone page doesn't feel right, figure it out
how?
@samgawaran also add something like
We don't store any payment information
somewhere. it should be small and not taking much attention
Store Page - Iteration 4 https://www.loom.com/share/27786ce5829b43ab910a2c5ae0ba0a63
Checkout Page - Iteration 4 https://www.loom.com/share/119f52d230cc4b58b2822e91fa4eb765
I don't like these:
This looks nice https://i.imgur.com/lzklbCd.png Colors are also nice https://i.imgur.com/WkP9t4N.png
These names sound like skin categories, not as subscription pack names. Common is definitely bad. And I don't think there's enough difference between the words Epic and Legendary. But that can be decided later on, at this stage it's not important.
These are placeholders. Ignore the names. Don't iterate on the names
We should avoid using these * thingys, it's annoying for the eye to go up and down more than twice while reading the card.
This is common, could possibly be written even smaller
Players already read down to the bottom of the card and then back up to the subscribe button. Are you sure the Subscribe button being in the middle is a good idea?
I'm not sure about this either. What do you think @demiculus ? I think big green button below looks better
@samgawaran why were we changing the current store cards in hexs btw?
Store Page - Iteration 4 https://www.loom.com/share/27786ce5829b43ab910a2c5ae0ba0a63
Instead of All of previous tier and:
How about (Common Logo) Everything in Common
OR
the way chess/juan says, everything in one page?
maybe good idea to see both and decide?
Also while the previous hats were confusing and common, epic texts are a placeholder. I think the C white logo is not good. Can you come up with 3 tiers of catchy logos for the subscription plans? Chess has a good example. Maybe road/settlement/city?
Checkout Page - Iteration 4 https://www.loom.com/share/119f52d230cc4b58b2822e91fa4eb765
It's good that you're breaking these up. Also while showing the new design, a few seconds showing the old design makes sense.
I'm not sure about this either. What do you think @demiculus ? I think big green button below looks better
You put the button below if the player is buying a Saas product. You put the button above if the player is buying a game item. Saas product player thinks if they want those features or not. For games players buy out of feeling. Its a different process. But da fck I know. Look at the examples https://user-images.githubusercontent.com/90673012/163316844-a419ca02-2843-47c3-adee-7c953b512012.png @samgawaran you don't have enough examples. Try to see if you can find more examples, I don't trust chess.com worst case scenario we go with chess.com method, putting it at the bottom.
Checkout page shouldn't have decision making. They already decided. They want to pay. Make it easy to pay https://i.imgur.com/4DJGlvY.png
This image increases the amount of decision the player needs to make so its bad https://i.imgur.com/UCD6soT.png
@demiculus @JuanRoman77 @goktugyil
I'm moving some of the ideas from here to this https://github.com/colonistio/design/issues/16 and post it as screenshots instead of videos so it's easier to look at.
I'll just be posting finished iterations here so it would also lessen the vid duration
Main Flow https://www.loom.com/share/cd4aa9b533e94e0eafa08865d01b333b
Scenarios https://www.loom.com/share/4d4aa4e8afe646cf8a35679a783fb787
Not store related, but hover and selected state being the same is a smell. Let's create a different hover state. You can open a new issue about this since it is a general static page change, not store specific.
I'm not a fan of this hovering info. Too much text in too little space. @demiculus why did we decide to go with this? If you approve, I suggest we create a new design task about this hovering info thing later on
Put this in the bottom, example: https://github.com/colonistio/design/issues/5#issuecomment-1112429305
@demiculus business decision:
we could either keep it simple and have everything the same price regardless of the payment method.
This is what most companies do. Lets continue with this, unless you know examples of top companies who don't do this?
@samgawaran
Go through the rest of this to see what else is needed to do in this design session. For the rest of the ideas add them to https://github.com/colonistio/design/issues/38
Is this task completed?
Yes, the prototypes and finalized list is in: https://github.com/colonistio/design/issues/37
Prerequisite
https://github.com/colonistio/design/issues/5
Description
Current Store Problems To Solve:
Store Details:
Submission Checklist
Store Page
Requirements
Scenarios
Payment Page
Requirements
Scenarios
Stories
As a player... I want to
As a Colonist Team Member... I want to
Current Finalized List: