UI/UX improvements

[atharvaTyagi]

Description

This issue lists down the tweaks and fixes that need to be made in the app to improve the overall UI/UX of the app.

• Improve language selection to accommodate more options and a better UX.
• Loading widget should be the Karya logo.
• Improve phone number input section, elements can be centred vertically. Will be taken up as the redesign of the sign up flow
• Display the phone number for which the OTP is requested on the OTP screen.
• 6 pin entry boxes for OTP input.
• Overall redesign needed for the consent form page (Light background for better readability, consistent content across languages, Primary text and secondary text elements.).
• Font sizes for indic languages
• Reduce text size for the "Progress" textview on the task card.
• Remove redundant options from the side navigation menu.
• Profile picture can be added to the side menu instead of the app header in the dashboard to save more space.
• Remove skip button from the task whenever its disabled to enable more space for the main button.
• Padding issue in the task page (this persists because of the scrollbar that is visible on the right side of the screen).
• Improve Submitted MCQ state UI.
• The user is blocked from screen even if they deny optional permission like location and notification #18
• Move country code to better UI/UX #21

[atharvaTyagi]

@adeeexg Please take a look at these issues and let me know if you need anything, I will add screenshots for your reference as well. Thanks

[adeeexg]

@adeeexg Please take a look at these issues and let me know if you need anything, I will add screenshots for your reference as well. Thanks

@atharvaTyagi

[atharvaTyagi]

@thedroiddiv @adeeexg I've added #18 and #21 here, I will be fixing everything UI/UX under this issue. Let me know if you have any thoughts. Since this issue is dedicated for UI/UX, i feel its better to list all of them down here and track progress. 😊

[adeeexg]

Hi : The document attached here addresses list items : 4,5,6 .
OTP_Screen_Updates.pdf

[adeeexg]

Hi : The document attached here addresses list items : 7 and 8
T&C_Update.pdf

[adeeexg]

Hi : The document attached here addresses list item : 13
Widget_Updates.pdf

[adeeexg]

Point No 9 : Localised strings for the profile task. We discussed this over call

Point No 10 : Reduce text size for the "Progress" textview on the task card. We discussed and solved this over call

Point No 14 : Padding issue in the task page (this persists because of the scrollbar that is visible on the right side of the screen). - We discussed this over call : having 4px extra padding on right side solves this issue

Point No 15 : Improve Submitted MCQ state UI. - After Submitting MCQ's become plain text only - as we discussed in the call

[adeeexg]

Point No : 11 & 12 are to be addressed when redesigning Dashboard : Planned for early next week.

[atharvaTyagi]

@adeeexg Please review this, this covers Pt. 3,4,5 and 6

screen-20240909-071512.mp4

[adeeexg]

Hi, one UX improvement that can be done is auto-clearing OTP after invalid OTP Pop-Up, saves more time and easy for the user.

I feel the T&C screen is awesome and really readable now, can you send snips of the screen in 2-3 different languages, example : Hindi, Malayalam, Odia ?
@atharvaTyagi

[thedroiddiv]

@adeeexg Please review this, this covers Pt. 3,4,5 and 6

screen-20240909-071512.mp4

@atharvaTyagi I don't see any PR related to this.

[atharvaTyagi]

@thedroiddiv I haven't raised a PR yet, just want the design team to take a look at the changes. I will raise a PR either late tonight or tomorrow, already occupied with the component documentation.

[atharvaTyagi]

Hi, one UX improvement that can be done is auto-clearing OTP after invalid OTP Pop-Up, saves more time and easy for the user.

I feel the T&C screen is awesome and really readable now, can you send snips of the screen in 2-3 different languages, example : Hindi, Malayalam, Odia ? @atharvaTyagi

@adeeexg Can we circle back to the button colours for Resend OTP and Change phone number, while we have fixed the shapes here, the colours are looking a bit off theme.

[atharvaTyagi]

Hi, one UX improvement that can be done is auto-clearing OTP after invalid OTP Pop-Up, saves more time and easy for the user.

I feel the T&C screen is awesome and really readable now, can you send snips of the screen in 2-3 different languages, example : Hindi, Malayalam, Odia ?
@atharvaTyagi

@adeeexg please check these screenshots. Thanks

[adeeexg]

Hi Atharva, sorry for the delayed reply, you can go ahead with the same buttons, we are minimally changing the UI bit by bit, will take the OTP resend button and change number button in the upcoming cycle of UI, rest all looks good

@atharvaTyagi

[atharvaTyagi]

@adeeexg Attaching a recording of the skip button updates here.

screen-20240916-173510.mp4