Library Portal

Home Page

As a site visitor, I want the home page to be my landing page to the site and allow me to search for resources and contribute resources to the library so that I can quickly get started in using the site's main features

Notes

• Defines the main page structure of the site

• Has a navigation bar for menu items

• Can be set as sticky on top

• Has a banner image

• Has the site title

• Can have a 1-2 introductory paragraph text

• Has a search bar

• Has a footer section

Additional Improvements

• Add a Home menu item

Site Language Selector

As a site visitor, I want to be able to select a different language for the site, so that I can switch the site language to one that I can understand

Notes

• Limited to the language added in the backend

• The default language is English

Additional Improvements

• When site language changes, the displayed resources also changes

• Remove the language filter in the sidebar

Home Page - Featured Resources Section

As a site visitor, I want to be able to view featured resources in the home page, so that I can quickly view the top or most view resources of the library

Notes

• Adding a call to action button to view the library page as an alternative to clicking the navigation menu

• Adding a call to action button to contribute resources as an alternative to clicking the navigation menu

Additional Improvements

• Displayed resources are controlled in the backend and selected by an admin user

Home Page - Quick Resources Statistics Section

As the site owner, I want to display a visual summary of the resource statistics, so that I can highlight the total number of contents of the library

Notes

• Three data cards that display the total number of exercises, education materials, and questionnaires in the library

Home Page - Sponsor Section

As the site owner, I want to be able to feature the sponsors of the project so that we can show them our appreciation and add to their impact visibility

Notes

• Allow admin to edit in a rich-text editor to allow them format this section as they would like

Library Page

As a site visitor, I want to be able to go to a library page, so that I can view all resources add to the site

Notes

• Users can switch tabs to view exercises, education materials, or questionnaires

• View more resources as you scroll

Additional Improvements

• Remove the view more button and display more resources as user scrolls down

Library Page - Search and Filter Sidebar

As a site visitor, I want to be able to search and filter library resources by category, so that I can view resources that match my search and chosen categories

Notes

• Search text only matches the resource title

• Categories list changes based on resource type

Additional Improvements

• Remove the language filter and allow the site language to control what resources are displayed

Exercise Cards

As a site visitor, I want to be able to view exercise information as cards, so that I can quickly view important information about the exercise

Notes

• Display the primary media of the exercise

• Display up to 3 lines of the exercise title

• Truncated with a '...' if more than 3 lines

• Has a tooltip to view the full title

• Display the recommended sets and reps target values

• Has a call to action link to view the exercise details

Exercise Details

As a site visitor, I want to be able to view the full exercise information, so that I can view the full details of the exercise

Notes

• Display all the media of the exercise in a carousel banner (auto cycle)

• Display full exercise title

• Display the recommended sets and reps target values (if available)

• Display dynamic fields

• Has a call to action button to add/edit translation

  • Call to action button to add/edit translation will only appear when viewing the content in a language other than English

• Has an attachments section

Additional Improvements

• Removed the related resources section

Exercise Details -  Attachment Section

As a site visitor, I want to be able to see any attached content to the resource, so that I can view and/or download them

Notes

• Multiple attachments is only available in exercise content

• The attachment section is on the right side of the exercise details

• Each attachment is listed in a single column

• Each attachment thumbnail will display the following:

  • Filename

  • Filesize

  • Filetype

Additional Improvements

• Removed the download button for attachments

• Removed ability to right-click on the image to prevent download

Contribute Resource Page

As a site visitor, I want to have a page to contribute resources to the library, so that I can add exercises, education materials and/or questionnaire content to the library

Notes

• Has a page title

• Can have a 1-2 introductory paragraph text

• Has a content upload section

• Can select what content type to upload

• Can submit contents

  • On submit, open Confirm Submission pop-up to confirm resources to submit and enter contributor details

• Can upload more than 1 content

  • Clicking the add more button saves the current form as an uploaded item opens a form for the next item

  • Clicking the cancel button loses all added resources and redirects the user to the library page

Confirm Submission Pop-Up

As a site visitor, I want to a final submit confirmation pop-up when submitting resources, so that I do a final review of the items I'm submitting

Notes

• The pop-up will list added resources per content type in a collapsible accordion

  • Each content type section displays the number of items selected to be uploaded

• Each resource will have a checkbox to select items that will be uploaded

• Require to enter contributor details

  • First Name - required

  • Last Name - required

  • Email Address - required

  • Agree to T&C checkbox

    • The final submit button will be disabled if this is not checked

  • Cancel closes the pop-up and goes back to the last add resource form

    • Should not lose previously added content (but not submitted)

Additional Improvements 

• Make the pop-up wider

• Accordion section opens 1 at a time

• Show total number of resources added in the accordion section

• Add total number of selected resources after the accordion

• Add an edit link to each resource item and when clicked will load the reource in the contribute resource form

• Add another pop-up to inform user that an email has been sent and that they need to click on the verfiication link in order to complete the submission process

• Add another checkbox to confirm if they want their name to be included in the acknowledgement page

Two Step Submission Confirmation

As the site owner, I want to add a 2-step confirmation process for resource submission, so that I can filter out spam/robot submissions

Notes

• After completing the submission pop-up form, an email is sent containing a link to the email set in the form

• Site vistor needs to click the link to verify submission

  • Link validity 48h

Additional Improvements

• If submission is not verified it will not be displayed in the resource list in the backed

Add Exercise Resource

As a site visitor, I want to be able to add an exercise resource, so that I can contribute to the library resources

