ECG App.

A collaboration with Auricula AB to develop a user-friendly app for their portable ECG monitor.

  • Case.

    Student project/Master thesis.

    2021.

  • Team.

    Natalie Bhanji Olsson.

    In collaboration with Auricula AB.

  • My role.

    Discovery/ Development/ Testing.

During my master's thesis I was asked by Auricula Ab to develop a portable ECG monitor with an associated app. The app could act as an intermediary between the ECG and the cloud service that the doctor has access to. The app would also be an opportunity for the patient to get results from their ECG in a user-friendly and easy-to-handle way.


By designing the interaction between user and the app the project designed an product with high understandability and usability but also be a tool for the company to connect with the user. The design process was inspired by the book The Design Sprint, by J. Knapp, J. Zeratsky & B. Knowitz, and focused on involving the users (both main user and secondary users) in the process.  

The picture above shows a sketch of the first idea of how the app should be used in contact with patients and doctors. The app had to facilitate these steps. This was later developed to better suit users.

 

Research.

Who is going to use it?

During research about the extreme user, a part of the whole stakeholder group, the project learned many in this category had help from family, friends, elderly- or medical care in their everyday life. To facilitate the external users, such as elderly care-, medical support, family and friends, without exposing the patients’ integrity a guest login was created with limited functions.

 
 

Who is the patient user? What does their life look like?

  • Between 50-90 years old (extreme ends of age is 40-110 years old)

  • Their health can vary from being really healthy to having multiple diseases, e.g. diabetes, impaired vision, high blood pressure,

    reumatism, overweight, etc.

  • Their economy can vary due to some being pensioners, some still working or on sick leave.

  • Not everyone has or uses a mobile phone, but the vast majority have and use it. It is important to understand that their knowledge of how to use digital products can vary.

  • Some need support from elderly care or medical support systems.

 

To design a solution that will fit a broader spectrum of users it’s important to identify and understand both the mainstream group and the extreme users (Magnusson, 2016). What is important to think about with extreme user group: Sizes, placement, visual impairment, audio impairment, self-support, amount of limes, mobility, technical confidence and dextrocardia (heart on the right side of the chest).

The design process has used implemented tools such as interviews, user testing, research, sketching and prototyping to reach this goal.

Development.

Basic features of the app - Site mapping

Interviews were conducted to see how the user group integrated with different apps and features today.

 

Features & Pages

During brainstorming sessions ideas about app features that could facilitate the use of the ECG monitor was proposed. They were further developed during ideation to specify the ideas, how they would be used, etc. They were later implemented and continuously developed during the design phase and user testing.

 

Quick sketches

 

User testing

To get a better understanding of the app development and reaction towards the different ideas a sketch model of the app was produced in Figma. This interactive sketch model was presented to the users. Testing of the prototype included people in the fields of product development, medical care, business development, QA manager in medical technology and potential product users.

 

Limited access

Functions such as the “diary” function where the patient could write about their personal well-being and so on were excluded. Knowing that no one else can see or read about the patient’s well-being without their knowledge or permission may increase the trust of using this feature for the user.

In elderly care or other support systems for the extreme user today can consist of many different people sharing the same information the guest login was designed without a password. This opens the function to anyone that needs it to assist the patient.

 

Flow Chart

To make it easier for guest users, such as staff in elderly care, who do not have daily contact with the ECG monitor and with it, not the full knowledge of how to use it, access to video instructions should be available to them. A flow chart was conducted to understand the users’ step-by-step need to access instruction videos, this to understand the process and if any obstacle may occur for the user.

 

Other users

During research about the extreme user, a part of the whole stakeholder group, the project learned many in this category had help from family, friends, elderly- or medical care in their everyday life. To facilitate the external users, such as elderly care-, medical support, family and friends, without exposing the patients’ integrity a guest login was created with limited functions.

 

The image above illustrates sketches of interaction with calendar functions and commands inspired by the interviews. This was later used for further development of the app.

 

Calendar function

