Fig 1.
Methodology used in this research.
Fig 2.
The websites’ main screens are represented by blue squares. Secondary screens are represented with green. Possible actions that do not imply a new screen are represented by white squares. The secure server, which is an external server, is represented with orange because it will be implemented separately from the website for security reasons. The flow among actions and screens are represented with arrows. (a) End-user website flow chart. (b) Health professional website flow chart.
Fig 3.
BeatHealth global architecture components.
PwPD will use BeatHealth system from the smartphone app which records their data and also allows them to access a brief summary of their own data. PwPD can access to their complete data saved in the cloud from the end user website. Health professionals can monitor PwPD data using the health professional website if they have been previously granted access by the PwPD. Data is saved in an external database and processed by cloud computing. The saved data requires a high level of security and access control.
Fig 4.
Concept and design tools used.
(a) Card sorting example. (b) Paper prototyping example.
Fig 5.
Example of the mock-up used in the participatory design.
Fig 6.
(a) Shows an example of tick symbol considered to be changed. (b) Includes play button in the mock-up used in participatory design.
Fig 7.
Paper prototype screens used in the Wizard-of-Oz mobile application mock-up evaluated in the first iteration.
Table 1.
Task evaluation results for the mobile application–First iteration.
Fig 8.
Paper prototype screens used in second iteration.
Text is in French as before. (a) Main menu, (b) settings menu, (c) music selection by genre.
Table 2.
Task evaluation results for the mobile application–Second iteration.
Fig 9.
Main menu screen in French.
Fig 10.
Health professional website mock-up.
View patient results example in French.
Table 3.
Tasks performed by health professionals evaluating the website.
Table 4.
End-users evaluation, task completion rate results.
Fig 11.
BeatHealth mobile application session screen flow.
(a) Screen flow from home screen through preparation for session. (b) Continued screen flow from the end of session preparation, through the session itself and eventually the end of session and progress screen.
Fig 12.
Final design of the BeatHealth website.
(a) End-user website example. Main menu screen. (b) Health professionals’ website. Patient results screen example.
Table 5.
Questionnaire results.