Notes

• The exercise button is selected

• Has a media upload section

  • Same image requirements used in OpenTeleRehab

  • First media uploaded will be used a primary image to be shown in the cards

• Form section will be the same as the form used in OpenTeleRehab

• Can only upload English content first

Additional Improvements

• Pre-fill form with dynamic fields for (no value and can still be removed and edited)

  • Aim

  • Progressions and variations

  • Precautions

Add/Edit Translations for the Resource

As a site visitor, I want to be able to add/edit the translation of the resource that I'm viewing, so that I can improve the existing translation

Notes

• Applies to all content types

• Call to action button to add/edit translation will only appear when viewing content in a language other than English

• The page displays the media section

  • If the resource is an Education Material, add an option to add a different attachment for the specific language

• Form displays only fields that can be translated

  • English content will appear on top of the form field as a static text

• The page has a submit and cancel button

  • Submitting the translation will prompt the user to enter contributor details

    • First Name - required

    • Last Name - required

    • Email Address - required

    • Agree to T&C checkbox

      • The final submit button will be disabled if this is not checked

    • Cancel closes the pop-up

  • Cancel goes back to the content details page

Education Material Cards

As a site visitor, I want to be able to view education material information as cards, so that I can quickly view important information about the education materials

Notes

• Display the preview of the attached education material as a thumbnail of the card

  • PDF - the first page of the PDF file

  • Images - a preview of the image

  • Video - Video thumbnail (usually the first frame of the video)

  • Audio - Education Material icon

  • No attachments - Education Material icon (only happens for translated content that has no corresponding translated attachment)

• Display up to 3 lines of the education material title

  • Truncated with a '...' if more than 3 lines

  • Has a tooltip to view the full title

• Display the file type

• Has a call to action link to view the education material details

Education Material Details

As a site visitor, I want to be able to view the full education material information, so that I can view the full details of the education material

Notes

• Display the preview of the attached education material

  • PDF - full PDF using the browser's default viewer

  • Images - a preview of the image

  • Video - video player

  • Audio - audio player

  • No attachments - blank

• Display full education material title

• Display the file type and filename

• Has a call to action button to add/edit translation

  • Call to action button to add/edit translation will only appear when viewing the content in a language other than English

Additional Improvements

• Removed the related resources section

Add Education Material Resource

As a site visitor, I want to be able to add an education material resource, so that I can contribute to the library resources

Notes

• Education Material button is selected

• Form section will be the same as the form used in OpenTeleRehab

• Can only upload English content first

Questionnaire Cards

As a site visitor, I want to be able to view questionnaire information as cards, so that I can quickly view important information about the questionnaire

Notes

• Display the questionnaire icon as the thumbnail

• Display up to 3 lines of the questionnaire title

  • Truncated with a '...' if more than 3 lines

  • Has a tooltip to view the full title

• Display total number of questions

• Has a call to action link to view the exercise details

Questionnaire Details

As a site visitor, I want to be able to view the full questionnaire, so that I can view the full details of the questionnaire

Notes

• Display full questionnaire title

• Display the questionnaire description

• Display the total number of questions

• Display all questions, each in a collapsible frame

  • Collapsed will only show the question number

  • Expanded shows the actual question and choices/options if there are any

• Has a call to action button to add/edit translation

  • Call to action button to add/edit translation will only appear when viewing the content in a language other than English

Additional Improvements

• Removed the related resources section

Add Questionnaire Resource

As a site visitor, I want to be able to add a questionnaire resource, so that I can contribute to the library resources

Notes

• The questionnaire button is selected

• Form section will be the same as the form used in OpenTeleRehab

• Can only upload English content first

About Us Page

As the site owner, I want to have an About Us page, so that I can publish important information about HI and this library

Notes

• Has a page title

• Has a banner

• Has a content section for the about us content

Terms and Conditions Page

As the site owner, I want to have a Terms and Conditions page, so that I can publish the terms and conditions for users in using and contributing to the library

Notes

• Has a page title

• Has a banner

• Has a content section for the terms and conditions

Additional Improvements

• Will also contain the private policy content (added as an additional section/heading)

Acknowledgment Page

As the site owner, I want to see an Acknowledgement page, so that I can publish the top contributors in the library

Notes

• Has a page title

• Has a banner

Additional Improvements

• Has a content section for the list of all contributors and moderators in the library

  • Except those who request not to be included

  • Change avatar for the moderators

Login Page

As an admin/moderator, I want to have a login page, so that I can access the site's backend

Notes

• Has a half-page image

  • Will only be set 1 time, HI will give official image before go-live

• Has a login form

• Has a link for a password reset

• Need to use OpenTeleRehab logo

Account Verification

As the site owner, I want the new admin/moderator users to verify their accounts, so that I can validate that they received a proper account creation invite in their email

Notes

• We will be using KeyCloak's account validation by email

• Use OpenTeleRehab no-reply emailer

• Use the same process implemented in OpenTeleRehab

User Role Setup

As the site owner, I want to be able to define user roles for the backend users, so that we can restrict access to some parts of the site

Notes

• Admin

  • Backend access

  • Full administration rights

  • Can add/invite other admin users

  • Can add/invite/delete moderators

  • Can add/moderate resources

  • Can edit/moderate resource translations

  • Can add resource categories

  • Can edit static pages

  • Can add/edit UI label translations

• Moderator

  • Backend access

  • Can add/moderate resources

  • Can edit/moderate resource translations