Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance the profile page #4423

Closed
oorjitchowdhary opened this issue Dec 27, 2018 · 30 comments

Comments

@oorjitchowdhary
Copy link
Collaborator

commented Dec 27, 2018

Please describe the problem (or idea)

The current user profile page looks very unorganized and broken.
I think we can design it and make it look much better.

What happened just before the problem occurred? Or what problem could this idea solve?

screenshot 133

How about a small image grid for the activities, questions and answers.
Also, we can reduce the share your location map size and I think fit it below the username as a horizontal tab rather than a big square.

What did you expect to see that you didn't?

Similar to this but with good images rather than coloured bg.
yuwkl

Please show us where to look

https://publiclab.org/profile/ your_profile (when logged in)

What's your PublicLab.org username?

oorjit_chowdhary

Browser, version, and operating system

Chrome, Windows 10


Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

@SidharthBansal SidharthBansal added this to the OAuth milestone Dec 27, 2018
@SidharthBansal

This comment has been minimized.

Copy link
Member

commented Dec 27, 2018

Nice idea. Can you please explain your design in detail?
Please share link or video of the website where it is live. That will be great.

@SidharthBansal SidharthBansal removed this from the OAuth milestone Dec 27, 2018
@oorjitchowdhary

This comment has been minimized.

Copy link
Collaborator Author

commented Dec 27, 2018

I haven't seen it on any live website yet...
I just came through this idea.

Here are some grid images that we can add...

For answers
answer icon

For questions
faq-icon

These three for activities.. We can decide which one for activity posted and activity attempted
activity icon
activity attempt icon
activity

@SidharthBansal

This comment has been minimized.

Copy link
Member

commented Dec 27, 2018

@gauravano

This comment has been minimized.

Copy link
Member

commented Dec 27, 2018

@publiclab/community-reps your thoughts are required. Thanks!

@oorjitchowdhary

This comment has been minimized.

Copy link
Collaborator Author

commented Dec 27, 2018

So currently in the profile page, we have a lot of empty space and the center shows 4 things
x questions, x activities posted, x activities attempted and x answers posted...
The current UI is very plain and simply shows it as text in 2 lines. (see the pic)

What we could do is, we can make these into 4 quadrants through a 2x2 image grid

@arungoel123456

This comment has been minimized.

Copy link
Contributor

commented Jan 24, 2019

@oorjitchowdhary Can I work on this issue

@SidharthBansal

This comment has been minimized.

Copy link
Member

commented Jan 24, 2019

@arungoel123456

This comment has been minimized.

Copy link
Contributor

commented Jan 25, 2019

Thanks @SidharthBansal .... I am working on this

@arungoel123456

This comment has been minimized.

Copy link
Contributor

commented Jan 30, 2019

@jywarren , @SidharthBansal can u please suggest some changes?

@IshaGupta18

This comment has been minimized.

Copy link
Collaborator

commented Jan 30, 2019

@arungoel123456 are you new at contributing to publiclab/plots2 ?

@arungoel123456

This comment has been minimized.

Copy link
Contributor

commented Jan 30, 2019

@IshaGupta18

This comment has been minimized.

Copy link
Collaborator

commented Jan 30, 2019

Then I would encourage you to start with some first-timer-only issues that are created especially to welcome new comers to the community. You can find them at:

https://github.com/publiclab/plots2/issues?q=is%3Aopen+is%3Aissue+label%3Afirst-timers-only

Once you are a bit more familiar with the codebase, you can take up bigger issues! Looking forward to your work here at publiclab!

@arungoel123456

This comment has been minimized.

Copy link
Contributor

commented Jan 30, 2019

@IshaGupta18 I am almost completed with editing . So let me do it and complete this issue .

@IshaGupta18

This comment has been minimized.

Copy link
Collaborator

commented Jan 30, 2019

Okay that's great! I just wanted you to feel welcomed!

@arungoel123456

This comment has been minimized.

Copy link
Contributor

commented Jan 31, 2019

I have just made a pr . Mentors please review

@jywarren

This comment has been minimized.

Copy link
Contributor

commented Jan 31, 2019

Hi @arungoel123456 - thank you for your PR at #4734 -- however I wanted to echo @IshaGupta18 and say that for a PR it may be best to go through the process of completing a small change and getting familiar with both the codebase and the workflow.

But also - let's keep sharing and brainstorming ideas for the profile page! I think there's a lot of design, discussion, refinement that'd have to happen before we're quite ready for code.

I started doing a bit of an analysis of the profile page here: https://docs.google.com/presentation/d/1TCZoTfuhamRVrUak8aDgqJAwSgyhRtZg2Pgacl2_4zc/edit#slide=id.g4b41dd6a91_0_0

image

Just trying to analyze how it's currently laid out and how we might reorganize it. I think it's good to look at other examples of profile pages too, like the GitHub one or profile pages on other sites. What do you think?

@IshaGupta18

This comment has been minimized.

Copy link
Collaborator

commented Jan 31, 2019

Yes this would be lovely @jywarren . Would you like if I design a few wireframes for the profile page UI? Would that be okay? Also, I want you to know that I am facing a bit of an issue with my system's Ruby, so I'll fix it and get back to coding work ASAP. Thanks a lot.

@jywarren

This comment has been minimized.

