search

colonistio / design

https://colonist.io
3 stars 0 forks source link

Design: Find game flow #115

Closed JeffdEon closed 2 years ago

JeffdEon commented 2 years ago

Description

Omar, now that the matchmaking system is more "mature" we feel like it's a good time to actually promote the feature and encourage people using it. That is, we want to improve the find game flow and start funnelling people into the play button so they start using the matchmaker/ranked.

User Benefits (if everyone on the site used the play button to find games instead of lobby):

So there are 2 parts to this issue:

  1. Increase amount of matchmaking games

  2. If for some reason ranked games are low, increase conversion from unranked to ranked (ranked is going to make more $$$)

You came forward with some great find game flows from Apex. Feel free to redesign anything in the find game flow in order to increase our numbers (ex: play button, when the lobby is shown, what is shown after clicking the play button, etc). For now come up with a few designs and flows and work with Sam on making mock ups. Have an implementation plan ready but don't start coding anything until everything is done, iterated on and finalized.

Reference: When we were working on the leaderboards this is the find game design we came up with: https://www.figma.com/proto/qoJZHxfBsMHtGRXNu5msuM/Colonist-UI%2FUX-Master-File?page-id=1381%3A57955&node-id=5541%3A335895&viewport=1797%2C-376%2C0.06&scaling=scale-down&starting-point-node-id=5541%3A335895

No need to use anything from this design, just sharing. Ideally you optimize the other parts, except what the button does after clicking, but if that is required to increase our matchmaking games, do that as well.

We'll see if your changes are successful or not from here: https://metabase.colonist.io/dashboard/18-game-summary?date_filter=past30days

Our ideal outcome is, in 2 months is 35% of players use matchmaking. This will be 5x our current matchmade games and will solve all the issues the system has at the moment. It might possibly allow us enough playerbase to add expansions to matchmaking also.

omarhurani commented 2 years ago

Thought of a bunch of approaches for this. In my opinion, the biggest issues are

  1. "The lobby is right there, why not use it?"
  2. The screen is blocked while matchmaking. If they player needs to do anything on the site, they have to open stuff in a new tab.

To tackle these issue, I took inspiration from the design of Apex Legends and Fortnite.

In my opinion, the matchmaking should be a part of the page, not something on top of it. When the player is queuing up for a match, instead of showing a dialog, the button itself will have the loading indicator, giving the player access to the rest of the website while they matchmake. Another approach is by having the game mode button select the game mode instead of directly putting you in the queue, with another "play" button that queues you up (should be tested).

The problem is that there is no other content for the player to view in the page. Most games that use this approach keep their matchmaking running in whichever page the user is in, but Colonist is not a single-page website, so this isn't easily achievable. I experimented around with the code base and there didn't find a way to enable a single-page like experience on the main page that wouldn't require huge changes. After some thought, I came to the idea creating a new view that contains a summary of other content we have available for the user, available for them to see while they wait for matchmaking. This content would also replace the lobby, so it tackles the first issue too.

home page

It would look something like this. In the center, we can use content that we already have to keep user occupied. On the side, there is a button that selects the game mode, and the "Play" button will queue them up. The loading indicator would display inside that button while it is finding a match. This button can also be adapted to different modes (in ranked, you can say "Watch Ad and Play". The MMR and ranking can also be displayed in there when it is selected). There are also buttons to switch the page to the lobby scene or create a lobby room directly. However, we have to see how this affects Cities and Knights and other game mode room fill speeds, we don't want to negatively affect paying customers.

I also find the gamemode selection popup a bit bland and lackluster, and also a bit confusing having 4 sections for 2 game modes with ranked/unranked. The texts are also very basic. I came up with this design:

select gamemode

I think this is a bit less confusing since each variation of the game mode is in the same section. The "Fun Maps" section can be replaced with any other content we want to promote, or remove it completely. It can also be split up vertically into mutiple sub-sections to include bot games. I'm not sure if this layout is suitable for mobile or not, we have to adapt it to that too.

I also changed texts up a bit and added the settings icon to every mode, which shows the game settings being used for the matchmaking to make it clearer on what you're going to play.

I also think that using the Catan island as an icon for 4-player is confusing, since both 2-player and 4-player games use the same map. I find that an icon similar to the 2-player mode with 4 avatars would be more suitable.

demiculus commented 2 years ago

@omarhurani this has a lot of moving parts. Some of them are more important than others.

