Online-go.com: User Profile View Redesign

[RubyMineshaft]

This is a very rough draft to a solution for some mild confusion a small number of users have expressed over the color coding in game history as well as a potential solution to frustration that has been expressed over needing to scroll within the game history table.

I thought I'd open the discussion and see what you guys thought before spending too much time working on this.

Proposed Solution

Moving the Active Games, Game History, Reviews and Demos, and Activity sections into a single card with tabbed navigation could potentially solve both of these issues.

Of course, there are still decisions that would need to be made on other sections, such as the Users bio, mod section (I can't see this and don't know what it looks like, but most users don't see it so probably not important), trophies, and probably a few other things that are slipping my mind.

I am also not exactly a UI/UX designer. If we decide this is something we'd like to move forward with, any input regarding styling and positioning would be greatly appreciated!

Overview

The full profile would still look nice, clean and uniform

Game History

Game history would be brought much closer to the rank chart and the color legend. This would help to remove any potential confusion about what the colors mean. And best of all, _no scrolling needed_

Activity

The activity section, which was previously taking up a column of its own would be tucked neatly away within one of the tabs and freeing up space on the page.

[BHydden]

I think leave the mod section and user bio between ratings graphs and tabbed section as their own full width divs...

...possibly trophys could be pulled out above the tabbed section to be their own permanent div as well, but I could go either way on that one...

[BHydden]

I also think the tabs themselves need maybe a different shading to make it more obvious which one you're on, but for a first POC I like this a lot

[RubyMineshaft]

Oh for sure, I didn't want to go too in depth with styling and everything for now in case we decide it isn't something we want to do

[BHydden]

I hooked you up in the forums FYI :) https://forums.online-go.com/t/user-profile-redesign/23602

[GreenAsJade]

Important first question: how does it work on a mobile phone?

[BHydden]

Important first question: how does it work on a mobile phone?

You can simulate this for testing by making your browser window narrower and taller and it'll switch into mobile display.

[GreenAsJade]

Or by using responsive mode in chrome dev tools ;)

[BHydden]

Aww :(