Subscription - P3: Store Design Update

[Esqarrouth]

Prerequisite

https://github.com/colonistio/design/issues/5

Description

• We're updating the store design once more. The latest redesign wasn't complete, and implementation is on its way, but we need a redesign and implementation update soon
• Check out these and build on top of them
  • https://trello.com/c/KNbl4Ztk/22-design-store-page
  • https://github.com/colonistio/katan/issues/6358

Current Store Problems To Solve:

• [ ] Buttons on hover should have sound effects (come up with examples, sebastian will optimize it)
• [ ] Buttons on hover should have hover effects, lights (Not the shitty dark tint color) (use examples from AAA games)
• [x] Buy coins page should fit in a single screen, should not require scrolling

Store Details:

• [x] We are going to add Xsolla payment method in addition to Stripe
• [x] We are going to add subscription payment method in addition to coins
• [ ] Depending on AB test results, we will have 1-3 subscription plans. Details will come later, use place holders or your choice of contetn and design for 1, 2, 3 subscription scenarios
  • Scenario 1:
    • Option 1: Expansions, Maps, Ranked Games, Ads 3 months
    • Option 2: Expansions, Maps, Ranked Games, Ads 6 months
    • Option 3: Expansions, Maps, Ranked Games, Ads 12 months
  • Scenario 2: You come up
  • Scenario 3: You come up
• [x] After clicking purchase, we need a popup asking for their payment method,
  • [x] Stripe: Credit Card/Google Pay(Chrome)/Apply Pay(Safari)
  • [x] Xsolla: Paypal/Amazon Pay/Bitpay/Local Methods
• [ ] We want them to feel safe and secure, it should look professional, it should feel professional. We shouldn’t look like a scammy site
• [ ] I am considering adding a question mark about the methods and write a short sentence about our payment providers. Thoughts?

Submission Checklist

• [ ] I did not leave out anything that has already been implemented
• [ ] I considered mobile (table & phone) devices
• [ ] I considered horizontal & vertical mobile devices
• [ ] I considered small & large screen desktop devices
• [x] I considered all possible use-cases of the design, including disconnects, page refreshes, scrolling, changing tab, hovering etc.
• [x] I considered all related screens this feature might effect. (Landing page, Lobby, Room, Game, Store, Community, Press-kit etc..)
• [x] I checked out data on Google Analytics, Indicative and Metabase to make the right decision.
• [x] I considered C&K, SF, large maps and other possible future modes and maps
• [ ] I considered 2nd order effects
• [ ] All designs I submitted are final and for implementation purposes

Store Page

Requirements

• Clean up the UI to accommodate approved store UI design + add subscription (priority feature)
• Amount of Colonist Coins
• Item Prices
• Item Images
• Tabs for store categories
  • Subscriptions (real money purchase)
  • Expansions
  • Maps
  • Colors
  • Avatars
• "Owned" tag for purchased items
• Coins topup

Scenarios

• Player clicks on an owned item
• Player clicks on an item and they have sufficient coins
• Player clicks on an item and they don't have enough coins
• Player clicks on a subscription plan

Payment Page

Requirements

• Add Payment Method
  • Credit Card
  • Google Pay (for Google)
  • Apple Pay (for Safari)
  • Amazon Pay
  • Bitpay
  • Other Methods (Local to region/country)
• Pricing Info
• info on the item being purchased
• Buy Now Button
• Link to Refund Policy & Terms of Service
• Colonist Coins

Scenarios

• Player proceeds to purchase but failed due to lack of funds or bank/system error
• Player proceeds to purchase an item
• Player proceeds to purchase coins
• Player proceeds to purchase a subscription
• Player left the page without proceeding
• Player proceeds to purchase an item/subscription as a guest user

Stories

As a player... I want to

• Be able to purchase items/subscriptions easier with more payment options
• Be able to see what are the perks of subscription plans of Colonist so I can decide better
• Feel secure in sharing my personal information while paying for coins/subscription

As a Colonist Team Member... I want to

