Profile Revamp - Overview Studies Iteration #2

[samgawaran]

Summary

When I started doing the profile revamp, the overview tab is the first tab I designed which is backward. The overview should be the last tab we should design as it is the summary of all the other tabs.

Did a number of studies based on the profile tabs of AAA games. I leave out some ideas which are okay like the pie-graph.

Research

I removed searching for stat websites like mobalytics and UGG. I figured that not all player want to see hardcore stats like that. Thats why AAA games just show the overview/summary of it. In place, I searched gaming platforms like Steam and Epic Games to check how they do their profile as well.

• AAA games shows Win Rate Games Played Hours Played and some list of achievements
• Most AAA games of them also show the players favorite character/avatar
• besides Battlefield V. all of them present information on containers
• Epic and Steam show achievements on the player's profile
• Players can also view their stats on past seasons
• Games with Game Modes like LOL, Overwatch and Mobile Legends, they show the general stats of the game mode

Previous Design and Iterations

• Pie chart is complicated and its the bulk of the studies in the first one. Goku mentioned that he liked the comparison feature, I suggest like Messaging and Gifting this could be planned after we released the profile redesign
• Still felt a bit bland, with no designs and images besides the profile sticky whereas most games has images on a lot of their sections
• No toggles like in Apex Legends won't work anymore as its been decided that players can view different seasons via the dropdown

Studies

NOTE: The general info on all of the studies are the same. all of the games I saw have an overview of the stats of each player and using a horizontal bar works best for us if we would add other sections like winrate, game modes, achievements etc.

For the general info, I added Total Games Win/Lose Winrate Items Owned and Membership I didn't use hours played and other metrics since I remembered Juan mentioned that it may make the player feel bad

For the dropdown, there should be an All Seasons option so players can view their overall game stat

Game Modes 1

• Added achievement space beside the username in the profile sticky. (Sample only)
• Added a game mode card for each mode.
• if the player hasn't played, they can click on a card and be directed to the matchmaking screen (if they clicked one of the expansions and they don't have them, redirect them to store, if they own or a member, redirect them to create room lobby)

Game Modes 2 + MMR Progress

• Goku and Juan suggest showing the progress bar of the player. I added a spot in these cards if the player played ranked on that game mode.
• if player is still on placement games, don't show a progress bar
• same logic in Game Modes 1 when a card is clicked
• hovering on the winrate info icon will say (Combines win rates from Ranked & Unranked modes) or something like that

Win Rate and Recent Games

• some AAA games like Dota 2 and Heroes of the storm show the player's recent games in their overview
• I followed the history tab design with Game Images to make it gamier, having bland recent games here will make the design not pop out.
• clicking any recent games will direct them to the history tab
• if player selected another season, recent games should show the last 5-6 games of that player in that season

Game Modes + Animated Avatar

• AAA Game show player avatars or their favorite characters in their profile. and almost all of them has an animation ongoing. the sample above can be changed like bouncing or some other simple animations (we can sell animations in the store in the future too)
• the Black City asset besides the avatar is the player's default color
• The membership icon in the BG is the player's current membership. we can also change this in other designs if we would focus on this study

Modified Game Modes + Animated Avatar

• same as above, we could an animation here, this is just a screenshot but the avatar should be animated.
• inspired from MOBA games, for the overview, we could only show the 3 player-favorite game modes in the overview tab. not every player will play all game modes so there are bound to be a lot of cards that will just show play now or emptied.
• made the general info smaller to fit the avatar. I removed Items Owned and Membership

Modified Game Modes

• version of the modified game modes without the avatar to make more space for 2 more game modes.
• We can separate Ranked and Unranked with these approaches since we don't need to show all of the game modes here. if players don't play an expansion, there's no incentives to show their stats for SF and C&K
• I recommend this format as I think this would be the most straightforward out of all the studies. no need to create animated avatars and such and at a glance, players can see what a particular player is, are they a hardcore Colonist player who plays ranked only, or are they casuals who prefer to play v bots the most

Related Submissions

• https://github.com/colonistio/design/issues/120

Related links

• https://github.com/colonistio/design/issues/139
• https://github.com/colonistio/design/issues/2

Submission Checklist

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

[samgawaran]

for review: @goktugyil @demiculus @JuanRoman77

this is a big one with around 6 studies. for Goku, you can just pass your initial feedback and for the iterations, I'll just tag Demi and Juan

[JuanRoman77]

1. Remove from Overview, the seasons dropdown goes only in the Ranked tab
2. Remove, add Karma back. I like this new style better, rather than the separate boxes. Keep it from now onwards, but don't change the stats included in it anymore.
3. Remove
4. What's this info icon?
5. You are mixing together Ranked and Unranked stuff. It's quite confusing. Decide if we want to show both things in the Overview, if want to combine Overview and Ranked, or remove everything from overview, or what.

Animated Avatar: no Recent games in Overview: no

[samgawaran]

4. What's this info icon?

it should be a tooltip that says something in the line of stats for both Ranked and Unranked games

5. Decide if we want to show both things in the Overview, if want to combine Overview and Ranked, or remove everything from overview

with the progress bar design here, I could probably squeeze it inside the ranked tab, I can do something like this instead:

let me know if this works so I can push the change on the ranked tab

[Esqarrouth]

Don't remove flag

[JuanRoman77]

Don't remove flag

Remove flag. Privacy + less toxicity.

[samgawaran]

FYI: https://github.com/colonistio/katan/pull/8065

Logan is already doing the profile sticky with the flags

Also, @JuanRoman77 @goktugyil

which study do you prefer? so I can go on and create the scenarios and focus on that.

[JuanRoman77]

FYI: colonistio/katan#8065

Logan is already doing the profile sticky with the flags

Fyi, he is removing them in upcoming pr

which study do you prefer? so I can go on and create the scenarios and focus on that.

I'll post about this later. In the meantime make sure to fix the font sizes in the designs. These are the current sizes we use in the single pages.

1. 1.875
2. 1.5