Can you create a roadmap for this? When executed there should be no way we're doing backward improvement. The roadmap should be divided into phases that we will develop, push and test. Should include analytics and what to track for each phase. Should include possibility of reverting as well as trying out multiple versions for a phase.

Some stuff I notice:

samgawaran commented 2 years ago

These design ideas are a huge shift on our current signed landing page (currently Lobby) This is a good basis to move forward if we want the site to be primarily a matchmake-first before custom lobby

I can improve the UI but I agree with Demi that the goal should be clear first before I could do some iterations for the design.

Also:

I like the design ideas, we could definitely improve the UI for it. The current design does not provide space for SF and C&K game modes

Esqarrouth commented 2 years ago
  • The play button and the button above it look isolated, it should be clear they are the same (similarity principle might be used here: https://youtu.be/FryaH599ec0?t=495 )

That would fall in sams domain, after omar is finished with his part

Esqarrouth commented 2 years ago

Overall I like it, details need to be flushed out of course

  1. I'm guessing the middle content part will have links to profile, leaderboard, etc.. So person can look at their summary and jump in for details while waiting for a match
  2. Should Create Room be, Create Private Room or Play with Friends?
  3. How is the newly suggested "Select Game Type" screen different from the latest one we've designed? It would be beneficial to see them side by side
  4. Also it's better to reduce texts if we can from "Select Game Type" screen
  5. @JeffdEon will this kind of change cause any structural unsolvable bugs?
JeffdEon commented 2 years ago

The goal should be clear. What are we aiming to achieve with this. Whats the success & fail metrics?

We can add to this list but in general after pulling retention data ranked is higher. So converting people to ranked might increase site retention.

This is a good basis to move forward if we want the site to be primarily a matchmake-first before custom lobby

The theory is that matchmaking is the better system after everyone uses it. But we can't know that until it happens. In theory, more people in queue == less waiting, higher quality matches, filter out grievers, possibly higher retention.

JeffdEon commented 2 years ago

Sorry I'm a bit late to the show but this is my feedback. Likely some of it is repeated.

  1. These buttons don't look "joined". They don't seem like they act together. It think this is what Demi was pointing out.
image

How is the newly suggested "Select Game Type" screen different from the latest one we've designed? It would be beneficial to see them side by side

  1. Agree with this comment. What makes the new design "better" and what made you go with something like this?
  2. You say it would be a lot of work to let the people interact with the site while waiting. What is "a lot of work?" what would need to be changed.
  3. I'd need to also see the design with CK and SF added. It doesn't seem like it would take it in well.
JeffdEon commented 2 years ago

Other misc comments.

Talk w jeff to see if/when it makes sense to remove non-ranked game queues

It seems like unranked isn't necessary at this stage. I'm assuming the people that would use unranked are just using lobby now. I'd say keep unranked in until changes are done and numbers stabilize. Then we evaluate whether it should just be removed.

Current plan is to allow multiple game modes to be selected

At the beginning when I was designing backend architecture I wanted to maintain flexibility so I left in the idea of selecting multiple queues as a way to reduce wait time. If you don't care what you play you'll be thrown into the first thing that matches.

The backend is about 70% done. So not ready to implement but knowing what we know now I think this feature isn't necessary. It doesn't seem like other games do this and most people just stick to a single game mode. So this added unnecessary complexity to some UI designs in the past and made a bit of a mess in the backend code. At this point I don't see a reason to remove the code from the backend but unless we really think there's a benefit we can probably ignore multi-select for now. When designing UI maybe keep it in the back of your mind but that's about it.

The "Fun Maps" section can be replaced with any other content we want to promote, or remove it completely.

Just as an FYI. We added a fun map queue a long time ago and it was a pretty big failure. Not sure if you were around for that. I don't think we can do small custom things like this until our numbers are higher. But I agree a spot for fun "seasonal" or other temporary modes in the future mades sense. For now we don't need it.

JeffdEon commented 2 years ago

If for some reason ranked games are low, increase conversion from unranked to ranked (ranked is going to make more $$$)

Don't need to have designs now. But assuming funnelling people from unranked into ranked makes the most sense (higher retention, etc) what ideas do you have for achieving this?

omarhurani commented 2 years ago
  1. These buttons don't look "joined". They don't seem like they act together. It think this is what Demi was pointing out.
image

Yes, this is just a demonstration.

How is the newly suggested "Select Game Type" screen different from the latest one we've designed? It would be beneficial to see them side by side

  1. Agree with this comment. What makes the new design "better" and what made you go with something like this?

In my opinion, this design groups related categories into one area from which the player can select the specific variant to play (if you're in this area, you're just playing causal. If you're in that area, it is ranked). Also, in a lot of the games that I've seen, there is no mention of "unranked". If it doesn't have "ranked" specifically mentioned on it, it is not.

  1. You say it would be a lot of work to let the people interact with the site while waiting. What is "a lot of work?" what would need to be changed.

The current dialog blocks the site. If we use a different approach, any link the user clicks will change the site and they will be disconnected. This needs to be handled in a way to not let players accidentally close off the site (e.g. warning message before switching).

  1. I'd need to also see the design with CK and SF added. It doesn't seem like it would take it in well.

They can be in the place of the "Fun Maps". Also, if a couple more game modes are needed to be added, we can replace the rows with a grid that has more compressed information, as long as the icons and text are clear.

Other misc comments.

Talk w jeff to see if/when it makes sense to remove non-ranked game queues

It seems like unranked isn't necessary at this stage. I'm assuming the people that would use unranked are just using lobby now. I'd say keep unranked in until changes are done and numbers stabilize. Then we evaluate whether it should just be removed.

I don't think having a big "Play" button with no casual play potential is a good step, especially if we're making the lobby less easy to access.

Current plan is to allow multiple game modes to be selected

At the beginning when I was designing backend architecture I wanted to maintain flexibility so I left in the idea of selecting multiple queues as a way to reduce wait time. If you don't care what you play you'll be thrown into the first thing that matches.

The backend is about 70% done. So not ready to implement but knowing what we know now I think this feature isn't necessary. It doesn't seem like other games do this and most people just stick to a single game mode. So this added unnecessary complexity to some UI designs in the past and made a bit of a mess in the backend code. At this point I don't see a reason to remove the code from the backend but unless we really think there's a benefit we can probably ignore multi-select for now. When designing UI maybe keep it in the back of your mind but that's about it.

I'm not sure on how useful multiple queuing is. I'd assume that most people would like to play a specific game mode and not anything, especially that the play experience is significantly different between variants.

The "Fun Maps" section can be replaced with any other content we want to promote, or remove it completely.

Just as an FYI. We added a fun map queue a long time ago and it was a pretty big failure. Not sure if you were around for that. I don't think we can do small custom things like this until our numbers are higher. But I agree a spot for fun "seasonal" or other temporary modes in the future mades sense. For now we don't need it.

I added it as a filler that can be replaced with anything we find suitable, or removed completely.

If for some reason ranked games are low, increase conversion from unranked to ranked (ranked is going to make more $$$)

Don't need to have designs now. But assuming funnelling people from unranked into ranked makes the most sense (higher retention, etc) what ideas do you have for achieving this?

If we make more people click the "Play" button, more people will be exposed to ranked. I'm not fully aware of what is planned for ranked (other than leagues), but I remember something around seasonal awards. These should allow players to discover ranked and incentivize them to play it.

samgawaran commented 2 years ago

@demiculus should we close this?

demiculus commented 2 years ago

Yes. @omarhurani do you see anything here that we can abtest for a significant result so I can add to the abtest list?

omarhurani commented 2 years ago

Do we want to test out a different flow for selecting the game mode?

Now it is: Click button Downside: Need a button for each mode

Idea: Button to select gamemode (into a popup) > button to play. Play button remembers gamemode Downside: More steps

Test here would be if the extra steps will negatively affect numbers. If not, we can have a more flexible design that's not limited by the main page size. @samgawaran what do you think?

Testing widget-based matchmaking indicator, current is popup.

Downside: rest of website will be interactive, need to open all links in new tabs to avoid people leaving queue accidentally

Testing matchmaking indicator feedback, showing different steps or tips, just having something change on the screen to indicate something is happening.

samgawaran commented 2 years ago

Idea: Button to select gamemode (into a popup) > button to play. Play button remembers gamemode

I think this wouldn't be efficient in the current number of game modes we offer. I think games like CS:GO is doing this because they have 50+ combination of game modes/maps that it would be hard to show on a single screen without using tabs or scrolling.

We can do research on a more flexible system once we release more game modes on matchmaking.

widget-based matchmaking indicator, current is popup.

This would actually be helpful, something like Tetr.io and Overwatch matchmaking widget where they could still browse other pages of the site while matchmaking, but I think this could be better discussed in a new design issue for matchmaking widgets

JeffdEon commented 2 years ago

I'd say all of these sounds great but fall under "future optimization". What do you guys think?