Help with the Portfolio redesign

[ahmaxed]

Is your feature request related to a problem? Please describe.

The redesign of the Profile is way overdue. Here is the proposal for organizing the personal info section of the Profile and improving its aesthetics.

Describe the solution you'd like

We could use icons for location and joined date as Tom suggested.
Let us know if you have other considerations before we move to the implementation.

Describe alternatives you've considered

.

Additional context

No response

[NehemiahDias]

I think an option to share your profile as a "card" would be cool. Maybe a share button with the option to share to Twitter, Instagram, as an image, etc. The card would have your name, username, streak, points, longest streak, and maybe recent badges? Sort of like how Snapchat allows you to export your profile info!

[ahmaxed]

A share button would be a good option. OG Image Generation for news articles is on the road map. We could consider it for the profile once that solution is deployed #47085

[chirag-cyber]

Under the profile section, we can add projects icon link to link our achievements and also our social media handles..

[ParthMadhvani2]

Hello, I think there must be a share button to share a portfolio. a section of achievements and projects made, and our social media handles must be included in the portfolio.

[SalimZaidi14]

yes, section of achievements and projects is a must!

[Sboonny]

Should we add switch account, and log out buttons to the Portfolio?

I have got feedback from Estefania, that some users seek these feature in Profile like pages, so we can add them in freeCodeCamp, as well. 🤔

[SalimZaidi14]

Should we add switch account, and log out buttons to the Portfolio?

I have got feedback from Estefania, that some users seek these feature in Profile like pages, so we can add them in freeCodeCamp, as well. 🤔

Yeah that would also be nice..

[ahmaxed]

Thanks for the feedback everyone.
1 ) The socials will be included next to the location (those three boxes in the mocks)
2 ) Projects, certifications, and timeline will be added at the bottom of the the general info section
3 ) Could provide me links to similar websites which have implemented switch account, and log out buttons on the portfolio page. That would help me understand the convention better.

[Sboonny]

I have asked for similar websites, and I was getting different functionality from what I understood.

So there is a miscommunication from my part, sorry about that

[Sembauke]

Hey @ahmadabdolsaheb,

Can we put a help wanted label on this?

[BernardoDeveloper]

Have a concise design and that the user has a shareable profile, showing courses and their progress on the platform.

[oriooctopus]

I never knew that FreeCodeCamp kept track of your streak! I remember when I used Duolingo the streak always helped to keep me motivated. Similarly, I know a few video games that use streaks as a way to encourage daily use. I wonder if we could make this more prominent to gamify the learning experience a little bit and make consistent learning a bit more emotionally rewarding. Perhaps every time the street gets bigger there's a little notification/annoucement bar that pops out from the top that says something like: "Your streak is now 14, that's an all time high!"

I know this is not the relevant issue to talk about this so I'd be happy to open up a new issue to discuss it further.

[Sboonny]

We should open new issue for this 👍.

I disagree with the streak in general, as it may incentives campers into taking a certification they don't want or need, to keep the streak going, which is against one of the principles of freeCodeCamp. So maybe we should delete it, or keep it hidden.

[gmgrigsby]

I am curious as to which social media handles will be available to display in the new profile? I made a suggestion in the FCC Forums to add an option for Mastadon, and was directed to the GitHub issues for the project, which is how I came to find this post.

[oriooctopus]

So a few thoughts:

• Something CodeAcademy includes in their profile is when the user was last active. I think that's useful information if we can do it easily
• Although I initially strongly agreed with the idea to add share buttons to the profile I found that no other similar site seems to have these in their profile. I checked Coursera, Duolingo, and CodeAcademy. I imagine those other sites considered it and didn't find it useful enough. Just thinking out loud because I'm not necessarily opposed to it, but I just view this observation as a bit of a red flag.
• in the designs I don't see an edit button
• I think it makes sense to put longest streak and current streak next to each other since they're related
• This is a screenshot of the proposed design. I'm wondering what these three dots are for?
• in the current profile there is a grid of the days where you completed the challenge. I thought this was cool, what's the reason for not including it in the new design?
• In the current design there is a timeline and certifications section. Is that also going to be included? If so, is the reason for it not being included in the above design that it's not being altered?

[ShaunSHamilton]

Something CodeAcademy includes in their profile is when the user was last active. I think that's useful information if we can do it easily

I would discourage this. It is another field we would have to add to the user record, and largely goes against freeCodeCamp's "collecting as little as possible" stance.

[oriooctopus]

That makes sense, I think the value of what it adds is pretty minimal so considering what you've just said I agree that it shouldn't be added

[ahmaxed]

@oriooctopus, This is an effort to reorganize the personal info part of the redesign using the current features. As a result, all of the components appearing in the middle or lower part of the live portfolio page will appear in the "new" portfolio as well.

• Although I initially strongly agreed with the idea to add share buttons to the profile I found that no other similar site seems to have these in their profile. I checked Coursera, Duolingo, and CodeAcademy. I imagine those other sites considered it and didn't find it useful enough. Just thinking out loud because I'm not necessarily opposed to it, but I just view this observation as a bit of a red flag.

This is an interesting idea, we can peruse it further in a dedicated issue if you wish.

• in the designs I don't see an edit button

The edit will happen from the settings page for now.

• I think it makes sense to put longest streak and current streak next to each other since they're related

Agreed.

I'm wondering what these three dots are for?

Predefined social buttons.

