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 |
|
|
02 |
Given the user is in "My Account Settings," |
|
|
03 |
Given the user enters an invalid email format on mobile or desktop |
|
|
04 |
Given the user enters an incorrect password during email change on mobile or desktop |
|
|
05 |
Given the user makes changes to their email or subscription preferences or First name or Last name successfully |
|
|
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) |
|
|
07 |
Given the user makes changes to their email And send email to new email adress |
|
|
08 |
Given the user modifies their email or subscription preferences and |
|
|
09 |
Given the user unticks either of the newsletter checkboxes, When the user saves the changes successfully on mobile or desktop |
|
|
10 |
Given the user clicks the eye icon in the password field |
|
|
11 |
Given the user tries to change the password |
|
|
12 |
Given the user starts typing a new password |
|
|
13 |
Given the user starts typing a new password on mobile or desktop |
|
|
14 |
Given the user starts typing a new password on mobile or desktop |
|
|
15 |
Given the user starts typing a new password on mobile or desktop |
|
|
16 |
Given The new password fulfils all guidlines |
|
|
17 |
Given the user typed in “Confirm new password” and it’s the same as “New Password” |
















Leave a Reply
You must be logged in to post a comment.