🚀 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
@tenokami
can you please review it ?

https://docsgptui.vercel.app/
For dark mode click on that globe icon at top-left.

if found any issues then give me modifications in it
That last spinner is not accurate as per figma file. I tried lot to mimic it but not able to do that :-\

[tenokami]

@sanketshinde3001 Hey!

Could you please work towards aligning the design more closely with the Figma reference? Reducing visual differences would be greatly appreciated, especially add smooth hover effects, selection states, and transitions between steps.

Additionally, it would be great if the color and shadow values could match, and if the title and subtitle could be styled on two lines as in Figma.

Please don’t hesitate to reach out if you need any additional information or clarification. Thank you!

[sanketshinde3001]

@tenokami sure sir.

[sanketshinde3001]

@tenokami Sir , is it ok to make pr after hacktoberfest. I need some time due to diwali. I also want to make contribution docsgpt telegram bot repo.

[tenokami]

@tenokami Sir , is it ok to make pr after hacktoberfest. I need some time due to diwali. I also want to make contribution docsgpt telegram bot repo.

@sanketshinde3001 Yes, of course! Very appreciated.

[sanketshinde3001]

@tenokami Hello sir , added smooth transition effects and hover effects. Plz review it once and give me improvements in it.
till then i start working in the optimization of the code ..

[tenokami]

@sanketshinde3001 Greetings! Wow it feels so good now.

In dark theme, the disabled button should have a different color: 7D54D1 (30% opacity)

[sanketshinde3001]

@tenokami Glad that u like it 😊.
I'll update that color part and optimize the code .

[tenokami]

@tenokami Glad that u like it 😊.

I'll update that color part and optimize the code .

How about trying to place backgrounds like images in stead of trying to recreate them?

[sanketshinde3001]

you mean that background color gradient ?

[sanketshinde3001]

7D54D1 (30% opacity)

[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 .