Profile Page Submission #26 - Friends Tab Iteration & Profile Sticky

[samgawaran]

Summary

Collated feedback from #75 regarding what additional details we can add for the Friends tab and created a design to match the specification.

Details

1. Removed the medals/achievements and replace them with a clickable icon. Current options are to Add Friend and Report Player
2. Added the name of the tab in the content area so its consistent with the other parts of our website
3. Added Activity for online players that shows what game mode they are playing or whether they are in the public lobby. If player is inside a private lobby, it will not show an action while they are in the lobby.
4. The players can spectate or join a game with their friend. I didn't add the ability to remove friends in the friends tab, they can go to that specific player's profile and unfriend them there. Same with what social media platforms do.

Related links

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

Submission Checklist

• [ ] I did not leave out anything that has already been implemented
• [ ] I considered mobile (table & phone) devices
• [ ] I considered horizontal & vertical mobile devices
• [ ] I considered small & large screen desktop devices
• [ ] I considered all possible use-cases of the design, including disconnects, page refreshes, scrolling, changing tab, hovering etc.
• [ ] I considered all related screens this feature might effect. (Landing page, Lobby, Room, Game, Store, Community, Press-kit etc..)
• [ ] I checked out data on Google Analytics, Indicative and Metabase to make the right decision.
• [ ] I considered C&K, SF, large maps and other possible future modes and maps
• [ ] I considered 2nd order effects
• [ ] All designs I submitted are final and for implementation purposes

[samgawaran]

For Review: @demiculus @JuanRoman77 @huaniebun @DyLightedCatan

[JuanRoman77]

What I was thinking was having these icons inside the arrow dropdown, not the icons up there. We might add achievement icons there, and there are other images and icons all around the profile page. So I don't think these will work. @demiculus what exactly did you have in mind?

[demiculus]

1. Such icons here work
2. Icon styles don't fit the rest of the theme, edit them
3. "they can go to that specific player's profile and unfriend them there" you should showcase that scenario as well
4. "I was thinking was having these icons inside the arrow dropdown" looks like we have space on desktop, we'll add them to dropdown when there is too many
5. The action buttons, they look like links. As you've probably realized we have started using 2 types of buttons a. Links -> direct to other pages b. Buttons -> do an action In this case it might be better to go with button but I'm not sure, try and lets see.

other than that its good.

[JuanRoman77]

@samgawaran try removing the background from the friend and block icons.

[demiculus]

@samgawaran

Add a dropdown but make sure to have add friend button in one of these places. You can try the different places. We want to encourage people to make friends https://i.imgur.com/yJYKw5B.png

[samgawaran]

Add a dropdown but make sure to have add friend button in one of these places. You can try the different places. We want to encourage people to make friends

I removed the badges as well

[JuanRoman77]

Add a dropdown but make sure to have add friend button in one of these places. You can try the different places. We want to encourage people to make friends

I removed the badges as well

Agree. We can decide whether to use that space later for important achievements or not. Not a priority right now.