Story 10.1.2. My account settings Redesign

General info

We are redesigning the "My Account Settings" section under "My Account" to improve user experience, simplify navigation, and enhance interaction with subscription and password management. This update aligns the page elements with the UI grid and style guide, removes unnecessary elements, and ensures GDPR compliance. The aim is to provide dynamic feedback, intuitive error handling, and a cohesive design across all device types.

Changes

  • General Layout:

    • Align the UI to the grid and UI style guide.

    • Remove unnecessary elements such as the display name.

    • Review and tickbox the newsletter subscription section.

  • Subscription Section:

    • Ticking/unticking will subscribe/unsubscribe from the newsletters.

    • Two tickboxes: "Bag Drop & More Newsletter" and "Your Investor Brief."

  • Password Section:

    • Completely new UI for the password change section.

    • Gguidelines to create strong passwords, dynamically updating as the user types.

    • Live feedback on password validity (e.g., length, character mix, numbers, symbols).

    • Error messages appear dynamically throughout the user journey, not only when submitting the form.

    • Enable the eye icon to show/hide passwords, working individually for each text field.

  • Email and Subscription Changes:

    • The "Enter your password" field appears dynamically when the user starts typing a new email address.

    • Validate email address format and show an error if invalid.

    • Display error message "Invalid Password" when the password is incorrect.

    • Show the same "Your changes have been saved!" success popup for both subscription and email changes.

    • Warn the user with a "Are you sure you want to leave this page?" popup if they try to navigate away without saving.

User Story

As a customer, I can view and update my account settings, including my email address, subscription preferences, and password, through a well-structured and intuitive interface. Changes to my email and subscriptions are processed simultaneously with clear feedback and validation, while the password section guides me to create a strong and secure password.

Visual Design

Acceptance Criteria:

#

Acceptance Criteria

Screenshots

01

Given the user is logged in
When they visit the "My Account Settings" page
Then the page should display the user’s name and email pre-filled in the relevant fields.

Screenshot 2024-09-24 at 11.38.20.png

02

Given the user is in "My Account Settings,"
When the user types a new email address
Then a password confirmation field should appear below the email input.
And the system should validate if the email is correctly formatted.

Screenshot 2024-09-24 at 11.39.33.png

03

Given the user enters an invalid email format on mobile or desktop
Then an error message "Please enter a valid email address" should be displayed.

Screenshot 2024-09-24 at 11.40.04.png

04

Given the user enters an incorrect password during email change on mobile or desktop
When the user clicks “Save changes”
Then an error message "Invalid Password" should appear.

Screenshot 2024-09-24 at 11.40.51.png

05

Given the user makes changes to their email or subscription preferences or First name or Last name successfully
When they save the changes
Then a success message "Your changes have been saved!" should be shown.

Screenshot 2024-09-24 at 11.42.42.png

06

Given the change of First name or Last name or email by the user is sucessful

Then the new information gets synced to Hubspot and Airtable (function already existing)
When the email address change is successful
Then the old email gets saved in new airtable field in Table “Clients” called “previous eMail”.
When the email gets changed a second time
Then It should be added to the existing old email adress in field “previous eMail”.

Screenshot 2024-09-24 at 13.44.46.png

07

Given the user makes changes to their email
When they save the changes
And the change is successful
Then a success message "Your changes have been saved!" should be shown.
And send email to old email adress
Template EN: https://us12.admin.mailchimp.com/templates/edit?id=10086348
Subject EN: Important: Your SACLÀB Account Email Address Has Been Changed
Preview EN: Your SACLÀB account email was changed. If you didn’t do this, contact us immediately!
Template DE: https://us12.admin.mailchimp.com/templates/edit?id=10086349
Subject DE: Wichtige Mitteilung: Ihre SACLÀB-Konto-E-Mail-Adresse wurde geändert
Preview DE: Ihre SACLÀB-Konto-E-Mail-Adresse wurde geändert. Wenn Sie das nicht waren, kontaktieren Sie uns sofort!
Template FR: https://us12.admin.mailchimp.com/templates/edit?id=10086350
Subject FR: Important: L’adresse e-mail de votre compte à SACLÀB a été modifiée
Preview FR: L’adresse e-mail de votre compte à SACLÀB a été modifiée. Si ce n’était pas vous, contactez-nous immédiatement !

