The Secret Story Behind the Design of Fujitsu's Health Management App 'Portable Medical Record' Connecting Patients and Hospitals

—Pursuing ultimate user-friendliness, leading to a Good Design Award win!—

Hello. This is the Fujitsu PR note editorial department.

As we approach the latter half of January, the cold and dry air are in full swing, and many people may be visiting medical institutions due to infectious diseases or colds.

Speaking of medical care, as you all know, Japan's aging society is accelerating, and the increase in national medical expenses has become a social issue. To maintain a sustainable medical system and provision structure for the future, early healing of diseases and prevention of severity are effective, and it is important for patients and their families to proactively manage their health by utilizing data related to health and medical care on a daily basis.

So today, we will share the secret design story from four members of Fujitsu's Design Center who designed the health management application (hereinafter referred to as the app) 'Portable Medical Record' that connects patients and hospitals.
This app was recognized for its contribution to accelerating the social implementation of data portability and won the 2023 Good Design Award!

'Healthy Living Platform' that enables the utilization of medical data

Fujitsu is promoting 'Healthy Living' initiatives aimed at solving social issues in healthcare under 'Fujitsu Uvance,' which is for the realization of a sustainable world.
Until now, medical information that individual patients could manage was limited because the standards for electronic medical record data differed by medical institution. To solve this issue, Fujitsu began selling the cloud-based platform 'Healthy Living Platform' in Japan in March 2023, which converts electronic medical record data into international standards and allows for the safe and secure utilization of medical data. At that time, members of Fujitsu's Design Center were in charge of the UX/UI design for the app that serves as the interface for patients and doctors.

The visual image created by the Design Center aligned the team with the business division

The planning and development of the 'Healthy Living Platform' were led by the business division, and the Design Center joined midway. Sapporo Medical University Hospital supervised the system design and operation. When utilizing data converted to standard formats, the smartphone app used by patients is called 'Portable Medical Record,' and the web app used by doctors is called 'Patient Viewer.'

When the Design Center first joined, specific considerations for the app to be used by users had not yet progressed.
Sakurai says, 'I thought it was important to first create an image that would serve as a basis for discussion, so I created a visual image of the app based on assumed personas and journeys. When I showed it at a meeting with the business division, they agreed, saying, "This is the kind of app we wanted to create," and I felt the atmosphere of the meeting change. The image drawn by the designer became the goal to aim for, and it became a catalyst for aligning the awareness of the stakeholders.'
The image created at this time became the foundation for subsequent app development.

'Portable Medical Record' that is close to patients and pursues ease of use for users of all ages

'Portable Medical Record' is intended to be used by people of a wide range of ages.
Fuji explains the design intent: 'We designed it to be simple and easy to see by using parts that many people are familiar with and that are used in general apps. We thought it was important to keep the design clean while covering essential functions so that we could expand functions in the future.'
Also, 'Medical data handled in international standard formats is vast, and some information is duplicated. The Design Center took the lead in deciding what information to show to general patients, in what order, and how' (Sakurai).
In this way, engineers and designers cooperated to build the first app in Japan that allows patients to manage their own medical information.

The app's main menu consists of four items: 'Activity,' 'Prescription,' 'Data Linkage,' and 'Profile.' Among these, in 'Activity,' you can see the schedule and history of hospital visits and hospitalizations. Fuji explains, 'By showing one schedule/history in a card format, we made it intuitively easy to understand. Also, to make it easy to see, we used colors with large hue differences for outpatient (green) and hospitalization (pink), and used a color scheme that complies with color accessibility.' Within each 'Activity,' four types are displayed: examinations, injections, procedures, and prescriptions, allowing users to look back on the history of their treatment.
Also, 'Usually, the number of hospitals you visit is not that large, and for patients, the department is more important than the hospital name' (Nishida), so the department is displayed larger than the hospital name. During development, coordination with the business division was difficult. Nishida recalls, 'The direction of wanting to create a good app for users was the same, but engineers who prioritize stability and performance and designers who prioritize ease of use tend to clash, and there were discussions to find a compromise.' For example, in the initial plan, there was a specification to input more than 10 digits for a certain setting, but in the product version, a function to read a QR code was added considering the UI.

Conversely, there are examples where functions were simplified based on the designer's opinion. 'In the initial plan, there was a calendar function in the app. However, many people manage their schedules in other ways, such as existing calendar apps on their smartphones or notebooks. At the designer's suggestion, we decided to strengthen linkage with calendar apps instead' (Nishida). As a result, not only did the UX improve, but costs and time were also reduced.

Because it handles sensitive data called medical information, we paid close attention to the 'consent' UI. Fuji spoke about the precautions unique to apps that handle health data: 'We made many prototypes, such as putting illustrations on the screen where consent is taken, and making it possible to check or change the current consent status at any time, and developed it with a particular emphasis on peace of mind. We also had the legal department review it.'
The illustrations and app icons displayed on this screen were handled by new employee Kawamura. 'I designed the illustrations and icons while studying UX/UI. I received advice and made various prototypes, but it was difficult to make illustrations that would not be misunderstood' (Kawamura). We also filed for design registration for the icons. Currently, the iOS version of Portable Medical Record is available, and we have received information and UX/UI checks from Apple Japan, Inc. in accordance with their Human Interface Guidelines. Development of the Android version is also underway.

'Patient Viewer' that allows viewing of medical information including other hospitals and health data on one screen

The 'Patient Viewer' used by doctors was also designed by the Design Center. On the left side of the web screen, electronic medical record information from multiple hospitals permitted by the patient is displayed. Displayed on the right are health data such as blood pressure, step count, and body temperature acquired from devices such as smartwatches and smartphones. If the patient consents, this health data is aggregated on a cloud platform, allowing doctors to view it.

Fuji explains, 'We assume that doctors will refer to the data on the left and right to judge whether the prescription of medicine is appropriate, whether exercise therapy is effective, etc., and use it for treatment. If data from many hospitals can be aggregated on the platform in the future, we can expect benefits such as reducing duplicate examinations and eliminating the need for patients to print and bring health checkup results.' The source data displayed in the Patient Viewer is the same as the Portable Medical Record viewed by the patient, but we also received opinions from Sapporo Medical University Hospital and changed the display method for doctors. For example, while the examination result graph shows the past three times at a glance in the Portable Medical Record, all data is displayed in the Patient Viewer. Also, 'In the Patient Viewer, we have also devised interactions such as changing the background when hovering the cursor over the graph and inverting it when clicking' (Fuji), showing consideration for ease of use.

An app that helps patients take ownership of their medical information and become the hub of their own health

Currently, it is in operation at Sapporo Medical University Hospital, and we have entered the phase where the hospital introduces the app to patients for their use. 'The Design Center also created the explanatory flyers and setup guides for the app that are given to patients. We incorporated illustrations by Mr. Kawamura and provided them in a format that the hospital can edit. We also produced explanatory videos at the Design Center' (Fujitsu). We are receiving feedback from doctors and patients and continuing to make improvements, and the Design Center is also preparing surveys and interviews targeting users.

Moving forward, starting with Sapporo Medical University Hospital, we plan to first promote data linkage between hospitals within Hokkaido, and then look toward a nationwide rollout. In the future, we also expect to collaborate with government agencies and municipal welfare services, and utilize anonymized medical data for treatments, drug discovery, and insurance. Japan's medical innovation is about to begin here.

* This article was created based on the essence of an article on the official Fujitsu Design Center website (as of October 3, 2023) and has been updated with the latest information.

* On January 22, 2024, the description regarding the operational status of Sapporo Medical University Hospital was revised.

Related Links