• Allow more payment options so players would have more access points on their preferred scheme
• Show the most expensive subscription plan/items better so the possibility of players purchasing them is much higher
• Make the store page look fun but still professional since players are here to top-up real money for coins

Current Finalized List:

[samgawaran]

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.

[Esqarrouth]

1. Subscription: Titles/headers seem very small
2. Subscription: Instead of a list of text, if we had something visual that explains the benefits like expansions and maps?
3. Secure payment page: I didn't like this, it doesn't reach the professional level I'm looking for. Look at more "secure payment pages" and come up with something better. I don't even know where I'm going to click? Maybe show first what you're paying for, then show huge Stripe and Xsolla logos, and then they should have their sub logos. so maybe cards that include Stripe or Xsolla. because player has 2 choices there. Also adding question mark circle next to them so we can tell more about the payment methods. We don't want to lose a single purchase because our checkout page or payment methods doesn't seem legit
4. What happened to the new card system? these are old cards?
5. Coins page: Why is terms of service on top of the actualy coins? is terms of service the number 1 thing you look for when you're purchasing coins? is it what we want the player to click on?
6. 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

[demiculus]

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

[Esqarrouth]

6. 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

[samgawaran]

Store Page Redesign Iteration 2 + Store Cards Redesign https://www.loom.com/share/c29c607268a347e19ec2be49760374ef

[Esqarrouth]

1. 2x2 and 3x3 image sizes seem to be the same size? what is the benefit of one over the other?
2. coin popup and subscription plan colors don't fit the website, why doesn't it fit the colors?
3. profile dropdown date doesn't provide value

[Esqarrouth]

select payment methods:

1. we don't have a reference number before they pay
2. this screen is rellly bad. the idea is not to get people to think about clicking stripe or xsolla
3. there is something called the last minute resistance, and if you give this page to customers, that ratio will be 100%
4. this page is called checkout
5. show length of package, not renew date
6. back to store button is not needed. why is the first, only and the largest button in the page is the NOT PURCHASE button? Lead the user where you want them to go to, in this case Stripe or Xsolla
7. it is a good idea to show nothing else except one button in that page, to get rid of last minute resistance. that's how amazon and all the checkout pages do it

Amazon Cart, many recommendations, info, buttons:

Amazon Checkout, item info, address, payment, shipment, place your order x2 nothing else:

[Esqarrouth]

Here is how it should look like. Design with this outline:

• Page has colonist logo
• Page has checkout title
• a lock icon somewhere indicating we are secure
• order review has: info, image, text about the thing they'll buy
• 2 huge buttons that scream CLICK ME SENPAI with stripe and xsolla and showing payment methods inside them
• the buttons have small ? icons, which show a text field about the payment method
• logos are not downloaded from random google images, they are official press kit logos: stripe xsolla
• and after you do all these, do 2 more iterations to make it seem professional and secure

[demiculus]

6. 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.

[demiculus]

the buttons have small ? icons, which show a text field about the payment method

Add this to a/b test list

[samgawaran]

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)

[Esqarrouth]

I thought these were getting shorter :D

[JuanRoman77]

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.

[Esqarrouth]

@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

[Esqarrouth]

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:

1. why are settler and colonist offers both green? the same color, while the last one is not? it is inconsistent, inconsistency is bad design. we could use blizzard rarity levels. legendary, epic, rare colors for the packs
2. I don't like the colors of this popup. it looks like shit. if all our other popups are that color, then find a new color for all our new popups. https://capture.dropbox.com/QcFe63YNI1AT6TxG https://capture.dropbox.com/pKn93K9Kxb6gHc3W
3. Why are you moving karma/coin/profile, it is out of the scope of this design

Checkout feedback:

1. Amazon is not showing date to make it seem legit. amazon's biggest concern is shipping the products and when the products arrive. that is why date is relevant for them. it is not relevant for us. get rid of all dates
2. will last until: get rid of that, no value. it is implicit information
3. The Stripe thing didn't look good. Try types of transactions first. visa, etc.. and then a small Powered by Stripe/Xsolla badge at the bottom

