Relieve Neck Pain mobile app

A real-client project requiring UX evaluation & recommendations to solve an UX problem and to improve on the app’s user experience

UX techniques used in this project:

• A/B Testing

• Contextual Inquiry

• Heuristic Evaluation

• User flow mapping

• User Interview

• Usability Testing

Project Brief

This project was meant to solve an user experience problem, notified through the user reviews on Google Play Store. UX designer was to suggest solution to the problem while providing other recommendations to improve on the app’s user experience.

About the application

Neck pain happens when there is misaligned hips, spine and shoulders, along with the head that is stuck in the forward position. This usually happend due to a lack of movement, encouraged largely by the modern lifestyle. Long hours of incorrect neck posture would lead to neck pain and other body conditions. It is understood that many people led a busy life while enduring with pain in their body. Hence, the app <<Relieve Neck Pain>> provides a series of stretches and exercises that could be done in less than 5 minutes to provide relief to pain. 

Why was I approached for the job

According to the app owner, her worst frustration was that she needed to give clear instructions to her app developers who are in India so that the app can turn out the way she expected, but have trouble doing so because she does not have a strong technical knowledge in terms of programming. Hence, she needed someone who can help her understand the problem, solve the problem and give clear instructions on how to execute the solution via programming. As I was from a technical background and am practicing UX design, I was approached for the job.

Solving the UX problem

1) Identifying the UX problem

The <<Relieve Neck Pain>> app has always been doing well, with a high rating of 4.5 stars in Apple’s app store and 3.7 stars rating in Google Play Store. Many of its users has been liking it and had left good reviews especially on Google Play Store (as marked in the green box in the following image). 

However, as the technical knowledge and behaviour in using technical products differs among different users, some users were having difficulties while using the app as seen in the 1st two user reviews listed in the above image. Although currently, it may seem that only the Android users of the app are facing a problem, that does not meant that Apple users are not and will not face such a problem since there is no bad ratings and reviews found on the App Store yet.

Hence, the main task of this project was to find out about the problem and to provide a solution that requires minimal changes to the current application’s design and program codes. Based on the negative reviews left by unsatisfied users of the app, it seems as though a problem occured whenever a user is following an exercise routine. To find out where exactly in the user flow did the users encountered the problem, the flow whereby a user would be experiencing when he/she is following a exercise routine was constructed. 

At some point in the middle of the exercise routine, the app will prompt the user to rate itself in the app store as shown in the image below. And that is where some users got annoyed when they could not proceed to the next step in the user flow.

2) Understanding the problem

From the user point of view, their ultimate goal is to alleviate the body pain that they are suffering, which is the problem they are facing. And with the mobile app proposing a solution to lessen their problem, they would like to follow through the stretching exercise routines found in the app. However, with the appearance of the prompt that took up more than half of the screen’s real estate, the users could no longer view the video clearly. Hence, users will want to exit from the screen with the prompt to resume with the exercise video. And to do so, depending on where they tap on, the users would be led to different steps in the user flow and therefore different screen content as well.

Based on a contextual inquiry with 7 participants of age ranging from 19 to 43, all participants mentioned they would prefer not to rate the app while in the progress of the exercise routine. True enough, when the prompt appears, all of them instinctively wanted to get rid of the prompt.

Participants of age 30 and below were all able to understand that tapping elsewhere outside of the prompt will lead them back to the video.

And thus the younger participants do not have much problem with following the full stretching exercise routine. However the 3 older participants of the contextual inquiry had all tapped on the stars in the prompt with the intention of exiting the prompt screen.

Participants who are in the 30s or 40s were all taken aback when the action of tapping on the stars brought them to Google Play Store as they thought the rating was only within the app and they could resume with their stretching exercise routine.

Interestingly, the difference in users understanding exit directions can be differentiated by age group, whereby the exit direction in the app is not familiar to users who are above 30 years old.

And from the contextual inquiry responses, it was found that not all users are able to understand the prompt exit indication effectively, which therefore led to some users’ annoyance while using the app. When these users are having a bad experience, they either stop using the app and/or leave a bad rating and/or review on the app stores.

As the value of UX design is to find a balance between user’s needs and business goals, just understanding from the users’ point of view is not enough. By interviewing 7 users, the responses curated was that users do not need and mostly do not want to rate and leave reviews on the app stores. However from the app owner’s point of view, users’ rating and reviews are very important as they impresses potential users and gives the app a competitive edge in terms of ranking within a keyword search in the app store’s.

Hence, the app owner would like to have a reminder for users to rate and review the app, so the app can have a better ranking in the app stores.

3) Problem and solution statement

- Problem Statement -

Users of the <<Relieve Neck Pain>> app needs a better indication on exiting the app rate prompt screen as there are some users who can’t understand the current exit prompt indication.

- Solution Statement -

We need to provide an exit screen indication that is commonly understood by all, if not most users.

4) Conceptualising the solution for the UX problem + Usability Testing

i) Exit indication can be more direct with the “X” button on the top-right of the prompt

Instead of removing the app rating prompt completely, some changes can be made to the initial prompt screen design so that users’ experience with the app can be better improved. By having the “X” button at the top-right of the prompt, the exit direction of the app mirrors the exit direction that most users are familiar with. Especially with users of an older age, whereby computers played a greater part in most of their life, the “X” button on the top-right resonates exit of current screen to them better than the black overlay screen on the screen’s background.

- Usability test result -

