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 resource title

• Categories lists changes based on resource type

Additional Improvements

• Remove the language filter and allow the site language to control what resources to be 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 the all 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

Backend Landing Page

As an admin/moderator, I want to have a landing page after my successful login, so that I quickly start to do my tasks

Notes

• Has some quick content statistic cards that show:

  • Total content

  • Total new submissions

  • Total new translations

• Users can click on those cards to quick access the resource list and view content, approve submissions, and approve translations

Backend Navigation Menu

As an admin/moderator, I want to have a navigation menu in the backed, so that I can access the other pages of the backend site

Notes

• The menu will be a sidebar

• Menu items will be:

  • Resources - displays resources by content type

  • Categories - displays categories by content type

  • Translations - lists UI labels that can be translated

  • Users - lists the backed users

  • Static Pages - lists all pages that can be customized

Additional Improvements

• Make the menu collapsible

• Only one level, the second level will be converted to tabs

User Profile Page

As an admin/moderator, I want to be able to update my profile, so that my details are up to date and I can also reset my password 

Notes

• Has the same form of OpenTeleRehab

  • Editable form and confirm save/cancel action if there are unsaved edits before leaving the page

• For password reset

  • Add a link to reset the password and let Keycloak manage the password reset process by sending a reset password email

Resources - Content List

As an admin/moderator, I want to be able to see the list of resources per content type, so that I can quickly view the submitted, approved, and declined contents and translations

Notes

• Applied for all content types

• Will list items as a data table

  • Columns

    • Title

    • Status

      • Approved - Approved by admin/moderator and can be seen in the library

      • Pending - Waiting to be reviewed by admin/moderator and hidden in the library

      • Rejected - Rejected by admin/moderator and hidden in the library

    • Uploaded By

    • Contributor Email

    • Upload Date

• We will add notification icons for items that are pending review and items with submitted translations

• Has the search/filter sidebar

Resources - Add/Edit/Review Content

As an admin/moderator, I want to be able to add/edit/review submitted content, so that I approved content submissions from site visitors and also add my own content

Notes

• When user clicks an item in the datable, they can edit content and publish the item

• Will have the same add/edit resource content interface of the frontend but without the option to upload more content

Automatic Google Translation of Approved Content

As the site owner, I want the system to automatically generate translations by Google Translate of approved contents, so that a base level translation can be displayed in the frontend for all of the sites available language

Notes

• Translations will be generated as soon as the submission is approved

• We will use Google Cloud to generate the translations

• We need to add Google Translate attribution when displaying the unedited translation in the frontent

  • https://cloud.google.com/translate/attribution

• If unaltered translation results are displayed on web pages that can be indexed by search engines, you are required to designate the translated text as machine translated content using the HTML markup reference.

Resources - Edit/Review Content Translations

As an admin/moderator, I want to be able to edit/review submitted content translations, so that I approved the submissions and update the official translation

Notes

• When user clicks an item in the datable, they can edit content translations and publish the item

• If translated by Google translate:

  • Edited translation will remove the Google Translate attribution

  • Remove machine translated content designation in the HTML markup

Additional Improvements

• In the language drop-down field, display a marker/icon to help identify which languages has translations

  • At the minimum change the font to bold and chage it's color (we will use HI-orange)

Block Mulit-User Editing

As an admin/moderator, I want to be able to block other users from editing the current resource that I'm editing, so that no one can override my content update

Notes

• The first user to open the resource should have the edit lock

• Edit lock is release when user leaves the resource details edit page

• Other users can view the edit page but all fields are disabled and has a notification on top showing who is currently editing the content

Resources - Download Exercises

As an admin, I want to be able to download exercise resources from the library, so that I can have a spreadsheet that I can use to upload them to the OpenTeleRehab system

Notes

• Has a download button on the bottom of the search and filter sidebar

• Clicking the download button will download all exercises on the list as a CSV file

  • Follows the template used in OpenTeleRehab

  • Assumption is that any categories here that is does match from OpenTeleRehab will be dropped, but the exercise will be uploaded

Categories List

As an admin, I want to be able to see the list of categories per content type, so that I can quickly view what are the available labels I can use to categorize the contents

Notes

• Applied for all content types

• Switching the conent type will diplay the categories available under that type

• Will have the exact the same UI of OpenTeleTehab

  • Each content type displays 3 columns that represents the category level

  • Each column list the category item

  • Each item will have an edit or delete buttons

  • Selecting the item will display the sub-items under it

  • There is a search box on each column to quickly search category item under that level

  • There is an "+" button to add a new category under that level