In the “calendar function” of the app, users can receive information from the ECG monitor in a simple view that is designed to prevent anxiety and worry about their health. They can follow their progress and make notes about their experience, which later can be used as a basis in discussion with their doctor.

It looks like my own calendar. You can scroll up and down like this to see more. Dots works well, but those above the figure. Those underneath are to small.
— Woman, 58

Both in the interviews and the user test the respondents expressed that there should be a possibility to write freely about how they were feeling in the calendar version even if they liked the function to use cartoons figures, such as “smiles”, as a way to express their well being as well.

 
 

The picture above to the left illustrates sketches of how Gutenberg principle is used in designing the calendar function, in placement of buttons and the hierarchy of what is most important for the user to see to fulfils the task.

 
 

By using the company’s main colors from their logotype, #17DF8 and #082B3E, as based the project used acrylic paint to experiment with adding white, black, green and blue to find inspiration for the color scheme.

 

UI

During the interviews, it was learned that the color scheme of the product, both the ECG monitor and the app, was important “to be able to meet the users’ emotional needs. The respondents expressed the need for happy, calming, light and soft colors and gave examples of light blue and light green. One respondent said:

Pastels, soft colors. Not too much stuff. Light blue is soothing... green has a good effect on the body.
— Woman, age 77

The picture above shows how the accent color red was chosen, by looking at a compering color towards one of the main colors from Auricula AB logotype. The #17DF8 was chosen as the base inserted of #082B3E because the compering color spectra were very dark and can be harder to see for the user.

Working with contrast, such as “dark mode” can reduce strain on the eyes, support visual hierarchy and improve readability in the nighttime hours. These attributes can be useful for the user when they operate the app early in the morning or at night or require support due to visual impairment. To facilitate the possibility to use a “dark mode” setting for the user, and in that way be able to enhance the contrast, the project looks at the color differentiation needed. The illustration on the left shows the design process of colors in dark mode settings. The left pallet shows no color pallet without differentiations to the scale, the right one shows color pallets with differentiation to the scale. The right one was used for further development of the UI.

 

Buttons, Icon and interaction

To give the digital product a cohesive feel to the branding of the company the logotype was used as inspiration for the icon within the app. Using the rounded edges, soft curves and white space in the logotype. Icons that the user may recognise from using other app or objects in real life was also used. This to facilitate use and recognition for the extreme users.

 

Buttons play an essential role in the interaction between the user and the design. To make the interaction as user friendly as possible some basic principles was used to design a product with high understandability, they are:

  • Create a button that looks like a button, this can be done with e.g. shapes and shadows

  • Putt the button wear the user is accepted to find it, e.g. use traditional UI layouts

  • Use text, symbols and colors to label the buttons of what they do

  • Use properly sizes on your buttons, minimum 10 x 10 mm (this is slightly bigger than the average fingertip)

  • Mind the order, think about what interaction is most important for the user to reach their goal

  • Don’t use too many buttons, this can create confusion for the user

  • Provide visual or/audio feedback on interaction

  • The project used these principles as guidelines during the development of interaction.

  • Shows how to differentiate hierarchy between the different interactive functions and distinguish the use and how shadows are used to imitate real buttons.

 
 

Example of animation during connection between ECG monitor and app.

 
 

Fonts

The font used in the app needs to be clear to read by the user and follow the graphic design of the overall app. From the sketching and analysis of logotype, it was learned that the fonts needed to have the characteristic features of logotype, such as rounded edges and corners without losing the white space inside the inner corner of the number or letters and smooth transitions to the rounded features. This to fit the graphic design/UI of the app.

The result.

User feedback

 

“Oh I get it! * Laughs. Is it that easy ?! Then why do I have to run to the doctor all the time? This is much better.”

— Man, age 83

“II always choose to go to the health center but this would save me so much time”

— Woman, age 58

“I like the colors and the animations. Otherwise I usually get so impatient when a page loads, but now I have something to look at and I understand that it will not take that much time.”

— Woman, age 57