Neuro-Rehabilitation Gaming App Mindmotion Pro
UI Redesign for a gamified neuro-rehabilitation app integrated with a movement tracking environment for patients
Overview
Mindmotion Pro is a 3D virtual environment for neurorehabilitation for patients by MindMaze. The highly efficient motion sensors enable real-time mapping of a virtual character. Different postures, body sway, etc. are monitored to optimise visual feedback for the patients. Their progress is traced by a post-session analysis.
Role & Duration
Product Designer | 1 Week
Discovery Phase
This sprint involved redesigning six screens for a Session Runner and providing its UI Style Guide.
A Session runner was the interface that displayed and ran a session or a set of games or activities compiled for a patient to carry out as a part of their neurorehabilitation treatment.
The session runner is part of the MindMotion Pro application, designed for the therapist to treat the patient suffering from upper limb hemiparesis.
Session Runner Screen
Image Courtesy - mindmaze.com
The list of requirements for the MindMotion Pro redesign involved a visual interface and physical aspects, like the distance of the Therapist from the patient.
Following is the diagram of requirements:
Issues with the Existing Session Runner Screen
The two screens below represent the existing interface design.
The first one is a wireframe of the existing MindMotion Pro game screen, and the second one is the existing screen design.
The UI had multiple things demanding attention. It was crucial to provide some breathing space to each element by applying the design principles of expansion and reduction. Below are some pointers related to the issues with the screens.
-
The segmentation of the page and ownership of the elements needed to be looked at.
-
Elements that are not in use should be muted on the page, e.g., the latest results and colourful icons on it.
-
Iconography needs to be improved, or at least a reference style should be provided for the same.
-
A tablet-friendly interface was essential.
Product Design - UX Solution
After looking at the issues on the existing screens, I started by sketching the structure of the current screens and playing around with the placement of the segments. I designed the User Interface based on the requirements from Mindmotion Pro. Below is the UX as well as the UI process for the same.
UX Solution
-
There were seven segments on the screen. The Controller was the main function used for playing and pausing the game. It was also used for regulating the speed of the game and level of difficulty, also called Compensation.
-
Since the controller section was a primary function on the screen, I wanted to place it centrally so it could own the Main Content block of the game being played and act similar to a Music Player. I could take that design liberty, as Mindmaze was flexible in terms of changing the size and placement of the controllers.
-
I reduced the size of the timeline cards at the bottom, so the focus is on the current game. It took around 1/3 of the real estate earlier; I allotted around 1/5 of the entire screen space. A game had to be calibrated by the patients before playing, so I placed that before the Main Content block.
-
The latest (Results) was changed to Results for more clarity of the time of results. And the results were divided into two tabs: Previous and Highest.
Product Design - UI Solution
Once the new structure was laid,
The UI Design constraint here was to retain the grey tone of the screens to avoid making them look completely alien to the existing users.
So I designed the UI in a grey tone and then added the brand colour for any necessary calls to action.
UI Solutions Applied:
-
A grayscale UI was designed, followed by the MM Pro brand colours to all the call to actions.
-
White was assigned to the Main Content, Header, and Results segments in the foreground and a drop shadow to lift them up.
-
Re-arranged the scattered components in a particular segment to establish their ownership by a segment. e.g. The play & pause control was placed below the main content block.
-
Applied a music player mental model for the activity/game interaction.
-
Re-designed the play & pause interaction button styles with various states.
-
Re-designed the timeline cards with various states to match the new UI.
-
Re-designed the icons on the page for a consistent look and feel.
UI Design - 6 Screens
Below are all six screens designed for MindMotion Pro.
stages of playing a game results screen, ongoing game screen, pause screen, play again, add an activity (game), and about to start playing.
Play & Pause interaction Redesign
The play and pause buttons had to be quite clear and prominent on the page. So I tried retaining the thick white stroke from the existing designs, and that was effectively used to show the status of how much of a game is played when paused. It was also used effectively for the replay button.
Redesigned States of the Timeline Cards
The timeline cards had to be given different states, as per the activity/game played. It was also improved to look more contemporary and usability compliant.
UI Style Guide for the MindMotion Pro Screens
The UI Style Guide Handover was in Sketch.
Summary
The solutions that I applied while redesigning the Session Runner for MM Pro were as follows:
-
The existing Session Runner screens were scrutinised before beginning the redesigning work.
-
Problem areas in addition to the requirements of this project were taken into consideration while sketching the wireframes of the new screens.
-
The segments on the screens were rearranged to highlight the important ones, along with the replacement of components to establish ownership by the segments.
-
The UI Design was based on the existing colour palette.
-
Homogeneous iconography was redesigned.
-
Play and pause interaction button styles were redesigned, along with timeline cards.
-
A compilation of UI components and redesigned screens was handed over to MindMaze.
If you enjoyed reading the case-study, check out a couple more below. 😊