Copy link
Contributor

commented Jan 31, 2019

@arungoel123456

This comment has been minimized.

Copy link
Contributor

commented Feb 1, 2019

@jywarren so should I modify the profile page according to the design u have sent ?

@IshaGupta18

This comment has been minimized.

Copy link
Collaborator

commented Feb 1, 2019

Thank you @jywarren. @arungoel123456 the design sent by @jywarren is just a mock up. This is a big planning and design issue and requires some brainstorming before the design can be finalised and implemented.

@IshaGupta18

This comment has been minimized.

Copy link
Collaborator

commented Feb 3, 2019

So here's a mockup for profile page, the grid in the middle if the page takes too much space and it's links are not even active, so for the time being I scrapped it out of the design. @jywarren I took a bit of your information from you profile page xP. How does this look to you?

profilepage1

@jywarren

This comment has been minimized.

Copy link
Contributor

commented Feb 4, 2019

Hey this is awesome!

To be honest I was thinking of removing the activity graph because on most peoples' profiles it's pretty empty. Writing a post on PL.org is not quite like making a commit, so this is reasonable. Although we could also consider adding comments to the graph; maybe that'd improve it. Still, I think it may be more important to think about what topics people are engaging on rather than their activity "grid". Maybe this opens up more space in the design?

I like how the map is up high. Could you paste in a map graphic to sort of see what that'd look like?

Also, maybe rss feed could be just the RSS icon and could appear in line with the social icons...

And the "stats" line could be moved to the circular "tabs" at the bottom -- like Research notes (23) Wikis (41) and such. What do you think?

Finally, how might we display a bit more information about the tags/topics people have engaged on, rather than their profile tags (which honestly are more for utility use right now, so we might even just display them below the bio -- there shouldn't be too many of them anyways.)

One last thought - the Bio (About) area could get pushed down with too much content, so maybe we should show the first 300 or so px of height, but cut it off (using CSS only), and show an "expand" or "read more" link to show the rest.

This is very cool! @edieblu @ebarry take a look!

@IshaGupta18

This comment has been minimized.

Copy link
Collaborator

commented Feb 4, 2019

Thanks a lot! I think all the suggestions here are wonderful. I could implement all of them in a new mockup and even I feel that the grid takes up too much space and isn't very much required.
I was going to put icons and stats along with the titles in bubbles so that would okay.

About the tags, I really like the idea. Actually, I am weaving one of my GSoC proposals around tags only so I would love to add a feature related to it, I think we can brainstorm on it a bit more, on how to use tags in which the user has engaged on their profile page to make it more personalised for them.

And we could make the about box an accordion for more information. I was also thinking of putting a place holder like 'tell us a bit about yourself' for people who have an empty bio.

How does this sound?

@jywarren

This comment has been minimized.

Copy link
Contributor

commented Feb 4, 2019

@edieblu

This comment has been minimized.

Copy link
Collaborator

commented Feb 4, 2019

Hey @IshaGupta18 really cool design! 👍

I would definitely add the "tell us about yourself" prompt for those that haven't added the bio yet as you suggested. I think this would encourage users to flesh out their profiles - which is important for getting them more engaged overall :)

Not sure if linking to GitHub or Instagram makes sense, however, I really do like the icons under the user image. Maybe we could instead feature some of the user-selected best content - for example, a research note that they are most proud of, or a link to a project that they manage.

As far as I know, the plan for the user profile is to link to stuff on Public Lab (and not to link outside to other pages that much).

There seems to be a lot of interest around displaying projects especially (that's why my suggestion above about featuring one project that the user selected).

I really like the round shape for the activity feed (and the user icon). I agree with @jywarren that you could just add a number of posts next to it.

The only issue that I see is that, proportionally, I don't know if all of these things would fit on one (laptop page) - especially if we work with fonts 16px and up :)

In any case, good job! 👍 You got this :)

@IshaGupta18

This comment has been minimized.

Copy link
Collaborator

commented Feb 4, 2019

Thanks a lot @edieblu ! I added the social icons because I saw them on some profile but I think it would be okay to remove them and add something more useful in their place like you said.

To tackle the proportionality issue, I think we would be able to reduce some space after the removal of the grid and try some other adjustments.

Would this be okay?

@IshaGupta18

This comment has been minimized.

Copy link
Collaborator

commented Feb 6, 2019

Okay so here's the updated mock up, we can implement that tag customisation thing in the page, now that we have some room

image

I think this looks more organzied and cleaner. What do you think @jywarren ?

@jywarren

This comment has been minimized.

Copy link
Contributor

commented Mar 19, 2019

OK, apologies, circling back here! We have a few threads all interconnecting and I wanted to see if we could try to incorporate them in one thread. Please check out https://publiclab.org/notes/lekhidugtal/03-13-2019/ui-wireframe-for-profile-page too -- let's discuss a bit there!

@gauravano

This comment has been minimized.

Copy link
Member

commented Mar 22, 2019

Also, I just closed a PR #4734 which was raised against this issue. Closed because of inactivity. @arungoel123456 you can help us in makeover if interested. Thanks!

@jywarren

This comment has been minimized.

Copy link
Contributor

commented Sep 27, 2019

With our new profile pages, i'm going to close this up! Thanks, all!!!

@jywarren jywarren closed this Sep 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.