Improve User Account/User Info Page

[pbnj]

Problem Description:

Currently, the user account page has too much content on it and requires scrolling past all the projects, bonfires, and waypoints to get to the "Manage Your Account" section.

Suggested Enhancement 1:

Turn the user picture into a drop-down and break up the current content into 3 sub-pages:

• Manage Your Account
  • Default go-to page if student clicks on user icon without selecting a sub-page
  • This would show Github activity, streaks, and account management options.
• Projects
  • Default go-to page if student clicks on the "number of completed items" ( e.g. [286] )
  • Show completed projects.
• Bonfires
  • Show completed bonfires.
• Waypoints
  • Show completed waypoints.

Suggested Enhancement 2:

Instead of creating 3 new pages, a less disruptive enhancement can be to simply implement a tabbed-panel approach on the existing page, with the tabs being:

• Account
• Projects
• Bonfires
• Waypoints

Suggested Enhancement 3:

A third approach can be a combination of the two suggestions above, resulting in a total of 1 new page.

• Break out the Account Management stuff into a separate page accessible by clicking on User Icon
• Break out the Projects/Bonfires/Waypoints into a separate page accessible by clicking on the "number of completed items" ( e.g. [286] )

[ltegman]

I dig both 2 and 3. For the longest time I didn't even know there were options at the bottom, so I think this would be a great improvement!

[pbnj]

@ltegman which proves my point. I doubt many know of its existence because hardly anyone even thinks to scroll so far down.

[QuincyLarson]

Thanks for your thoughtful feedback, @pmbenjamin. Here are my thoughts:

• We don't use drop down menus, so Facebook registration is not working  #1 is out.
• We intentionally merged our old account management and code portfolio pages a few months ago, and pointed both the profile image and the brownie point score to the same code portfolio page. I did this as a concerted effort to simplify pages and reduce confusion (since neither the brownie point score nor the profile image explicitly tell you where they will take you).
• Now that we've merged everything into "challenges" and "project challenges", there will only be two tables. We could structure those as collapsed accordions to reduce the vertical real estate they take up.

[pbnj]

@QuincyLarson I completely agree with your thoughts.
Does this type of change (e.g. UI/UX) need to be made by a core team member (like Berkeley)?
Or can I take a stab at it?

[alistermada]

@QuincyLarson Collapsible tables sounds like a good idea to me. I think they should be collapsed on our own page by default so we can quickly get to the account settings without scrolling too much.

I would also suggest removing non-code challenges from the code portfolio. This includes:

• Everything in Join the Free Code Camp Community (5 items)
• Everything in Gear up for Success (4 items)
• Anything that starts with "Get Set" (3 items)

[BerkeleyTrue]

@pmbenjamin No, it's up for grabs.

[seanmishra]

Referencing possible sub-issue: #6452

[justincorrigible]

Well thought, I second @alistermada with those elements being removed from the portfolio.

---

Following this and all portfolio threads to see if we can come up with a better version together.

[sealocal]

Yes, please see #6452! I think utilizing the Map would be perfect for it. I love the new Map on the side of the screen. I'm not familiar with FCC's source code, so I don't know how easy it would be to re-purpose the map. It would imagine it would DRY up some code.

I think that approach would be an intuitive feature for UX. When I visited another camper's page for the first time, I presumed the Map would reflect that camper's progress, not mine.

[stefanivic]

Hey, i have been talking to @hallaathrad and we had an idea to do a new design for the profile page.
So i sat down and did a mock up.

The left side ( sidebar ) and the FCC activity board will be fixed, and only the challanges part of it would scroll. We can also, as @QuincyLarson said, turn them into collapsed accordions for better UX. Also each of the buttons would have a hover effect that would make them full colored.
Any feedback is welcome on how we can improve it.

[pbnj]

👍

[SaintPeter]

@nightwalkerkg I really like that sidebar. The only sticky wicket, as @hallaathrad already brought up, would be the mobile view. Still, this is much better than the current "scroll all the way to the bottom" version.

[justincorrigible]

Well, the mobile is not an issue since I'd be the one coding the design, pretty much as it is now (one thing on top of each other) except with the visual and functional improvements.

Although I am actually tempted in having the profile be a sidebar.
hahaha sidebar overload. We're slowly putting together the groundwork for an FCC mobile app.

[stefanivic]

@SaintPeter We can turn the sidebar into a navigation drawer.
http://www.roblukedesign.com/trunk/trunk.html

[justincorrigible]

Hmm while I like that idea a lot, I fear it'd be confusing and inconsistent to add that feature when we already have the one for the map and chat going.

However, it'd be nice to migrate those two to something like that, albeit unfeasible at this point of the project. maybe in a mid-long term.

[stefanivic]

@hallaathrad i meant it for mobile view. Not in general.

[justincorrigible]

hmm I'm listening. This is definitely something doable, not necessarily through adding another module but coding it ourselves (I've done something similar before with just a couple of jquery lines).

Ok, to be discussed as an enhancement. For the time being, let's focus on a responsive general design

[xRahul]

There are too many challenges on FCC now and people who have completed multiple hundreds of them have a really long profile page.
We need to implement the fuzzy searching like the map on the profiles page to get to the challenge we want to revisit faster.

[justincorrigible]

Wanna give it a try and submit your approach? @xRahul

[xRahul]

@hallaathrad Sure! Let's see what I can come up with..

[ghost]

@xRahul, ever come anywhere with this? I think it's an awesome idea.