When the recommended screen design for the prompt was presented to the participants of the test, all 7 of them were able to recognise the “X” button as an exit from the prompt screen and the button for rating the app was another choice of exit given too.

- A/B test results -

When asked which prompt screen design would they prefer, 6 out of 7 of the test participants preferred the recommended screen design as they felt that the “X” button makes the exit direction clearer.

ii) To prevent any miscommunication, the stars can be replaced with a button

According to the contextual inquiry responses, participants thought by tapping on the stars, the ratings would be done within the app and not directing them to the App Store. Hence, to prevent any miscommunication, a button with a question not only can direct users to the play store, it can eliminate the misunderstanding of only by rating the app then can the users exit from the prompt screen.

- Usability test result -

When usability test participants were presented with the recommended screen design, 5 out of 7 of them understood that by clicking on the “Rate the App?” button, they will be brought to another screen and ratings were to be done in that newly appeared screen.

5) Instructions for developers on the change (as requested by app owner)

From a mobile application development point of view, there is no need for any amendments in the back-end programming for such a change whereby only the front-end codes will be amended

• Inserting the “X” button

  Developers would only need to insert a button on the top-right of the prompt by adjusting the button’s pixel distance and input the “X” either by text form or by image for a better graphic view. After the insertion of the “X” button, the developer can then allow the function of exit the screen by linking the action to display the previous screen which is the stretching exercise video playing screen.

• Changing the visual of the rating button

  As there is already a button in placed with the display as a string of stars, the developer would only have to change the visual of the button via front-end programming by adding in the borders and changing the content displayed on the button.

Other improvements that can be made to the app’s user experience

To find out more about the app and how the app’s user experience can be improved, a heuristic evaluation was done. And the heuristic evaluation was done using Jakob Nielsen’s 10 heuristics to point out some areas of improvement for the users’ experience with the mobile app.

1) Matching the graphics with its title

Heuristic violated - Consistency and standards

In the initial screen design, both sets of exercises uses the same picture icon. For users who cannot read English (currently the app only supports the English language) but wants to improve their health via this app would faced a problem of not knowing the difference between the 2 options. Even for users who can read English, they can be stumped too as they do not know whether to trust the picture icon or the exercise title, as verified in the contextual inquiry with all 7 participants.

As the picture icons of the exercise routine for ”Stand Up & Stretch” is not consistent with its title, the trust level users have for this app can decrease especially so for first-time users and the worse-case scenario of users exiting the append uninstalling it without trying out may highly likely happen.

Hence, the recommended amendment to make was to switch out the pictorial icon with the appropriate content which was taken from the “Stand Up & Stretch” video itself. With the exercise routine title matching the pictorial icon, participants of the usability test were able to instantly understood the difference between the two exercise routine with no confusion.

Instructions for developers (as requested by app owner)

As there was an image real-estate coded on the screen already, developers will only have to replace the initial pictorial icon used with the given pictorial icon.

2) Changing out the usage of an unconventional sound icon

Heuristic violated - Match between system and the real world

The system should always speak the users’ language with words, phrases and concepts familiar to the user, and this includes the icons used. In the user interview, participants were being presented with the initial sound icon used in the app and they were tasked to explain the first initial thoughts that comes to them when they see the icon. All 7 participants were able to understand that the initial sound icon used indicates that the video is playing with sounds and by tapping on the sound button, they can mute the video.

However, when presented with the recommended sound icon for an A/B testing, all 7 participants preferred the recommended sound icon as they are more familiar with it as compared to the initial sound icon used though they understood that both icons had the same meaning.

Instructions for the developers (as requested by app owner)

As the change is only an icon on a button display, developers can just swap out the image displayed on the button to the recommended sound icon will do.

3) Providing more visual clues for the users

Heuristic violated - Recognition rather than recall

Content presented on screen should always be helping the users to understand the situation. Hence, users’ memory load should be minimised as they should not be remembering information from one part of the dialogue to another. From the contextual inquiry, participants were presented with the initial screen design and tasked with identifying which step in the stretching exercise routine they were at. Out of 7 participants, 6 were able to identify the step correctly. And when asked how they were able to identified, all 6 of them compared the title presented on the top of the video with the steps content before they could identify the step.

When presented with the recommended screen design, all 7 participants were able to identify the step correctly. While 2 out of 7 participants identified the step by the video title, the remaining 5 participants had pointed out the difference in icon used for the steps completion had helped them identified the step the users are currently in. With the 2 screens presented for A/B testing, all participants preferred the recommended screen design. This is because

1. The video title had clearly stated the current step

2. The visual clues had made it clear to them on how many steps in the routine they had completed and it is more efficient for the participants to identify by using a shorter time duration.

Especially since users of the app have to multi-task by following the moves demonstrated in the video, listen to instructions played in the video and to see the steps they are going through too. By adding the visual clues, can help improve their app experience by reduce their efforts and motivate them throughout their exercise routine.

Instructions for developers (as requested by app owner)

Change the icon for the steps completion to the incomplete icon for all steps. Once the video for each step starts to play, the completion icon respective to the step of the video played will replace the incompletion icon. E.g. Step 1 video is played, completion icon for step 1 will be displayed while the icon for other steps will still be the incomplete icon. When Step 2 video is played, completion icon for step 1 and 2 will be displayed while icon for all other steps remains tone the incomplete icon.And the logic goes on till the video for the last step is played, all steps will be displaying the completion icon.