Homepage Matchmaking Design #1 - Game Mode & Timer Studies

samgawaran commented 2 years ago

Summary

I based the designs on @omarhurani 's PR: https://github.com/colonistio/katan/pull/7828 Omar also mentioned that there are some other tests to try out so I'll do additional studies in the future.

Polished the design and added a possible design when we add both SF and C&K

Comparison

Changed the tone of the cards to make it more blend with the blue bg more.
Added the info icon for game settings and descriptions
Retained current button scheme for player familiarity and reduce number of icons. Also changed some wordings to reflect what's based on the prototype

Details

Hover Animation

Homepage Matchmaking - Hover Sample

Added a sample animation here when the card is hovered. This won't be reflected in Mobile

Adding Seafarers and C&K

Timer Animations

Popup Timer (Default) Homepage Matchmaking - Popup Timer

"Widget" Timer Homepage Matchmaking - Widget Timer

I saw some games like Overwatch, Mobile Legends and Tetr.io uses a widget-type timer for matchmaking. That way, players can still explore the website while waiting to find their game.

Submission Checklist

[x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

samgawaran commented 2 years ago

for review: @demiculus @goktugyil @JuanRoman77

Esqarrouth commented 2 years ago

@omarhurani your project, you review. tell us when you need feedback

omarhurani commented 2 years ago

Overall, I like this design. I really like the timer widget, I think it is a superior way to handling this than the pop-up. Some notes:

Do we want the "Create Game" CTA to be this distinct? Or should it be Play vs. Bots?
I'm unsure about having Ranked and Unranked in different tabs, might need some testing.
I would use the trophy symbol in the ranked games tab/icons, to make them more distinct.\
Widget should have a cancel button no?

On the side:

I see the backgrounds of each are changed to add some variety, which I like, but it might look even nicer if the backgrounds combined into the base island.
Animation looks nice, but I feel it's a bit too slow at the ending. Maybe a more aggresive curve would feel better?

JuanRoman77 commented 2 years ago

I like the idea but I don't like this design.

Too many boxes
No clear hierarchy, eyes don't know where to go
There's a Play button and 4 boxes to click as well
The biggest and more eye catching card, is a store ad

To note:

Widget-type timer for matchmaking will only work if anything that the player clicks on, is opened in the same tab without canceling the queue (Leaderboards, Community, profile, Store). Game access points should be greyed out (Create Room, Play vs Bots, joining public rooms).
Public Lobby -> Lobby
No tabs for ranked/unranked
This requires exploring at least 5 different lobby ideas and designs, not just go with the first thing we put together by moving stuff around. Keep everything we know it's good from the current lobby (logo, header, profile, footer), and come up with new stuff for the middle part (ads, ctas, rooms list).

samgawaran commented 2 years ago

Closing this issue, will create a new submission for the new studies

colonistio / design