Create/Update Categories

As an admin, I want to be able create to categories per content type per level, so that I can add more categories to label the contents

Notes

• When I click on the "+", it will open a Create/Edit category pop-up

  • The pop-up has a language drop-down so that the user can specify translations of the categories

    • First language created is English by default

    • Other languages can only be chosen on edit mode

  • The pop-up has a required text field for category name

  • The pop-up has a required text field for category value(s)

    • User can enter multiple values separated by ';'

  • The pop-up has a Create/Save and Cancel button

    • Clicking create/save will add the category on the correct level it was created for

    • Clicking cancel will close the pop-up and cancel the creation/save process

UI Translations Page

As an admin, I want to be able to add translations of the UI, so that the system can be seen as properly translated on other language

Notes

• Will have the same UI of OpenTeleRehab

  • Has a dropdown to choose the platform to be translated

  • A search bar, filter and column buttons

  • A data table listing the available labels that can be translated that has the key and available languages as columns

  • First column will have an edit link to allow users to enter translations for each available language

• We have an addtional tab to add a new language

Languages Tab

As an admin, I want to be able to manage the languages for the site, so that I can view, add and delete languages of the site

Notes

• Will have the same UI of OpenTeleRehab

  • Has a button to add languages

    • Clicking the add button will open an Add language pop-up

      • Name

      • Code

      • Create/Edit and Cancel button

  • A search bar, filter and column buttons

  • A data table listing the available languages for the site

    • ID

    • Name

    • Code

    • Actions

      • Edit

      • Delete

User Page

As an admin, I want to be able to view the list of users of the system, so that I can add/invite/delete other admins or moderators to/from the system.

Notes

• Will have a datatable listing the users with the following information
  
  

  • First Name

  • Last Name

  • Email

  • Gender

  • Role

  • Last Login

  • Actions

    • Edit

    • Delete

• Will have an Add User button

Adding/Inviting New Users

As an admin, I want to be able to add/invite other admins or moderators, so that I can add more users to the system

Notes

• When the Add User button is clicked, a pop-up dialog will open containing the Add New User form

• The form will have the following:

  • Radio buttons to select role of user being created

    • Admin

    • Moderator

  • Email field

  • First Name field

  • Last Name field

  • Gender dropdown

  • Create and Cancel buttons

• Clicking create will send an account vefication link to the email entered in the form

• Account will not be active until the account creation link is verified

Editing User Information

As an admin, I want to be able to edit user information, so that I can update them if necessary

Notes

• When the edit action is clicked from a user in the datatable, a pop-up dialog will open containing the Edit User form

• The form will have the following:
  
  

  • Email field

  • First Name field

  • Last Name field

  • Gender dropdown

  • Save and Cancel buttons

• Updating the email will resend an email verfication link

• Account will not be active until the email link is verified

Deleting Users

As an admin, I want to delete other admins or moderators, so that I can remove other users from the system

Notes

• When the delete action is clicked from a user in the datatable, a pop-up dialog will open asking for delete confirmation

• Only disabled users can be deleted

Disabling Users

As an admin, I want to disable other admins or moderators, so that I can prevent them from accessing the system

Notes

• When the disable action is toggled from a user in the datatable, a pop-up dialog will open asking for disable confirmation

• Disabled users cannot login into the system

Static Pages

As an admin, I want to create static pages, so that I can create content for About Us, Home, Terms and Conditions, and Acknowledgement pages

Notes

• Create a template form for creating static pages

  • About Us and Terms and Conditions

    • Banner

    • Page Title

    • Rich Text Editor for main content

  • Home

    • Banner

    • Page Title

    • Rich Text Editor for intoduction content

      • Should we add a limit?

    • Featured Section Component

      • Allow admin to select 8 resources from the dropdown

    • Quick statistics component

  • Acknowledgement

    • Banner

    • Page Title

    • Rich Text Editor for intoduction content

    • Top contributors component

Contributor Components

Notes

• Crate a component that will display the contributor information

Additional Improvements

• Will add all contributors that agree to have their name posted

• Will also add all moderators

• Create a different avatar for moderators

• Allow the admin to remove/hide people from the list

SEO Basic

Notes

• URL auto-generated from resource/page title 

• H1 autogenerated from resource/page title

• Meta title auto-generated from resource/page title

• Meta description auto-generated from resource/page title

• OG auto generated from resource title / URL https://ogp.me/

• Editable Robots.txt file (for developer use only)

• Custom 404 page

• Hreflang implementation

Additional Improvements

• Create an XML sitemap