Revised mobile login and registration action points [Creative review]
Please see below a list of minor refactors to be made to the login and registration screens on mobile.
I should have caught the following before it got released. Please see below some important action items.
For reference, a click-through can be found here -> https://www.sketch.com/s/3e7a8f54-04a5-4374-8bda-9de901f2afb6/a/ygYdmgo/play
Landing screen
-
General layout issues - Original design: https://www.sketch.com/s/e8802a80-da55-4421-b961-564f40bc3845/a/v8mpY2J
Registration
-
General layout issues - Original design: https://www.sketch.com/s/e8802a80-da55-4421-b961-564f40bc3845/a/Gm5EDg5 -
On iOS (iPhone 13) the Join Minds button is hidden behind the keyboard. The user is unable to scroll, but then had to close the keyboard to continue. -
Disable word auto complete above the keyboard which is consuming quite a bit of space. Also the emoji keyboard and speech to text controls could be disabled. -
Adjust the height of the text inputs so they match the designs. They are taller in the implementation. -
Fix the colour issue at the top of the action sheet.
-
-
-
Functional issues -
When trying to register an existing username, I'm able to proceed to the CAPTCHA screen. The user shouldn't be able to proceed beyond the registration screen without all the validation criteria being met. -
Inline form validation messaged doesn't appear when no password is provided.
-
Login screen
-
The incorrect username/password toast notification should only display when a username and password has been provided. -
There should be inline form validation messages displayed (same as registration) if either the username or password has been omitted. -
The spacing under the header should be increased to match the general action sheet design.
Password reset
-
When transitioning from screen one to screen 2, we should persist the height of the modal, so there is no jump. -
The implementation of password reset don't match the designs (https://www.sketch.com/s/3e7a8f54-04a5-4374-8bda-9de901f2afb6/a/AxYA3wr/play) -
The header text size seems to be off. -
The close icon (top right) seems a little misaligned and is the wrong colour. -
Missing the border under the header -
Missing the drag down indicator at the top of the modal.
-
-
Back navigate icon not working very well. I need to tap multiple times for this to function. -
The header text size seems to be off. -
The close icon (top right) seems a little misaligned and is the wrong colour. -
Missing the border under the header -
Missing the drag down indicator at the top of the modal.
Edited by Michael Bradley