In the current profile there is a grid of the days where you completed the challenge. I thought this was cool, what's the reason for not including it in the new design?

It will stay as is in the upcoming iteration. Only the streak numbers will be grouped with number of challenges completed.

• In the current design there is a timeline and certifications section. Is that also going to be included? If so, is the reason for it not being included in the above design that it's not being altered?

Yes, it will be included.

[ahmaxed]

@gmgrigsby thank you for your suggestion. Ideally we would have a selector to allow users choose a number of social networks. Due to limited resources, we are sticking with the current functionality so contributors and maintainers can focus on the mission critical issues/features.

[oriooctopus]

The edit will happen from the settings page for now.

My concern is that it's harder for users to find, I wouldn't necessarily assume that to edit the profile information I have to go to the settings page. Most of the time on a profile page (also consistent with the other sites I checked), there is an edit button on the profile page itself. Can we at least add an edit button that when clicked takes them to the settings page?

[ahmaxed]

The edit will happen from the settings page for now.

My concern is that it's harder for users to find, I wouldn't necessarily assume that to edit the profile information I have to go to the settings page. Most of the time on a profile page (also consistent with the other sites I checked), there is an edit button on the profile page itself. Can we at least add an edit button that when clicked takes them to the settings page?

that makes sense.

[JordanMooree]

Curious, is there a Figma file to this design that was proposed?

[ahmaxed]

There is, but think of it as a wireframe rather than a mockup. @Sembauke is looking into the implementation, so we should be able to see the changes in his pr soon.

[bbsmooth]

One thing the Profile page should probably have is an h1 heading near the top. I suppose we could convert the username that is currently an h2.

[shootermv]

i can see the new design figma, but may be it can be better to have also the design for mobile as well...

[jenna5376]

@shootermv I'll work on the mobile design!

[ahmaxed]

Updated the mobile version and the desktop version.

[jenna5376]

I also created a mobile version. Feel free to suggest any changes
https://www.figma.com/file/dfMxnhDgZmQOt3ZoVajaEB/freeCodeCamp-Profile?type=design&node-id=0%3A1&mode=design&t=JTaWEYcAAdabN4oG-1

[ahmaxed]

Thanks for the mock up. I have updated the mobile version and took inspirations from your version. The title of the stats might run in one another based on the length of the translations. Here is the mock for your reference:
figma.com/file/4M7uEe9kH8hgZdB07lBvj9/Untitled-(Copy)?type=design&node-id=0%3A1&mode=design&t=i1k1rk04gyBhUAwd-1

It is also helpful to breakdown the prs based on their secsion:

• bio
• stat
• badges
• projects

[jenna5376]

@ahmaxed Good point! However, I am worried that the bio, stats, and badges sections take up too much screen real estate in your version--especially if the user has multiple badges. This could result in profile viewers clicking off the website before ever reaching the project section, which is arguably more important.

I will try to come up with alternative designs for the stats representation!

[ahmaxed]

I agree, let's go with you version of the badges. I will update the mocks accordingly

[jenna5376]

Sounds good. Let me know if you need help

[jenna5376]

@ahmaxed For the stats section, what if we have the titles span two lines instead of one? This eliminates the problem of titles running too long and takes up less real estate than if we display stats vertically. I updated the mockup and atttached a photo for reference.

[ahmaxed]

Thanks for the suggestion. We would still run to some large translated word, but let us try it. I updated the mocks accordingly.

[shootermv]

@ahmaxed can i ask about steps:
will it be right to merge, if only bio section will be modified according to new design (and other section will still has old look)?

[jenna5376]

@ahmaxed @shootermv If we're set with the design for now, I would also love to help implement it

[ahmaxed]

We are set with the design. Yes, one section at a time works. It would be easier to review as well.

[shootermv]

@ahmaxed , question:
Can it make sense to add one more step(or PR) before the steps you listed already -
to wrap the camper component with the userContext,
in order not to pass user details as a props to bio, stats and badges child components?
This step will have no visual effects, but it will make the further steps much easier

[huyenltnguyen]

@shootermv Could we just pull the data from Redux instead of using React context?

[shootermv]

good point @huyenltnguyen! of course we can, it is only matter of add user selector

[shootermv]

one more thing about figma design -
i think we better to have also design for a desktop (currently what we have - is a tablet and mobile)

[Rabberpoli]

I was following this issue lately and I was wondering that I might be available offering some help with implementing the new design. Is there already something to work with?

[jenna5376]

@shootermv I checked the Figma file and we already have designs for desktop and mobile! I think the only change we need to make to turn the desktop design into tablet design is decreasing the margins and maybe resizing badges/putting them in a carousel

[shootermv]

i tried to see how the current design could look on wide (1277px) screen, here is what i got:

my question here: is it good that bio section has only one row?

[jenna5376]

@ahmaxed I'm trying to implement the stats section. Are we adding a toggle to let users display stats on their profiles in settings, or is this section going to be visible by default? I'm thinking we could simply rename the "My points" setting to "My stats."

[ahmaxed]

@shootermv, you could use a similar grid (col, row, container) as the current profile. That should help.
@jenna5376, that makes sense. currently the streaks are grouped with the timeline. Once those are extracted and added to the stats section, we can change "my points" to "my stats"

[shaman-004]

How about a QR code that describes the whole profile,@NehemiahDias already mentioned one card that can be sharable and has a QR code in it.