Story 0.2.2. Rework the register popup window

General info

This story focuses on improving the user interface and usability of the registration popup window on saclab.com. The changes include the display of clear password rules when a user interacts with the password input field and adjusting the spacing and margins of the form according to the new design guidelines.

User story

As a user,
I want to see clear password rules and improved spacing in the registration popup
So that I can easily create an account with the correct password requirements and a better user interface.

Visual design

https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?page-id=7940%3A19953&node-id=7940-19971&node-type=frame&viewport=711%2C705%2C0.66&t=wgq4f9JYIURq5rT6-1&scaling=min-zoom&content-scaling=fixed

Acceptance criteria

01

Scenario: Display password rules on the register popup window

Given: I am on the registration popup window

When I click on the password input field

Then I should see a list of password rules that include (similar to when the user wants to change password):

Screenshot 2024-10-14 at 15.19.14.png

AND all password interaction should follow the rules as outlined in the "Story 10.1.2. My account settings Redesign" document available at: Story 10.1.2. My account settings Redesign

Figma: https://www.figma.com/proto/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?page-id=7940%3A19953&node-id=7940-19971&node-type=frame&viewport=711%2C705%2C0.66&t=wgq4f9JYIURq5rT6-1&scaling=min-zoom&content-scaling=fixed

Video:

Screen Recording 2024-10-14 at 15.20.15.mov

02

Scenario: Adjust spacing and margin in the register popup window so it fits with the new 4-grid rule

When I am on the registration popup window

Then the spacing between form fields should follow the updated design guidelines (24px)

And the margins of the popup should follow the updated design guidelines (36px)

Screenshot 2024-10-14 at 15.26.28.png

Screenshot 2024-10-14 at 15.26.13.png

Comments

Leave a Reply