🚀 Feature: Onboarding UI/UX

[tenokami]

🔖 Feature description

An onboarding experience that happens once for every new user.

Here is figma prototype: https://www.figma.com/design/OXLtrl1EAy885to6S69554/DocsGPT?node-id=4254-8745&t=92rsFCtdBQlNZGQ6-1

here is the figma file, you can find onboarding on the bottom: https://www.figma.com/design/OXLtrl1EAy885to6S69554/DocsGPT?node-id=0-1&t=5SZr1TQA6ekFGx5Q-1

Please make sure to add smooth transitions between steps. You can suggest similar alternatives for the loader animation to choose from and then proceed. Post results for review

🎤 Why is this feature needed ?

To enhance UI/UX for the new users, leading to higher retention and conversion

✌️ How do you aim to achieve this?

By incorporating new user onboarding

🔄️ Additional Information

No response

👀 Have you spent some time to check if this feature request has been raised before?

• I checked and didn't find similar issue

Are you willing to submit PR?

None

[sanketshinde3001]

I'm interested

[sOnU1002]

i can do this task

[tenokami]

@sanketshinde3001 Hey. Thank you so much!

Today I plan to redesign the "upload file" modal which will affect this issue and more. Once I do, I will comment it. So please try to keep it in mind until then.

[tenokami]

@sanketshinde3001 Figma is updated and final (for now 😁)

[tenokami]

@sanketshinde3001 Don't hesitate to contact me for any questions and if you have something to show

[sanketshinde3001]

Sure 🧡

[RohittCodes]

@sanketshinde3001 are you still working on it?

[sanketshinde3001]

@RohittCodes yes.

[tenokami]

@sanketshinde3001 I've added a dark theme for this feature, which triggers automatically based on the browser's settings.

[sanketshinde3001]

@tenokami Yes, saw that already.👍

[RohittCodes]

@sanketshinde3001 still working mate?

[sanketshinde3001]

@RohittCodes Yes , ongoing brother.

[sanketshinde3001]

@tenokami should add multiple routes for those pages ? or Just keep them on same page ?

[tenokami]

@ManishMadan2882 Can you help with this question?

[ManishMadan2882]

Think it would be better to keep them on a single page.

[sanketshinde3001]

@tenokami https://docsgptui.vercel.app/ here is ongoing work demo. In 2-3 days i'll complete it with smooth animations and responsiveness. After that you can check it out and and give me modifications in it . And then i'll integrate it in main DOCSGPT code.

[tenokami]

@sanketshinde3001Thank you.

Feedback from me:

1. Move all content a little higher on the page, more natural for viewing (updated in figma too)

These should have a white background
3. there should be the title and logo from figma

[tenokami]

@sanketshinde3001 I'm not sure about this screen, is it the loading for uploading document or for training?

We don't have this in figma

[sanketshinde3001]

@tenokami hii sir, those last two stages are not completed yet. I just added sample spinner just to make skeleton on ui.
I'm working on those.
I'll make all changes that you mentioned above soon.

[ManishMadan2882]

Hi @sanketshinde3001
Is there any update on this issue?

[sanketshinde3001]

@ManishMadan2882 Working on it sir. actually due to college workload , not get enough time for it. but after tomorrow mid day . I'll start work on it. and in 2 days will complete it and send for review.

[ManishMadan2882]

@sanketshinde3001 no worries at all, take your time.

[sanketshinde3001]

@ManishMadan2882 Thanks sir😄

[sanketshinde3001]

@ManishMadan2882 Can you check this ?

[ManishMadan2882]

@sanketshinde3001 could you please raise a PR for this issue.

[sanketshinde3001]

In codebase where should i add this ?

[sanketshinde3001]

@ManishMadan2882 @tenokami sir where to add ?

[tenokami]

you mean that background color gradient ?

Sorry for late response, didn't get a notification. I meant these

[sanketshinde3001]

@tenokami
ohk. I'll try background images from figma for dark theme.
I think for light theme , gradient it matching as per figma file ?

[tenokami]

@tenokami ohk. I'll try background images from figma for dark theme. I think for light theme , gradient it matching as per figma file ?

Yes 👍

[sanketshinde3001]

ohk sir

[sanketshinde3001]

@tenokami

how does it looks ?
changes are live on website...

[tenokami]

@sanketshinde3001 Looks good! Now would like some changes to the spinner.

Can we take this spinner which is used for document upload and change the red color to 7D54D1 ?

[sanketshinde3001]

Sure sir 👍

[sanketshinde3001]

@tenokami Done Sir .

[tenokami]

@sanketshinde3001 thanks!

could you also make these transparent with background blur like in figma?

[sanketshinde3001]

Sure..
I was thinking same 😅.

[sanketshinde3001]

(updated on website)

Like this ?
bcz in figma , those spinners background is not transparent. so i don't get it which background blur..

[tenokami]

@sanketshinde3001 Yeah we can keep it like this.

[sanketshinde3001]

An onboarding experience that happens once for every new user.

Sir, where should I include this UI component in the codebase?

[sanketshinde3001]

@tenokami @ManishMadan2882 Sir ?

[tenokami]

@sanketshinde3001 Sorry, this question is not for me

[ManishMadan2882]

Hi @sanketshinde3001
You can add these components in the frontend.
maybe store if user was onboarded or not using local storage since the authentication/sign in information is not on this repository.

[sanketshinde3001]

Yes but
Should i add whole flow as per above website
Or just replace already available components with new one?

[ManishMadan2882]

You can add the flow as per the above website, the flow is only for onboarding the users.
No need to replace the available components, you can even reuse some of them.

[sanketshinde3001]

@ManishMadan2882 Got it

[ManishMadan2882]

@sanketshinde3001 Are you working on this issue?

[sanketshinde3001]

@ManishMadan2882 Sir in frontend , it shows this Page directly , So i save
'isonboarded' in local storage.
only if it is true , it show Onboarding ui .
working on - Adding functionality to buttons (train) means connecting already present code with new ui.

is it enough ?

[ManishMadan2882]

Yes, you can do in this way.
Thanks for the update!

[sanketshinde3001]

Sir in docsgpt code , there are tags to load image , should i convert Nextjs - tag into normal tag.

[ManishMadan2882]

Hey @sanketshinde3001
In the frontend, we are using React and there is no Image component

[sanketshinde3001]

@ManishMadan2882 sir i added ui in website. I working fine.
I tried to make those training functional.
But facing some issues to do it.

[ManishMadan2882]

Push the changes and PR, so that we can review where is the issue