Add a progress bar in profile page to encourage completion of profile fields

[xlogix]

We want users to complete their profile by adding their skills and social links. This helps in creating trust in the network and also helps people to discover new users. But, we don't want to keep the profile input fields to be mandatory on signup. This will be a bad user experience and many people will quit.

Instead, we'll be using Game Design to encourage users to complete their profiles after they've successfully signed up. On the profile screen, we'll be adding a progress bar which checks if they've added all social links and other necessary inputs.

P.S: For design inspirations, Google 'LinkedIn All-Star profile'

[prajwal714]

I can work on this one @xlogix . Assign me this. Thanks.

[xlogix]

Assigned! Also, do add checks for valid URL links and such.

[prajwal714]

We Can check for valid URL links in the settings page itself, when a user enters his/her link. We can create a seperate issue of this.

[xlogix]

Okay, sure. Add it

[prajwal714]

I am having issue with the Responsive Progress Bar. I have added the Antd Steps component, but It isn't responding to the window size. I tried adding rules based on screen size but they aren't affecting. can you look into this? Thanks.

[xlogix]

I think @R3l3ntl3ss can help out with this.

@prajwal714 Make sure the progress bar comes on the profile screen as a popup or comes at the top somewhere where it will redirect to the settings screen. The progress bar should update as the user enters the profile fields.

[prajwal714]

Currently it looks like this on the profile page. @xlogix @R3l3ntl3ss Does it look okay??

[prajwal714]

@xlogix @R3l3ntl3ss does the progress bar look okay?

[xlogix]

My suggestion would be to make the progress bar thicker & include a gradient in the bar to show progress. Maybe, a color shift from blue to green... Like this. Also, add a tick mark at the current level. This would be better UX

[prajwal714]

Done. Looks better, Thanks @xlogix . Kindly review and suggest changes if any.

[xlogix]

Yup, definitely looking better. One suggestion would be to not keep a list below the progress bar. Instead, put the checkmark on top of the progress bar at equally spaced positions and put the descriptions below it. On mobile, maybe only show checkmarks as it's taking too much space!

[prajwal714]

The description below the progress bar and Checkmark above it won't be possible since they both are separate components in Antd, that level of customization isn't available. From mobile I have removed the progress bar though, @xlogix

[xlogix]

Maybe try making a bootstrap based component and import it? We're thinking of slowly transitioning to a different framework like Bootstrap, Bulma or Foundation. Which one are you most comfortable with?

[prajwal714]

I am comfortable with bootstrap, transitioning as in rewriting all the components in bootstrap instead of Antd?? @xlogix

[xlogix]

Yeah, we can slowly transition on a use-case basis. We're doing this to build more complex UIs in the future.

[sohampods]

Is this thread done now?

[xlogix]

@prajwal714 Are you still working on it? Let me know

[prajwal714]

I won't be working on creating custom UI components, i have submitted a PR though using a Antd component @xlogix, if that is okay. @sohampods you can work on this if you wish.

[xlogix]

Alright, let's see how this UI plays out. Merging

[srishtij2000]

I can work on this issue

[xlogix]

I just realized that this has been updated in the app but it's not fully responsive to the desktop. I am going to change the label to beginner.

[srishtij2000]

Can you please brief me that what exactly I need to do I am getting a bit confused as I could not find it as I thought that we need to make it but if it is already there but I am not able to find it on the app

[xlogix]

It's not visible? It should be. If you wanna know how it looks like, please check the comments above. It shows up if you haven't completed your profile i.e haven't added all the social links to the profile. As soon as your profile is complete, it goes away.

Please check the code and try to fix it if it's not visible. I'll update the label based on the amount of work.

[srishtij2000]

Okay

[xlogix]

Pull the latest code as I made some changes!