bcgov
No SBC Connect Account
As a host, after I have authenticated by Service BC and the system has checked to see if I have an SBC Account
And I don't have an SBC Account
I want to be redirected to the "Application Details View" page where I see the "Contact Information" Stepper highlighted
And I see the contact information section
And it is populated with data from my Service BC Card Account
Then I can fill out the rest of my information
So that I can enter my contact information
Context:
When a host chooses to create a new SBC account regardless if an existing SBC account exists (host does not have an existing account or chooses to create a new one), contact information is blank and host needs to manually enter.
📏 Business Rules
- [ ] Name will include First Name (required, text field), Last Name (required, text field), Date of Birth (required, dropdown)
- [ ] First name and last name should be pre-populated from the BC Services Card (BCSC) information
- [ ] First name and last name populated from BCSC should be locked and cannot be edited by the user
- [ ] Date of Birth cannot be a future date
- [ ] Contact details will include Phone number (required field, number), extension (optional, number), email address (required), Fax number (optional, number)
- [ ] Mailing address - the country and province should be default to Canada and BC and other details include Address (required, text), Address line 2 (optional, text), City (required, text), and Postal Code (required, text).
- [ ] When country is set to Canada, when a user starts to type the address line, the search result in Canada post Address Complete should return to some address suggestions.
- [ ] If a country outside of Canada is selected, details include Country (required, dropdown), address (required, text), Address line 2 (optional, text), City (required, text), Postal Code/ Zip Code (required, text) and Province/State (required, text) - TBD
🎨 UX/UI Figma Link:
https://www.figma.com/file/R9GF5wvwq2TrnbnsbhPfvV/STR-Host-Application-Tickets?type=design&node-id=716-34333&mode=design&t=E5IWCOhmDttGKyE1-4
🎭 Story Scenarios
Automatic first view - "STR Registration" Form with "Contact Information" stepper highlighted
- Given that I am authenticated by BC Services card, my session is active,
- Then the first page in "Application Details View" form is "Contact Information"
- Then the "Contact Information" stepper in the progress bar is highlighted
- Then the form should be prepopulated with my contact information gathered from my BC Services Card
- And the rest of the fields on the "Contact Information" form are blank
- And I can fill out the blank fields
Mikaela this is where you left off!!!
Host Accesses the "My Contact Information" view While Not Authenticated
- Given the host is not authenticated and attempts to navigate to the "My Contacts" view,
- When the navigation attempt occurs,
- Then the system redirects the host to the login page,
- And after successful authentication, the system redirects the host back to the "My Contact Information" view,
🔗 Mural Links
Story in Mural: [https://app.zenhub.com/workspaces/str-65b2a7146835aa0cdf315b79/issues/gh/bcgov-registries/str/44]
🛠️ Parameters Definition
click to view parameter definitions
- [Role]: User role or persona targeted by this issue.
- [Feature/Action]: Action or feature being requested.
- [Benefit/Outcome]: Expected benefit or outcome from implementing the feature/action.
- [Authentication Method]: Method used for user authentication.
- [Form Name]: Specific form or section referenced.
- [Specific Action]: Particular action taken by the user.
- [Expected Result]: Desired outcome after action is taken.
- [Invalid Data]: Examples of invalid data that might be entered.
- [X] seconds: Exact time frame within which an action should complete or a page should load.
- [Specific Page]: Specific page or section of the application.
- [Link Name]: Text or identifier of a link or button.
🌍 Global Scenarios
click to see global scenarios
Saving, Cancelling, and Reverting
Scenario 1: Cancellation and Reverting Changes
- Given I have made changes to [Form Name] but decide not to save these changes
- When I click a "cancel" button or navigate away from [Form Name]
- Then any unsaved changes should be discarded, and [Form Name] should revert to its previous state.
Scenario 2: Validation and Error Handling
- Given I am updating [Form Name] from the newly opened section below the progress bar
- When I enter invalid data (such as [Invalid Data]) and attempt to save
- Then I should receive immediate feedback indicating the error, and the information should not be saved until corrected.
Scenario 3: Confirmation of Successful Update
- Given I have entered new or updated information in [Form Name]
- When I click the save button and the data is valid
- Then I should receive a confirmation message indicating [Form Name] has been successfully updated.
Internet Connection
Scenario 1: Standard Internet Connection
- Given I am accessing the website from a standard internet connection
- When I navigate to any page on the site
- Then the page should load completely within 2 seconds, ensuring a fast and efficient user experience.
Scenario 2: Optimizing Dashboard for Hosts with Low Internet Connectivity
- Given a user accesses [Form Name] with a low-speed internet connection
- When the user attempts to load and interact with the dashboard page
- Then [Form Name] should prioritize critical content and functionality, loading essential elements first to ensure usability.
Security and Privacy
Scenario 1: Security and Privacy Settings
- Given I am editing [Form Name]
- When I access the form
- Then I should have the option to update my privacy settings related to who can view [Form Name].
Scenario 2: Secure My Information
- Given I am a user entering personal or login information into [Form Name]
- When I submit this information through any form or login page
- Then the platform should encrypt this data during transmission and storage, safeguarding it against unauthorized access.
Mobile Responsiveness
Scenario 1: Mobile Responsiveness
- Given I am accessing [Form Name] on a mobile device
- When I click on the "[Link Name]" link
- Then [Form Name] should display correctly and be easily editable on my device, ensuring a responsive design.
🌐 Accessibility Scenarios
click to view accessibility scenarios
Scenario: Navigating the Page Using Keyboard Only
- Given I am a non-mouse user accessing [Specific Page]
- When I use keyboard navigation (Tab, Shift + Tab, Enter, Arrow keys)
- Then I should be able to fully interact with [Specific Page], including buttons, dropdowns, and modals.
Additional Accessibility Scenarios
- Using the "Skip to Main Content" link
- Interacting with form fields using the keyboard
- Navigating dropdown menus using arrow keys
- Closing modals using the Escape key
- Navigating paginated content using keyboard shortcuts
Scenario: Ensuring Usability with Color-Blind Friendly Design
- Given I am a user with color vision deficiency
- When I view charts, graphs, status indicators, and use interactive elements like buttons or links
- Then these elements should use patterns, shapes, and additional indicators beyond color to ensure usability and accessibility.
🎨 UX/UI Considerations
click to view UX/UI considerations
Layout and Aesthetics
- Design Principle: Describe any specific design principles or themes that need to be incorporated.
- Visual Hierarchy: Outline how information should be prioritized visually on the page.
Responsiveness and Adaptability
- Device Compatibility: Ensure the design is responsive and adaptable across different devices and screen sizes.
- Orientation Adaptability: Mention if the design should adapt to changes in device orientation.
User Flow and Interaction
- Navigation: Describe the intended navigation path for users within this feature or page.
- User Actions: Detail any specific user actions (e.g., clicks, swipes) and their expected outcomes.
Accessibility and Inclusivity
- Color Contrast: Ensure sufficient color contrast for readability and accessibility.
- Interactive Elements: Specify guidelines for button sizes, hit areas, and interactive element visibility.
https://app.mural.co/t/citzservicebcbcros0435/m/citzservicebcbcros0435/1706554024951/153dc4e4f3fbbd7cfc1352e0c804cb105960321e?wid=0-1709158512546
@mbertucci not sure if I need to add business rules here. All the rules are covered under 63, 52 and 67.
@samIndustrio
Global issues on the Step 1
- Drop downs are gray before selecting - needs to be white
- Fields not retaining information - when delete/edit
- Validation does not highlight where the error is - does not highlight red when you go to the next step or miss unless you click in to the field
@fionazhou-jsb @mbertucci Addressed in https://github.com/bcgov/STRR/pull/21 - deployed to test
@samIndustrio Hey Sam the birthdate day for a secondary contact is letting me go past 31 days. Please fix.
PR 23 fixes birthdate issue
PR 21 fixed Gray dropdowns Field state loss Validation highlights not appearing on fields
Exploratory Testing Charter for "Contact Information Page" (No SBC Connect Account)
Mission:
Explore the "Contact Information" page of the STRR Form to identify potential usability issues, field validation gaps, and workflow inconsistencies for users without an SBC Connect Account. Ensure that the page adheres to the specified business rules and properly pre-populates data from the BC Services Card, with appropriate handling of form navigation and validations.
Focus Areas:
-
Pre-Populated Data Handling:
- Verify that the First Name and Last Name are correctly pre-populated from the BC Services Card (BCSC) and locked from editing.
- Check if other fields, such as Date of Birth, Phone number, and Email, remain blank as expected.
-
Field Validations:
- Ensure field-level validation works for mandatory fields (e.g., First Name, Last Name, Date of Birth, Phone number, Email).
- Test if validation for the Date of Birth correctly restricts future dates.
- Check placeholder error messages for validation feedback.
-
Form Navigation & Workflow:
- Investigate if clicking the "Next" button properly saves the form's data and redirects the user to the next step in the form.
- Test the behavior when data is missing or invalid but the user clicks "Next." Does the system prevent moving forward or allow navigation as discussed?
-
Address Field Behavior:
- Test address lookup using Canada Post Address Complete for Canadian addresses.
- Explore whether suggestions are available for non-Canadian addresses, and check handling when the country is set to something other than Canada.
-
Session Management:
- Simulate a scenario where the session times out. Test if the system correctly redirects the user to reauthenticate and returns them to the correct page afterward.
-
UI/UX Validation:
- Verify the "Contact Information" stepper is highlighted appropriately in the form's progress bar.
- Test desktop and mobile views, ensuring the layout is responsive and that the "No SBC Account" menu dropdown is absent.
Key Variations:
- Test both valid and invalid inputs for each field, especially for postal codes, phone numbers, and date fields.
- Explore the impact of choosing a non-Canadian country for the address field.
- Simulate different edge cases, such as reauthentication flows after a session timeout.
Deliverables:
- Document issues related to data pre-population, field validation failures, navigation inconsistencies, and usability concerns.
- Capture any discrepancies between the Figma UX design and the actual implementation of the form.