[xRahul]

@atjonathan not yet.. I've been learning some frontend first before getting into modifying the UI of the site. Going to start on it soon though!

[QuincyLarson]

I think we should stick with the single-column layout. Instead of adding a sidebar, we should focus on making more effective use of the space at the top of the portfolio. I think our onboarding and account configuration goals should be prominent up-top.

I also think search on the code portfolio page is unnecessary. People can scroll or use control+f. It's fine to have a really long code portfolio as long as we have a clear hierarchy and the most important things are up top - which they currently are.

[ghost]

@QuincyLarson, I'm gonna take this up along with adding the bios from github. They will work well together 😃

[ghost]

@QuincyLarson my proposed redesign:

Please discard the font issues: I didn't bother to match them up or use the correct ones 😝

[QuincyLarson]

@atjonathan this looks solid. We could also move some of the onboarding over here. The following challenges could be buttons up top that have check marks next to them or +1 point icons next to them:

https://www.freecodecamp.com/challenges/configure-your-code-portfolio
https://www.freecodecamp.com/challenges/join-a-campsite-in-your-city
https://www.freecodecamp.com/challenges/learn-what-to-do-if-you-get-stuck
https://www.freecodecamp.com/challenges/read-coding-news-on-our-medium-publication
https://www.freecodecamp.com/challenges/join-our-forum
https://www.freecodecamp.com/challenges/watch-coding-videos-on-our-youtube-channel
https://www.freecodecamp.com/challenges/join-our-linkedin-alumni-network
https://www.freecodecamp.com/challenges/commit-to-a-goal-and-a-nonprofit

Then I could merge the first two getting started challenges (https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works and https://www.freecodecamp.com/challenges/create-a-github-account-and-join-our-chat-rooms) into one challenge that we could put at /welcome

This would allow us to completely eliminate the "Getting Started" and "Gear up for Success" sections.

How do you think we could best visualize these elements on the code portfolio? Perhaps you could make a mock or a functional prototype?

[ghost]

@QuincyLarson sounds great let me try that out in Photoshop...

[ghost]

@QuincyLarson, I imagine something like this:

[QuincyLarson]

@atjonathan this looks solid. I don't think profile completion should be a ghost button, though. Here's how LinkedIn did it:

[QuincyLarson]

Keep in mind that some people will have very long names, and that usernames can be up to 15 characters long.

[stefanivic]

Guys, i think you are focusing way too much on the functionality and far less on the aesthetics and user experience.

I separated the elements in cards, for easier navigation. Right now it looks like you took an empty page and just tossed the elements on it.

I used the progress bar for the profile update progress and give tips for users what they need to do, you can also use a list like LinkedIn uses to give tips on how they can improve their portfolios. Not just give them the option for it.

(you can also just make a list with a icon on the left side and text on the right what is user missing)

I put the buttons under the the profile card and put them in one line to avoid wasting space.

[ghost]

@stefanivic, I dig this 💎. @QuincyLarson What does your brain think?

[justincorrigible]

Nobody's asking me, but I'd agree with @stefanivic. UX should be a top priority in the decision making process of this and any product. Maybe he'd like to get involved again in this round of comments?

(and hopefully this issue won't go inactive, again).

[ghost]

@hallaathrad, if @QuincyLarson is happy, I can start implementing this immediately along with #8943

[Bouncey]

👍 @stefanivic

[QuincyLarson]

@atjonathan you can definitely go ahead and start implementing #8943 - what we're discussing here is just the configuration of elements on the page.

@stefanivic Your mock looks nice. A couple notes:

• It's worth pointing out that GitHub's bios can only be 161 characters max.
• You left out a field for location.
• Thanks for surfacing those LinkedIn cards.

@stefanivic Are you good enough with Bootstrap and Jade to implement this view yourself? That way we can see what your vision would look like at all different viewport sizes.

[stefanivic]

@QuincyLarson yeah, i use both all the time. I'll jump on it, the only problem is i have exams now, so it might take two, three days. :P

[QuincyLarson]

@stefanivic OK - great! Good luck with your exams. Thank you for getting us the working responsive views as soon as you can.

[stefanivic]

Oke everyone, sorry for the wait. I didn't have much time to setup the FCC and do it on the real thing so i did it on CodePen just so you can see how it handles the responsive view.
http://codepen.io/nightwalkerkg/full/XKjVXz/

@QuincyLarson any updates on this ?

[ghost]

@QuincyLarson what are your thoughts on this?

[ghost]

@stefanivic, lets make a pull request for this 😃
Do you wanna make it?

[systimotic]

Things have been quiet in here for a while! I just checked out the live version. The buttons have been moved to the top. There's still a major difference with @stefanivic's version though. To be honest, I quite like how what's up on the live site looks. The only downside to me is that it does take up a lot of space. Are we going to stick with what's live or with the new version? Should the other improvements suggested in this issue still be looked at?

[ghost]

I'm happy to implement this new design if we agree on it. I personally still think that @stefanivic's proposal is an improvement over the current design.

[systimotic]

I do really like how much more compact the proposal is. I also prefer the buttons as they currently are. For consistency, it would probably be good to use the current button style. I think making the text larger could really help readability. The text here is smaller than in most places on FreeCodeCamp. Quincy has previously commented about increasing the font size on FCC.

[QuincyLarson]

@systimotic yes - Bootstrap 4.0 boosts default font size to 17px which I think is a pretty good size. We'll implement this later after it is stable.