4.

2 User Interface Design

Figure 4.7 shows a login page where a registered user is requested to key in their

username and password. However, if the user is not registered they can press the sign up

button where the app will bring to the sign up page as per Figure 4.8 shows.

Figure 4 1 Login page and Sign Up page

 Figure 4.14 and shows the Identify page, which looks identical to Injury main page as

it also uses the human anatomy for the user to choose the body part. The user will then

choose, for example the knee and a questionnaire will be shown. The user then will have to

answer the questionnaire by choosing an answer for each question (Figure 4.13). The injury

will then be identified based on the answers.

Figure 4 3 ‘Identify’ page

Figure Figure 4 2 Questionnaire page
 Next is the Exercise page where a list of body parts such as knee and shoulder will

pop up as shown on Figure 4.15. The user has the option on the top of the screen to choose a

strength/balance or stretch/flexibility exercise. As an example, the user chooses ‘Knee’ on the

strength/balance tab and the next page will show 3 phases of exercises which the user can

choose from (Figure 4.16).

Figure 4 4 Exercise main page and Exercise phases

 Figure 4.17 illustrates the list of exercises after choosing the exercise phase. The user

can choose any exercise they want by tapping on it, which will then bring to Figure 4.18

where all the details of the chosen exercise will be shown. The details include a video and

instruction in text form. There is also an option to add exercise to MyProgram.

Figure 4 5 List of exercise Figure 4 6 Exercise details

 Figure 4.19 illustrates where a small pop up will be shown after the user has added the

exercise to MyProgram. Figure 4.20 shows a series of successful added exercise on the

MyProgram page. Here, the user can follow their program easily where they can track the

exercise that has been added.

Figure 4 7 Exercise added pop up Figure 4 8 MyProgram page

 In Figure 4.21, if the user taps on an exercise on the MyProgram page, the exercise

details will be shown along with a ‘Perform Exercise’ and ‘Remove Exercise button’.

Pressing the remove button will remove the exercise from MyProgram. The edit button is for

editing the exercise’s sets, repetitions, and ‘hold’ seconds. Perform exercises however will be

have a timer where it can be edited to tailor towards the preferred way of doing the exercise

(Figure 4.22).

Figure 4 9 Edit and Perform exercise Figure 4 10 Timer

button