Conversation:

1. 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)
2. What is the reason of subscription plan pop up btw? why popup? why not in new page? why not in checkout page? why not in subscriptions page?

[demiculus]

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.

• We shouldn't use "Settler, Colonist, Founder" criterias. That uses extra processing power. Keep it simple, focus the user.
• Subscription plan popup -> remove it. All companies when they do yearly vs monthly they put it in the same page as toggle. We dont want an extra step
• checkout page being a standalone page doesn't feel right, figure it out
• The icon moving username left isn't ideal, find another place to put subscription icon https://i.imgur.com/Y3WktyL.png
• Change the subscription icon from hats to something else

[Esqarrouth]

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

[Esqarrouth]

@samgawaran Another possible a/btest: https://www.investopedia.com/terms/p/penetration-pricing.asp#:~:text=Penetration%20pricing%20is%20a%20strategy,attract%20customers%20away%20from%20competitors

[Esqarrouth]

checkout page being a standalone page doesn't feel right, figure it out

how?

[Esqarrouth]

@samgawaran also add something like

We don't store any payment information

somewhere. it should be small and not taking much attention

[samgawaran]

Store Page - Iteration 4 https://www.loom.com/share/27786ce5829b43ab910a2c5ae0ba0a63

[samgawaran]

Checkout Page - Iteration 4 https://www.loom.com/share/119f52d230cc4b58b2822e91fa4eb765

[JuanRoman77]

I don't like these:

1. 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.
2. We should avoid using these * thingys, it's annoying for the eye to go up and down more than twice while reading the card. 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?
3. Going back and forth to read and compare packs isn't ideal either. Unless space is really an issue (I see this happening on mobile, not in desktop), I believe all perks should appear inside each card

This looks nice https://i.imgur.com/lzklbCd.png Colors are also nice https://i.imgur.com/WkP9t4N.png

[Esqarrouth]

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

https://imgur.com/lzklbCd

@samgawaran why were we changing the current store cards in hexs btw?

[Esqarrouth]

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?

[Esqarrouth]

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.

---

1. Instead of credit/debit card, we need to see the visa, mastercard, american express logo, because according to research customers correlate them with safety. Also I'd like to show bitpay as well, we want catch the attention of crypto users
2. One problem is scrolling, we want all those info to fit into an average single page. One thing you can do is move the checkmarks to the side of the card and make the font/image smaller maybe? But find a way to keep it a single page
3. Xsolla icon, I'll email them and get one
4. The guarantee and secure signs look very scammy. Find better ones or remove those
5. renewal method/plan => subscription duration

[demiculus]

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

[samgawaran]

@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

[samgawaran]

Store/Checkout Iteration 5

• Assets and flow are based on what's approved on the A/B Test and Finalized List

Main Flow https://www.loom.com/share/cd4aa9b533e94e0eafa08865d01b333b

Scenarios https://www.loom.com/share/4d4aa4e8afe646cf8a35679a783fb787

[Esqarrouth]

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

[Esqarrouth]

Put this in the bottom, example: https://github.com/colonistio/design/issues/5#issuecomment-1112429305

[Esqarrouth]

@demiculus business decision:

1. we could either keep it simple and have everything the same price regardless of the payment method. or
2. have stripe method be cheaper than xsolla methods, since xsolla is charging more from us.

[demiculus]

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?

[demiculus]

@samgawaran

1. "Buttons on hover should have sound effects " I asked sebastian
2. "Buttons on hover should have hover effects, lights (Not the shitty dark tint color) (use examples from AAA games)" you can check out AAA games to see what they do.
3. "I am considering adding a question mark about the methods and write a short sentence about our payment providers. Thoughts?" do research & come up w suggestions

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

[Esqarrouth]

Is this task completed?

[samgawaran]

Yes, the prototypes and finalized list is in: https://github.com/colonistio/design/issues/37