dimak1 commented 3 months ago

Design Brief: Short Term Rental Registry (STRR) Marketing/Landing Page

Objective

We need a landing page for the Short Term Rental Registry (STRR). Users will land here after clicking a link from the Housing website. The page should be easy to use, look great, and guide users straight to the SBC Connect STRR Application with a clear call to action (CTA).

What We’re Looking For

No Start/Landing Page: Users should land directly on the STRR page.
No Navigation Bar: Keep the focus on STRR content and the CTA—no extra navigation.
Open in a New Tab: When users click the CTA, the STRR Application should open in a new tab.
Consistency: The design should match the look and feel of both the Housing site and SBC Connect. - Clarity: Make sure the page clearly explains the purpose and benefits of the STRR.
Engagement: The design should make users want to click that CTA.

Creative Direction

Go for a modern, clean, and welcoming design. Use images or icons that represent short-term rentals and housing.

User Experience: The layout should be simple and intuitive, with a clear and prominent CTA. Ensure the page is fully responsive and accessible to all users, including those with visual impairments. - Innovation: Feel free to look at the big picture - if you see ways to solve other challenges we have such as role assignment from the Landing page please propose your innovations.

Who to Work With

BA: Make sure the content meets Housing’s guidelines and gets their sign-off before we go live.

Technical Architect:

[ ] - Check if the "no navigation" design and opening the application in a new tab are technically feasible.

What Needs to Get Done

Wireframes:

[ ] review the Deloitte wireframes with Fiona and Housing
[ ] Create the initial wireframes.
[ ] Review with PO and BA
[ ] Review with the Technical Architect.
[ ] Include Contact Information for SBC so that users can contact Registries if they have any questions or encounter any technical issues during account creation/selection process

Mockups:

[ ] Finalize the high-fidelity mockups.
[ ] Incorporate feedback from Housing and the Technical Architect.

Design Specs:

[ ] Document fonts, colors, and interactive elements. (not sure if you need to do this or not for every design
[ ] Final Review with the Technical Architect for any tech concerns. ( PO will do this with you

Timeline

Sprint Deliverables Design Sprint: Sprint 11

Development Sprint: Sprint 12

What’s Next for PO Confirm the design direction with the Housing team and Technical Architect.

[ ] Get sign-off from Housing.
[ ] Write user story
[ ] BA to review and write Business Rules
[ ] Review with TA before moving to Refinement
[ ] Move to Refinement

Draft story below

User Story: Short Term Rental Registry (STRR) Marketing/Landing Page Development

As a Team Lead
I want users to go to a "marketing" or landing page where there is information about the Short Term Rental Registry Application
So that they can easily access relevant information and be directed to the SBC Connect STRR Application through a clear call to action.

Context

The creation of a marketing/landing page will live in SBC Connect it is essential for effectively communicating the purpose and benefits of the Short Term Rental Registry Application (STRR). This page will serve as the first point of contact for potential users, providing them with clear, concise, and engaging information. The content will be informed by insights gained from interviews with the housing department, ensuring that it aligns with user needs and organizational objectives.

To get to this page the users will click a link from Housing that opens this page and then they click Apply on this page. This page also lives in SBC Connect. We will be able to access it by clicking a link on a card from Registries. https://www.bcregistry.gov.bc.ca/

UX/UI Links

Wireframes: [Link to wireframes]
Design mockups: [Link to design mockups]
Prototype: [Link to prototype]

Business Rules

The landing page must be easily navigable with a clear and prominent call to action (CTA) directing users to the SBC Connect STRR Application.
Content must include key information about the STRR Application, including its purpose, benefits, and how to get started.
All content must be vetted and approved by the housing department before publication.
The landing page must be mobile-friendly and optimized for various screen sizes.

Story Scenarios

Main Scenario:

Given a user lands on the marketing/landing page after they click a link from the Housing website ( to be determined When they review the provided information about the STRR Application,
Then they should see a clear call to action to access the SBC Connect STRR Application.

Scenario 1:

Given a user accesses the landing page on a mobile device,
When they view the content,
Then the page should be fully responsive, ensuring all elements, including the call to action, are accessible and usable.

Scenario 2:

Given that the content on the page is subject to change,
When the housing department provides updated information,
Then the page content should be updated promptly to reflect the latest details.

Scenario 3:

Given a user with visual impairments,
When they navigate the landing page,
Then all content should be accessible, including the use of screen readers, high-contrast text, and descriptive alt-text for images.

🌐 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

### Internet Connection #### 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. #### Low-Speed Internet Given a user accesses "Application Details View" with a low-speed internet connection defined as under [specific speed] Mbps When the user attempts to load and interact with the dashboard page Then the "Application Details View" should prioritize critical content and functionality, loading essential elements first to ensure usability. #### Mobile Responsiveness Given I am accessing "Application Details View" on a mobile device When I click on the "any" link Then "_____ " should display correctly and be easily editable on my device, ensuring a responsive design.

mbertucci commented 3 months ago

Discussing Start/Landing Page with Richard on Aug 2 Navigation is being worked out by Alexis Examiners application will open in a new tabe Host will open in the same tab