bcgov
Choose SBC Account or Create a New One
📖 User Story
🔹 As an host, authenticated with Service BC, 🔹 I want to be presented with a screen that shows all my existing accounts with SBC-Connect, and provides options to either select one of these accounts to proceed 🔹 so that I can see a print out of what option I chose
Context:
We want the system to check if a host has an existing SBC Account or not and redirect host to the corresponding page. Hosts with existing SBC Connect account(s) can choose which account to use or choose to create a new account, then direct host to the "STRR Registration Form" and the "Contact Information Page"
. If hosts have no existing SBC account, direct them directly to the 1st page of the registration form.
📏 Business Rules
- [ ] If there is no existing SBC-connect account, direct user to #20659
- [ ] If there are existing SBC-connect accounts, show options to select an existing account to proceed OR create a new account Figma Desktop mockup Figma Mobile mockup Figma Mobile prototype
- [ ] If selecting use an existing account, direct user to #20659
- [ ] If selecting create a new account, redirect user to #20659
🎭 Story Scenarios
Scenario: System checks for an existing SBC-Connect account behind the scenes
Given I am a user who has successfully authenticated with service BC,
When I already have and SBC Connect account
Then I should be presented with a screen that:
- Lists all my existing accounts with SBC-Connect,
- Offers an option to select any of these accounts to proceed,
- Offers an option to create a new account
Scenario: User does not have an SBC-Connect account and is directed to application details view
Given I am a user who has successfully authenticated with service BC,
And the system is set to check for existing accounts with SBC-Connect on my behalf
When the check reveals that I do not have any existing SBC accounts
Then I should be directly navigated to the application details view
And this transition should occur without displaying any messages or options related to account creation.
Scenario
Given I am on the account selection page When I have selected one of my existing accounts Then I am presented with a page that shows all of my information pulled from SBC Connect
Given I am on the account selection page When I have selected to create a new account Then I am presented with a page that tells me that I am creating an SBC Account
Given I have been authenticated using my BC services Card When application has checked and I don't have an SBC Connect Account already Then I am presented with a page that tells me that I am creating an SBC Account
🔗 Mural Links
Story in Mural: https://app.mural.co/t/citzservicebcbcros0435/m/citzservicebcbcros0435/1706554024951/153dc4e4f3fbbd7cfc1352e0c804cb105960321e?wid=0-1710802475499
🌐 Accessibility Scenarios
Keyboard Users
Scenario: Comprehensive Keyboard Navigation Given I am a keyboard user on the website When I use the Tab key to navigate through the website Then all interactive elements should be accessible and highlighted And I should be able to activate these elements using the Enter or Space key
Scenario: Full Content Accessibility via Keyboard Given I am a keyboard user navigating the website When I traverse through different pages and sections Then all content should be fully accessible using the keyboard alone And there should be no traps that prevent me from navigating away using the keyboard
Screen Reader Users
Scenario: Accessible Image Descriptions Given I am using a screen reader on the website When I encounter images Then each image should have descriptive alt text that conveys the same message as the image
Scenario: Structured Navigation for Screen Readers Given I am navigating the website using a screen reader When I move through different page elements Then the content should be structured with proper headings And the reading order should be logical and sequential
Scenario: Descriptive Form Fields Given I am filling out a form using a screen reader When I navigate through the form fields Then each field should be clearly labeled with descriptive text And instructions should be directly associated with their respective inputs
Low Vision Users
Scenario: Effective High Contrast Mode Given I am a user with low vision on the website When I enable high contrast mode Then all content should display with high color contrast suitable for low vision And the layout should remain coherent and unchanged
Scenario: Text Resizing Accommodation Given I am a user with low vision on the website When I increase the text size Then the text should resize without loss of information or functionality And the page layout should adapt accordingly without disrupting the user experience
Scenario: Personalized Styling Preferences Given I am a user with low vision adjusting settings on the website When I customize my styling preferences, including colors, fonts, and spacing Then these adjustments should be applied consistently across all pages And the changes should persist during my entire session or until altered by me
🌍 Global Scenarios
## Data Validation # Mikaela to confirm: Do we need to do these for MVP - data validation required for inputing data in the right format - as defined by business rules.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.
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.
Janis had mentioned that there was a page already built for this, but that it doesn't seem to be currently active in any of the environments that we checked. Here is the screenshot of the mockup:
If we are building/re-building this screen, perhaps we can use the existing mockup as a starting point. Janis can provide direction on where these screens are located, and @andyyanggov has offered to fill in the design gap while I am gone next week.
I've created a placeholder page for the design context and linked in the ticket description above
@atronse story updated with a new scenario to reflect directing the user to the application :) Thanks for following up on this
Hey Devs.. see my post in Teams related to this story.. we need to let SBC Connect know that the user is adding the STRR Product to their account when they click on their account.. https://teams.microsoft.com/l/message/19:[email protected]/1713293411052?tenantId=6fdb5200-3d0d-4a8a-b036-d3685e359adc&groupId=457056c7-b3c8-45e6-87ec-72d20b3afc04&parentMessageId=1713223797188&teamName=External%3A%20STRR&channelName=Product%20Team%20Chat&createdTime=1713293411052
Testing can take place here https://strr-ui-dev.web.app/account-select/?test=true for just the accounts UX Testing can take place here https://strr-ui-dev.web.app/account-select/ with a BC services card test account This has been tested by the dev team The Test environment (ttps://strr-ui-test.web.app/account-select/ )seems to be lacking some devops variables, working with Patrick to sort it out but deploy there is working, but the auth redirect is not working.
