An Approach to Digitalization in Healthcare
![69.png](https://static.wixstatic.com/media/4946fe_3e73bde4265d417dbf29e0957101048c~mv2.png/v1/fill/w_813,h_612,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/69.png)
Project Context
Role: UX Designer
Timeline: November - December 2021
Responsibilities: Research, Wire Framing, Prototyping, Usability Testing
What is this app for?
Comufami is an app that connects people who have dementia, their family members, and their helpers. This app connects the family and the helpers at the senior center so that they can work together more smoothly without feeling stressed.
This project was accompanied by several rounds of usability tests using both paper prototypes and digital prototypes. It helped me to deepen my knowledge in user experience design and to explore approaches to the digitalization of healthcare industries.
The Design Thinking Process
The Challenge
-
An app to allow two individuals to collaborate using technology to accomplish a group of tasks.
-
Design interface systems that can be applied to different platforms according to the user’s situation. For this project, smartphones for families and tablets for caregivers.
-
Create an app in English and Japanese languages
![iPhone 11 Pro Mockup label.png](https://static.wixstatic.com/media/4946fe_d011339a92844c8c97aab784ca2e7c38~mv2.png/v1/crop/x_0,y_0,w_3832,h_840/fill/w_699,h_153,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/iPhone%2011%20Pro%20Mockup%20label.png)
![iPhone 11 Pro Mockup label.png](https://static.wixstatic.com/media/4946fe_d011339a92844c8c97aab784ca2e7c38~mv2.png/v1/crop/x_3792,y_0,w_3832,h_840/fill/w_699,h_153,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/iPhone%2011%20Pro%20Mockup%20label.png)
Research and Discovery
In order to build more accurate, realistic personas and scenarios, I spoke with people who work in senior care facilities and family members of residents in senior centers. I asked them about the day-to-day challenges that come from unique symptoms and treatments of dementia.
![](https://static.wixstatic.com/media/4946fe_ec9f0ba5d06e4f6da5aeb24a06609c7b~mv2.png/v1/fill/w_700,h_355,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/4946fe_ec9f0ba5d06e4f6da5aeb24a06609c7b~mv2.png)
I analyzed the answers that I got from interviews and categorized them below:
-
Problem 1 Communication: Communication can be difficult between caregivers and family members of residents.
-
Problem 2 Information Platform: Letters, documents, and health records are all on paper or through emails. It is hard to track them for both families and caregivers.
-
Problem 3 Information Share: Difficulties in informing their primary doctors about specific symptoms when family members take residents to clinics.
-
Problem 4 Real-time Locations: Fear of losing the location of someone who has dementia.
-
Problem 5: Overload: Overwhelming tasks with medications, medical checks, and daily nursing care for elderly people (Especially for caregivers who take care of numbers of residents with dementia).
Brainstorming
After researching and defining the problems, I performed brainstorming sessions to come up with ideas for solutions.
![](https://static.wixstatic.com/media/4946fe_5b55ab1ea3b545a99094fd7bfc619754~mv2.jpg/v1/crop/x_39,y_0,w_4761,h_2602/fill/w_708,h_387,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/4946fe_5b55ab1ea3b545a99094fd7bfc619754~mv2.jpg)
A sketch from brainstorming and notes
So, what were the solutions?
From brainstorming sessions, I came up with 4 distinct features that solve problems for families of patients in senior centers and caregivers.
![](https://static.wixstatic.com/media/4946fe_c859d3aaaf364ff9b63a98f13812eda9~mv2.png/v1/crop/x_26,y_0,w_3654,h_1108/fill/w_722,h_219,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/4946fe_c859d3aaaf364ff9b63a98f13812eda9~mv2.png)
Target Audience
-
Target Audience - mainly, two groups of people
-
Caregivers who work at senior centers
-
Family members of residents at senior centers
-
-
Possible Viewers - people who might interact or view this app, but do not necessarily have it on their devices and use them.
-
Doctors - Look at the health record for checkups of residents
-
Nurses - Same as doctors
-
Pharmacists - Same as doctors
-
Personas
![Persona Junko 2.png](https://static.wixstatic.com/media/4946fe_17f2bfc29d79428eacde25a03bf69768~mv2.png/v1/fill/w_689,h_431,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Persona%20Junko%202.png)
![Persona Kanako 2.png](https://static.wixstatic.com/media/4946fe_0fc5289511de4182b8f449d02dd03bd1~mv2.png/v1/fill/w_689,h_431,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Persona%20Kanako%202.png)
Site Map
![](https://static.wixstatic.com/media/4946fe_f0fca95140ff4861ab94dc94d01f9a62~mv2.png/v1/fill/w_702,h_484,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/4946fe_f0fca95140ff4861ab94dc94d01f9a62~mv2.png)
In order to create an app that is absolutely user-friendly and achieves its goals, I proceeded with 3 rounds of usability tests.
A few screens from paper prototype
Nao, one of the test-takers
Heuristic Analysis
The Finds
Round 2: Interview
![](https://static.wixstatic.com/media/4946fe_363e8e276310471da70d74e1e89e8b09~mv2.jpg/v1/fill/w_481,h_271,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/4946fe_363e8e276310471da70d74e1e89e8b09~mv2.jpg)
![](https://static.wixstatic.com/media/4946fe_21553cf4e6c54d958e0343722adaf116~mv2.jpg/v1/fill/w_481,h_271,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/4946fe_21553cf4e6c54d958e0343722adaf116~mv2.jpg)
![](https://static.wixstatic.com/media/4946fe_83a720fdcc1547aea0ca98a1e92a7584~mv2.png/v1/fill/w_682,h_128,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/4946fe_83a720fdcc1547aea0ca98a1e92a7584~mv2.png)
Round 3: Is this a button or not?
![](https://static.wixstatic.com/media/4946fe_6992dad871e24bc8b1dbb1551ea3d5be~mv2.jpg/v1/fill/w_505,h_284,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/4946fe_6992dad871e24bc8b1dbb1551ea3d5be~mv2.jpg)
Example screens from Digital Prototype #2
![](https://static.wixstatic.com/media/4946fe_246aa5e5e0494bb59854636480418cfe~mv2.jpeg/v1/crop/x_32,y_0,w_1615,h_1013/fill/w_459,h_288,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/4946fe_246aa5e5e0494bb59854636480418cfe~mv2.jpeg)
Usability Test Round 3
The biggest takeaway from this round of usability testing was that users were confused in the process because of how the app was visually designed. There were icons and signs that users thought were buttons and vice versa. Some of them had a harder time memorizing which icon belongs to what feature.
-
The home screen was easy to understand.
-
Calendar - options, reminder, move up reminder next to options.
-
Plus button is too big which might be good for people who have weak eyesight, but it looks a little bit odd.
-
The button “Moving…” in the location screen looks like a button even though it is not.
-
The buttons in the footer are not very clear. They need labels.
-
Overall visual design needs to be fixed. (color palette, typography, etc)
-
Familiarity (F) - 2
-
Simplicity (S) - 2
-
Mapping (MA) - 0
-
Motivation (MO) - -1
-
Trust (T) - 1
-
Visibility (V) - 1
This round brought up more detailed problems to fix. Since the visuals were not very clear and attractive, users were confused and not motivated to use this app. This led to the final high-fidelity prototype for round 4.
![](https://static.wixstatic.com/media/4946fe_50995a721c0841baba19761b3fc1f376~mv2.jpg/v1/fill/w_682,h_384,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/4946fe_50995a721c0841baba19761b3fc1f376~mv2.jpg)
![Nao-Comufami.JPG](https://static.wixstatic.com/media/4946fe_3f99edd5783f4cb9895c22762b2c4d6a~mv2.jpg/v1/fill/w_288,h_384,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Nao-Comufami_JPG.jpg)
Based on the feedback from disability tests, I created criteria and scored. By doing so, I was able to find out what elements in the criteria the design was strong and weak at.
![Criteria.png](https://static.wixstatic.com/media/4946fe_0e22398ae95a49719e531db7a0520fe7~mv2.png/v1/fill/w_582,h_403,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Criteria.png)
From the notes that I took from users, I scored each category based on criteria.
-
Learnability (L): 1
-
Familiarity (F): 1
-
Simplicity (S): 2
-
Mapping (MA): -2
-
Visibility (V): -1
As you can see, the problem that I had with the first paper prototype was the lack of ability to navigate people in a clear way (Mapping), and that necessary information was not there or readable (Visibility). For example, some of the feedback was;
"It is weird to have "Friends" icons in the bottom right corner. I didn't know what it was."
"What is this square thing in the photo section in the health record?"
"Who are guests? Your friends? Contacts?"
Improvements and the First Digital Prototype:
From the feedback that I received, I moved on to the first digital prototype. With this prototype, test-takers were able to interact on devices.
A few screens from Digital Prototype #1
In the second round of the usability test, I created a digital prototype that test-takers could interact with. Here is some of the feedback that I received:
-
The map was simple and easy to understand.
-
On the calendar screen, there is no go-back button.
-
Triangles next to March do not make sense.
-
Documents should be connected to a patient.
I analyzed all the feedback that I received and scored each category.
Learnability (L): 2
Familiarity (F): 1
Simplicity (S): 2
Mapping (MA): -1
Visibility (V): -1
Clearly, I could see that I still needed to work on Mapping and Visibility which are mainly connected to role buttons and icons. However, I did not find any problem with the general flow of accomplishing tasks.
Usability
Tests
Round 1: Thinking Out Loud
I created a rough paper prototype that represents device screens to encourage users to demonstrate realistic reactions even though it was still an early stage in the process. I gave them roles and tasks and asked them to speak about their thinking process.
Background Story:
Your (grand) mother moved into your house last week. You have never taken care of someone with Alzheimer’s. There are several things that you have to do for your mother, but you aren't confident if you are able to keep track of everything.
One day, you took your mother to a senior center and they told you about this app which helps you to make sure what you need to do to help your mother. Also, it tells where your mother is in case she goes astray.
Tasks:
-
Task 1: Make a new record for this person “Takagi Shinji” and record his health conditions.
-
Task 2: You realized that Shinji’s body temperature was higher than normal and you need to let the family know. Tell his family about this and share the health record with them.
-
Task 3: Shinji needs to take Lisinopril after lunch every day. He comes to the senior center on Monday, Wednesday, and Friday. Use the app to help remind you.
Scenario Example 1 (Family Member's Perspective)
Colors and Type
The meaning behind colors and typography
I started creating higher-fidelity prototypes from this point. I believe that visual design is a big part of user-friendly design. From the feedback of round 3, I recreated new typographic rules and a color palette. Since this app had many different features, I decided to use color theory to not only bring about the goal of this app but also for organizing purposes. This helps to know which page users are currently on.
Keywords
![](https://static.wixstatic.com/media/4946fe_f395c5d3fcaf44b8b71c2413f1a3aa1a~mv2.png/v1/fill/w_182,h_182,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/4946fe_f395c5d3fcaf44b8b71c2413f1a3aa1a~mv2.png)
![](https://static.wixstatic.com/media/4946fe_fc9a611b725b4852b393957c03e37f46~mv2.png/v1/fill/w_182,h_182,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/4946fe_fc9a611b725b4852b393957c03e37f46~mv2.png)
![](https://static.wixstatic.com/media/4946fe_2848fcd1046c43ceaa80cb1bc11a3511~mv2.png/v1/fill/w_182,h_182,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/4946fe_2848fcd1046c43ceaa80cb1bc11a3511~mv2.png)
![](https://static.wixstatic.com/media/4946fe_17fbf59df0fd420582359cdc3e343d43~mv2.png/v1/fill/w_182,h_182,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/4946fe_17fbf59df0fd420582359cdc3e343d43~mv2.png)
![](https://static.wixstatic.com/media/4946fe_1f7f39bc28954d0ea0f2864697cd9528~mv2.png/v1/fill/w_182,h_182,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/4946fe_1f7f39bc28954d0ea0f2864697cd9528~mv2.png)
![](https://static.wixstatic.com/media/4946fe_9d3b243e85984258bdd5fa4a267392d8~mv2.png/v1/fill/w_182,h_182,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/4946fe_9d3b243e85984258bdd5fa4a267392d8~mv2.png)
Color Palette and Typography
Based on the keywords above, I decided primary colors for each feature of the app and created a color palette as a reference for the visual design.
![color palette-01.jpg](https://static.wixstatic.com/media/4946fe_a01e01690cfe4dc9ae0662bb27665a99~mv2.jpg/v1/fill/w_690,h_488,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/color%20palette-01.jpg)
Color Palette
![Type.png](https://static.wixstatic.com/media/4946fe_bc9fabb45bd946f4ace8907ce93e8372~mv2.png/v1/fill/w_686,h_402,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Type.png)
Typography Chart
Round 4 Finalization
-
The workflow is good
-
The placement of the share button is a little bit hard to find.
-
People don’t use Fahrenheit in Japan, only Celsius is fine.
-
For meals, instead of ○ or ×, it would be nice to have a measurable way.
How to mark a task as completed and locate person who went astray
How messaging works and how to add someone to your contacts
How to create a new health record and share with other people
How add events in the calendar
After the last round of the user-testing process, I finalized the design of the app. Here is the example use-flow of the app. There are also prototype links that you can click on to try them for yourself.