Profile Revamp #1 - Overview Tab Design Studies

samgawaran commented 2 years ago

Summary

as part of Goku's comment to improve the profile feature, I rechecked a bunch of profile pages in https://www.gameuidatabase.com/ and revisited some of the previous approved designs that I think could be improved. Overview is the most critical since its the "landing" page of the profile.

Drew inspiration from top AAA games like Apex, Fortnite, Overwatch, and games from gameui. I also checked mobile games like Mobile Legends to make sure it would work on mobile.

Previous Design

Details are separated via cards. Problem with this design is that not a lot of details can be shown in overview since we have a specific tab for ranked, history, items, membership etc.
It's just not too appealing to look at.
Didn't consider the ability to check past season(s) performance vs current season

Details

Chart + Listing Down Stats

IDEA: Let players compare themselves via the overview

an incentive to look at someone's profile (besides blocking them) is to check how their stats are compared to yours. I looked at a lot of examples of graphs/charts and I saw that having charts like these illustrates them the best visually instead of looking at plain text.
This will apply when you're viewing another player's profile
I tried showing six stat line so I can illustrate a hex-shaped chart (stats are still not finalized) and used our CTA colors so we won't be introducing anything new besides the chart.
Listing down stats would allow us to include more fun stats, like a fastest game, longest game, sheeps stolen etc.

Breaking down Win %

Breaking down Win % could help players see what game modes players are good at. based on my exp playing ranked. I often wonder how I lose on players with 40%+ winrate then I checked their history and realize that they are playing a lot of 4P games which makes their 40%+ actually high compared to the 40% WR of a player who plays solely on 1v1
Accounts to both ranked & unranked games. We have a ranked tab for a more specific look

No Toggles + Hexed Shape Containers

I was inspired by looking at Apex Legends Profile, they don't show a toggle and show the account stats vs season stats. This could help the players identify whether they improved on a certain part of their game (ex. points per game) over the season vs the past seasons
I highlighted win% and points per game on the hex-shaped containers. we can change this moving forward

Other design studies with comparative chart

Stat Breakdown

Stat breakdowns for each game mode may be shown better via a scrollable page though not a lot of games do scrollable profiles so I'm just showing these for future explorations

I recommend using a chart like the one we have in the studies. I saw it on MOBA's and simulation games, which are data-oriented games like ours. + it looks really gamey which is the objective of this design revamp

Submission Checklist

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

samgawaran commented 2 years ago

for review: @goktugyil

also tagging @demiculus @JuanRoman77 here, I felt these suggestions are a big design change to our previous discussions so I think you would want to see this also.

Esqarrouth commented 2 years ago

IDEA: Let players compare themselves via the overview

I really like the idea here. However is there a better tool to compare player stats? I don't think hex shaped chart is the best tool

Breaking down Win %

Nice

No Toggles + Hexed Shape Containers

Nice

===

There are many good things here, what I am thinking of is adding them all together and designing in a good way to incorporate them all.

However that might not be the best approach, when I think of the best approach, it might be to design all other tabs, and then overview tabs latest, with the best and most useful things we have used in other tabs.

What do you think?

demiculus commented 2 years ago

As I understand overview will be visited after other tabs are finalized so closing this issue.

@samgawaran while deciding the type of data to show consult competitive gamers. Send them screenshots and ask them if they could see only 5 data here which ones they would be. If they could see 10 data there which ones they would be. From the process you'll also run into a few people who are very smart and make a lot of sense send me links of those conversations.

Ask juan which communities to go into and ask about these stuff.

samgawaran commented 2 years ago

@goktugyil

is there a better tool to compare player stats? I don't think hex shaped chart is the best tool

This are the other comparison tools I found besides the chart. I'd still argue that having a hex shape chart makes it look more gamey but I have no problem using other comparsion tools besides the line graph

Agree with all of Demi's comments as well

colonistio / design