And send email to new email adress
Template EN: https://us12.admin.mailchimp.com/templates/editor?id=10086353
Subject EN: Your New SACLÀB Account Email is Confirmed.
Preview EN: Your SACLÀB email has been updated. Log in to your account.
Template DE: https://us12.admin.mailchimp.com/templates/editor?id=10086354
Subject DE: Ihre neue SACLÀB-Konto-E-Mail-Adresse wurde bestätigt.
Preview DE: Ihre SACLÀB-E-Mail wurde aktualisiert. Melden Sie sich in Ihrem Konto an.
Template FR: https://us12.admin.mailchimp.com/templates/editor?id=10086355
Subject FR: Votre nouvel e-mail pour votre compte à SACLÀB a été confirmé.
Preview FR: Votre e-mail à SACLÀB a été mis à jour. Connectez-vous à votre.

Screenshot 2024-09-26 at 13.42.41.pngScreenshot 2024-09-26 at 13.42.17.png

08

Given the user modifies their email or subscription preferences and
When they try to navigate away without saving
Then a confirmation popup "Are you sure you want to leave this page?" should appear.

Screen Recording 2024-09-24 at 11.44.17.mov

09

Given the user unticks either of the newsletter checkboxes, When the user saves the changes successfully on mobile or desktop
Then the system should unsubscribe them from the respective newsletters
And they should see a confirmation message: "Your changes have been saved!"

10

Given the user clicks the eye icon in the password field
Then the corresponding password input should toggle visibility. (function already existing)
And only the field in question should toggle, leaving the others unchanged. (function already existing in LogIn)
And “eye” icon changes (function already existing in LogIn)

ScreenRecording_09-24-2024 12-16-24_1.MP4Screen Recording 2024-09-24 at 11.47.05.mov

11

Given the user tries to change the password
When the current password the user typed in is not correct AND The user tries to click in “New password”
Then Display Error message “Invalid password”

Screenshot 2024-09-24 at 17.51.44.png

12

Given the user starts typing a new password
Then the password guidelines should display dynamically, updating with each character entered.
And once a requirement met (8+ characters, mix of cases, numbers, symbols), it’s guideline icon should turn green.
And once all requirements are met, the user can click into field “confirm new password”

Screenshot 2024-09-24 at 12.20.14.png

13

Given the user starts typing a new password on mobile or desktop
When the password doesnt fulfill more than one guidline
And User tries clicking in field “Confirm new password”
Then display error message “Unsafe password, check our recommendations”

Screenshot 2024-09-24 at 17.38.32.png

14

Given the user starts typing a new password on mobile or desktop
When the password doesnt fulfill one singular guidline (of the 4 we have)
And User tries clicking in field “Confirm new password”
Then User can’t click in field “confirm new password”
And display error message depending on which guidline is not met.
Error Messages:
1. Password must be at least 8 characters long
2. Use both upper- and lower-case letters
3. Include at least one number
4. Include at least one symbol

Screenshot 2024-09-24 at 17.25.45.png

Screenshot 2024-09-24 at 17.35.23.png

15

Given the user starts typing a new password on mobile or desktop
When the password is the same as the existing password
And the user clicks “change password”
Then display error message “Use a different password from your current one”

Screenshot 2024-09-24 at 17.38.02.png

16

Given The new password fulfils all guidlines
When the user starts typing in field “confirm new password” on mobile or desktop
And the password is not the same as “new password”
Then display error message “Passwords must be identical”

Screenshot 2024-09-24 at 17.37.23.png

17

Given the user typed in “Confirm new password” and it’s the same as “New Password”
When user clicks “Change Password” on mobile or desktop
Then display PopUp “Your password has been successfully changed!”
And send out email to customer “Your SACLAB password has been changed” (function already existing)

Screenshot 2024-09-24 at 18.08.36.png

Comments

Leave a Reply