arc53
🚀 Feature: Onboarding UI/UX
🔖 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?
- [X] I checked and didn't find similar issue
Are you willing to submit PR?
None
@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.
@sanketshinde3001 Don't hesitate to contact me for any questions and if you have something to show
@sanketshinde3001 I've added a dark theme for this feature, which triggers automatically based on the browser's settings.
@tenokami should add multiple routes for those pages ? or Just keep them on same page ?
@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.
@sanketshinde3001Thank you.
Feedback from me:
- 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
@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
@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 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 @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 :-\
@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!
@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 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.
@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 ..
@sanketshinde3001 Greetings! Wow it feels so good now.
In dark theme, the disabled button should have a different color: 7D54D1 (30% opacity)