Rework the register window (step 3 – sign up to continue)

General info

This story focuses on improving the user interface and usability of the registration window on saclab.com/sell (step 3). 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 window
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 window

Given: I am on step 3 of the SYB and registering to continue submitting my bag

When I am on the registration window

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:

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=8495-8620&m=dev

Mobile: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=8503-20924&m=dev

02

Scenario: Adjust spacing and margin in the SYB register window (step 3) so it fits with the new 4-grid rule

When I am on step 3 of the SYB and registering to continue submitting my bag

Then the spacing between form fields should follow the updated design guidelines

And the margins of the page should follow the updated design guidelines

Comments

Leave a Reply