A team project developed in the given coursework for my Bachelor’s 4th year course module, Advanced Interaction Design. The project task was to develop a touch screen application compatible with both Android and iOS devices to provide self-management capabilities to patients with mobility issues. The team chose to focus on patients with rheumatic diseases, in particular, Rheumatoid Arthritis and named the prototype ‘Helper‘.

Helper

A smart application for patients with Rheumatic Diseases

Project Information

My Role

I contributed in establishing the stakeholders, creating user personae and storyboarding for the application. I researched and corroborated the location charateristics where the product would be ideally used. In the prototype development, I created the ‘fitness’ feature of the application.

Team goals

Communicate effectively about the edits and updates on the prototype design or new findings in the requirements gathering research.
Share all the information among the team via a shared Google Document to aid the design process of the product.
Deliver the complete prototype on time.

Project Requirements

Overall, the application design should be responsive & provide both touch screen & voice command interaction to provide a variety of accessibility options mainly for the disabled people. For example, screen narration reading aloud the displayed text on screen for partially/fully visually impaired people, caption displays on screen for people with hearing disabilities, etc. The application must have the following four main features:

Fitness: must support high-quality video & audio of exercises that can be followed along by the user from home indoor/outdoor. The exercises should be neatly categorised & allow users to browse different exercises along with providing a gamification element to encourage regular participation.

Reminders: must provide alarm/reminder functionality that allows the user to create reminders, edit & remove existing and/or old reminders. It should also enable users to browse existing reminders.

Energy: must provide users information of their current energy usage by graphically displaying the energy usage levels on the screen along with textual information. The user should be able to add additional energy sources to be monitored, remove energy sources currently being monitored via both voice command & toggle buttons to switch devices on/off. It must be able to make recommendations to the users on energy saving options that updates automatically based on the energy consumption of the user.

Laslty, the application must allow interaction with a Cozmo robot to fetch items requested by the user. The Cozmo must confirm with the user that the object is correct before & after object retrieval. Interaction via keyboard input should be possible incase voice input fails to work.

Personae

Before starting the design process, the team created two personas based on the user research on rheumatoid arthritis patients and were referred to throughout the product prototype development.

For each persona, idenifications (name, age, gender) were set with a general background in addition to professional qualifications followed by a justification of choosing them at the end. This information also included each persona’s motivations and frustrations which are not only required for the development but also justify the existence of our product.

Persona 1

Persona 2

Wireframes

Fitness Feature

Early sketches help to iterate through many design options quickly. Therefore, while brainstorming ideas at the beginning of the design process, I use low fidelity sketches which includes using handmade sketches or digital tools like Adobe Draw.

From bout three different sketches of the fitness feature before the prototype development, the last one was chosen that developed into the final prototype.

UI Design of Fitness feature

Once the initial wireframes & storyboard designs were agreed upon by the team, I started designing the first look of fitness feature’s screens in Figma.

I incorporated a fresh light visual style & since the entire product was initially based for indoor use tablets, the team agreed to design for iPads.

Based on the research on Rheumatoid Arthritis, I included only the NHS prescribed exercises in a columnar list that makes the outlook of the screen clear and easily browsable.

At the bottom of the screen is the navigation bar that leads to other features (Home, Cozmo, Energy and Reminders respectively) which makes the application efficient as all features are accessible from all screens.

Screens of first Helper prototype
(Before Evaluations)

Usability Testing

*Example of quantitative analysis from the data collected during Observation process*

Before the final prototype submission, a usability test was conducted among 5 test users in order to reveal possible usability problems. Due to limited resources & time constraints for this coursework, the test subjects weren’t from the target audience but were randomly assigned by the lecturers among our peers (out of which coincidently one peer met the target user goal). The evaluations were carried out in a computer laboratory of the university in a controlled environment where the face-to-face interviews with audio recording and prototype demonstrations were possible using at least two devices.

During the observation process, the test subjects were given 12 tasks like ‘reach level 3 of Chair Exercise’, ‘switch off the heating’, ‘check the energy consumption’, etc. This helped to conduct a quantitative analysis by calculating the number of clicks & errors made and the time taken to complete the tasks. The results were then compared with our expected results which further helped analyse the importance of keeping or removing certain bits from each of the features.

For example,for testing the fitness feature, task 1 involved going on level 1 of chair exercise and task 2 to go on level 3. However, most users were unable to inituitively understand the colour codes however, once explained they understood the gamification element of unlocking levels. This led to the users discussing their opinions like seeing no reason for including a sole screen with an image & ‘Begin’ button before displaying the exercise list which resulted in removal of that screen from the final prototype.

Interviews

The usability testing also involved conducting qualitative anaylsis by collecting data from test users via interviews. This helped gain a better understanding of the problems that the users faced during usability testing.

It was important for me to first find out if the fitness feature’s design was making users think i.e. if the design was intuitive or not. The results from the observations and interviews conducted helped to find and fix many problems that had gone undetected by us, the designers. The common remarks were:

The product design is intuitive, clear and easy to navigate
Remove the screen with ‘begin’ button in the beginning of the fitness feature before the screen with the list of exercises as it’s an extra step. It’s preferable to click ‘Fitness’ and be led straight to the exercise list.
The texts displayed in the middle of exercise level design displaying user’s progress is confusing in terms of how many levels were achieved.
The energy consumption scale wasn’t apparent as the screen didn’t make it stand out and most test users weren’t able to complete the task of telling the energy consumption.
The navigation bar at the bottom seems inconsistent, the cozmo screen must include it as well to be consistent throughout the application.

Changes made:

The ‘Begin’ screen was removed from the fitness feature.
The text of progress level displays for exercises were made more apparent and appropriately colour coded.
The energy consumption scale was modified such that the energy consumption was displayed on a pie chart with suggestions to the user on saving energy.
The navigation bar has now been changed to be consistent throughout the application.

The prototype of Helper on Figma is available here.

Final Prototype Images

Fitness Screen

Energy Screen

Reminders Screen

Cozmo Screen

Conclusion

Throughout the project, all the iterations, usability evaluations and prototype development helped the entire team gain clarity over understanding user requirements and creating efficient prototypes.

Being new to Figma, I had an issue with my slow pace in the beginning of the prototype development. However, with the help of various YouTube tutorials and forums I managed to eliminate this and work efficiently on the fitness feature prototype. The entire project was successfully finished in time.

Overall, working in a team for this project and individually conducting usability evaluation were both challenging yet fun learning experiences. However, I must add that our little team was one of the best I’ve worked with during my university. All members mutually respected and supported each other at all times.

Skills Gained

Tools

Figma | Mobile applications- Adobe Photoshop, Adobe Illustrator (Draw) and PicsArt | Google Drive | MS Word | MS Excel

Mesmers

Project 01: create a smart application for patients with rheumatic diseases