End Game MMR Improvement - Showing Progress Bar Iteration #2 + Research

samgawaran commented 2 years ago

Summary

Made some changes based on @JuanRoman77 feedbacks here: https://github.com/colonistio/design/issues/129#issuecomment-1208978385 I agree with the feedback given and applied it here.

also checked how other AAA games do their ranked end-game screens.

Research

Every game shows a progress bar of some sorts. either for player exp or in their MMR
only Mobile Legends and Valorant shows a huge division icon in their ranked end-game screen. LoL and other games use small icons or just texts
shooter games like Apex and Valorant shows a breakdown of how they got their MMR. (we won't be showing the breakdowns but this is good to know)

Comparison

Reverted back to the current flow of how we present MMR changes other games also present their MMR change this way. I just changed the color of the green text for contrast issues. I also removed the icon, research suggests that more AAA games don't show a large icon in their MMR screens
simplified the details in the progress bar. It'll just show your current division and the next division while also showing how "close" you are to reaching a promotion or demotion.

Details

Changed the way some details are shown here, also for clarification:

Players that are 2nd place or below will always show Defeat

Victory / Defeat

Promoted / Demoted

I agree with Juan's comments. LoL uses promoted/demoted when a player ranks up on their divisions. I suggest we do the same

Platinum Division / Top Ranked Ranked Player

IDEA: Valorant-like End Game Screen

Want to try out some idea I had while researching:

Valorant shows the movement in the global leaderboards after each ranked game
Don't show other icons beside your current division.

Submission Checklist

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

samgawaran commented 2 years ago

for review: @demiculus @JeffdEon @JuanRoman77

JuanRoman77 commented 2 years ago

Current division -> Silver Division

Another idea could be dividing the bar in 3, showing current rank in the middle and lower/higher at the sides. I think this could be better UX, specially when players are in between divisions constantly going up and down.

Could you sketch this idea as well, @samgawaran ?

JuanRoman77 commented 2 years ago

Valorant idea: no.

samgawaran commented 2 years ago

@JuanRoman77 @demiculus @JeffdEon Just adding there here since its some minor changes:

Another idea could be dividing the bar in 3, showing current rank in the middle and lower/higher at the sides.

@JuanRoman77 do you mean something like this?

progress bar designs don't deviate much besides this horizontal bar. only LOL does their progress bar differently with the circular design

JeffdEon commented 2 years ago

I think he means something like this?

I'm not sure if I agree with this idea for end game screen tho. It might be nice to show something like this in the profile with the full view.

samgawaran commented 2 years ago

https://user-images.githubusercontent.com/58959537/184343952-8c82e56b-9bef-482e-9d61-c7c3a098616e.png

This design is not good for scalability, if we would add more divisions in the future this would make the progress bar complicated, also the progress slider in this design would be really small since it would take into account all of the MMRs of other players. +8 MMR wouldn't move that much

JuanRoman77 commented 2 years ago

That's why I said 3 divisions, previous current and following. That's scalable.

We could also show this in the profile.

colonistio / design