Freecodecamp: Redesign proposal for public portfolio page

[utsab]

I am the product lead for the classroom mode codebase. During our user interviews with teachers who intend to use FreeCodeCamp in their classrooms, we learned about their challenges with the existing progress timeline shown on the public portfolio page. There is one key challenge:

Teachers want to quickly get a sense of a student's overall progress through various parts of the curriculum. For example, answering a question like whether a student has completed the "Basic CSS" section is not an easy task with the current design, which shows an unorganized laundry list of all completed challenges across all sections.

Therefore, I am proposing a redesign that more clearly shows progress in the various categories. (See screenshot.)

Note the following two benefits in this redesign:

1) Efficiency: A teacher (or camper) can quickly see the progress at different levels of granularity. At a high level, you can see the progress in the "Responsive Web Design" certification as a whole. Then with only one click, you can expand that certification and see the progress through each subsection.

2) Psychological motivation: Seeing the progress of each specific subsection can be psychologically motivating. For example, if a camper sees that she has completed 49/50 challenges in "Basic CSS", it's possible she may feel a compelling desire to finish that one last challenge so that she can be done with that section.

@QuincyLarson, if you approve this, I know several members of the classroom mode team who would be happy to get to work on this right away. I look forward to hearing your thoughts.

[moT01]

@utsab good idea - dont forget the completed date in there

[QuincyLarson]

@utsab Yes - I think this would make the progress easier to understand, and being able to collapse it like we can with the curriculum would be great!

The main pitfall to this approach is early on a lot of people misunderstand that the majority of the time will be spent on building projects.

I often hear people say something like "I just finished 200 challenges on freeCodeCamp. At this rate I'm going to have the first certification by the end of this week!"

We might want to color-code the projects differently or set them aside somehow to emphasize this. For example:

• Responsive Web Design [72 of 200 challenges / 0 of 5 projects]

I know you're focused on classroom mode. @raisedadead and @Bouncey are working hard on the open API which is the main blocker for classroom mode.

In the meantime, would you be interested in taking a crack at a PR that updates the progress view and closes this issue?

[moT01]

Something to consider adding would be the overall totals as well, like on the main page it says...

You have completed 759 of 1408 coding challenges.

You have built 32 out of 30 projects.

You have earned 3 out of 3 legacy certifications.

You have earned 2 out of 6 certifications.

possibly in the area under the profile picture - or maybe at the beginning of the progress area

[QuincyLarson]

@moT01 I agree - those would be valuable high level stats to have above their "map" of completed challenges.

[moT01]

How about linking the project to the users completed project - right now it takes you to the challenge page - so if I send someone to my profile and they want to see my projects there's no way to see them, I think the old site said something like "view solution" that linked to the completed project

[utsab]

Thanks for your feedback @QuincyLarson. I hear what you're saying about students underestimating the projects. I'll try to emphasize the project progress more in the redesign as you suggest.

Yes, I would be happy to work on this to close out this issue. Can you make me an assignee on this?
@rivera1294 and @AryanJ-NYC have also indicated they are interested in working on this with me.

[QuincyLarson]

@utsab Yes - I've assigned this issue to you. Good luck, and thank you for keeping us posted on your progress :)

[moT01]

@utsab september 30, 2016 is long enough that it wraps to a second line, not a big deal but you could consider giving that a little more space so it doesn't wrap like that

[TasGuerciMaia]

@utsab How is going this feature? Do you need any help with UX and UI? I can help you.

[matthewchase]

Ello! I put out a PR (#25750) to partially address this. In my diff, I've added the stats to each subsection, and then I figured I could do a second update the portfolio to use the Map component.

I'm new to github and freecodecamp pr's. Is there anything I need to do to get that reviewed, so that it could be merged in?

@raisedadead

[raisedadead]

Thanks @matthewchase for the pull request. Will review and leave feedbacks.

[thecodingaviator]

@ahmadabdolsaheb close issue at discretion

[thecodingaviator]

Oops

[moT01]

I think it's gotta be safe to close this one at this point. As always, leave a comment if anyone disagrees and we can continue discussing it.