Skip to content

Design exploration for user profile page

Solution

Here are the results of this exploration. We did explore different layouts for the page and the header but it's best to keep the header as is for now and allow further exploration in the future.

We're adding an 'Overview' tab which is the default tab when the profile page loads. We want to show a bit of everything here: activity, contributions and projects the user works on.

We also want to add a 'Technology' overview which would show which programming languages the user mostly uses. We were blocked on this in this exploration so we're skipping it for now. We need to see what is technically doable.

I'm calling 'Vision' what I think we should strive for. The MVC is what could be done as the next step.

Vision No technology No activity No activity, no projects MVC?
image image image image image

We also touched on pinning projects to the profile page and that will probably be looked at as a separate issue.

Vision

Other possible exploration for the user profile page:

  • add social information about the user (following, followers, 'Follow' button etc.)
  • add information about what the user is currently working on (issues, MRs etc.)
  • change layout of the header to make room for other information

Old issue description

This issue comes forth out of https://gitlab.com/gitlab-org/gitlab-ce/issues/22645#note_17986094

The current profile view has a couple of problems actually:

  • if a date is selected it shows the tasks done on that date right above the tasks which are most recent.. the only difference being the styling
  • if a date is selected, that date hasn't got an active state on the graph (there is on/off state so to say.. will become important later)
  • the current styling of your most recent activity is the same as on the activity page from a project or a group.. where it's important to see who did a certain task. However at this page, it will always be one person, making that information less of a priority.. if a priority at all. The design of "tasks at a certain date" is already much more in the direction of what we actually need on this page.
  • the information density is different between most recent activity and the activity on a certain date, making them inconsistent.

We should solve these problems by showing 1 kind of information at a time.. either your most recent activity or the activity on a certain date. This information should be toggleable/swicthed between by clicking a certain date on the graph.. by it having an active state on that certain date. Apart from that, the other flaws should be tackled as well.

Proposal

Most_Recent_Activity

A date should have a hover and active state on the graph representing the selected date: image

Acitivity_Certain_Date_B Alternative: Acitivity_Certain_Date_A (I like showing the time first, as the order is other way around from the screen with the most recent activity, plus time is more important in this view)

Todo

This design is almost good to go.. if this is scheduled or about to be tackled be a developer I will finish the design with:

  • Create row designs for every possible visible action a user can take (there only 2 designed right now)

Additional issues which extend upon this design:


The design has taken cues from: https://gitlab.com/gitlab-org/gitlab-ce/issues/19797 This issue is in the spirit of: https://gitlab.com/gitlab-org/gitlab-ce/issues/22192

cc: @awhildy @hazelyang @tauriedavis @jschatz1 @laleshii

Edited by Matej Latin