SKIIN App:
Logging a Symptom

SKIIN App:

Logging a Symptom

UX and UI Enhancement

UX and UI Enhancement

Improving the product quality by enhancing user experience when reporting a symptom.

Improving the product quality by enhancing user experience when reporting a symptom.

Timeline:

2023
03-month duration

Timeline:

2023
03-month duration

Team - Developer Experience:

UX/UI Designers

Product Designers

Developers

Team - Developer Experience:

UX/UI Designers

Product Designers

Developers

Tools:

Figma

Jira

Tools:

Figma

Jira

Disciplines:
User Experience Design

Interaction Design

Product Strategy

Disciplines:
User Experience Design

Interaction Design

Product Strategy

Overview

The SKIIN Connected Life App (SCLA) by Myant is designed to support people with cardiovascular disease by helping them log symptoms, monitor vital signs, and stay connected with their healthcare providers and loved ones.


In November 2022, I decided to enhance the user’s experience and focus on the symptom, which is one of the SCLA’s key features.

The SKIIN Connected Life App (SCLA) by Myant is designed to support people with cardiovascular disease by helping them log symptoms, monitor vital signs, and stay connected with their healthcare providers and loved ones.


In November 2022, I decided to enhance the user’s experience and focus on the symptom, which is one of the SCLA’s key features.

After conducting a summative test to gather user feedback on the app, I worked with two other designers to propose design improvements and simplify the symptom reporting process by incorporating various factors like symptoms, triggers, and intensity. With the help of the developer team, we could officially release the new version of SCLA by the end of April 2023.

After conducting a summative test to gather user feedback on the app, I worked with two other designers to propose design improvements and simplify the symptom reporting process by incorporating various factors like symptoms, triggers, and intensity. With the help of the developer team, we could officially release the new version of SCLA by the end of April 2023.

Proven result

Eight months after the enhancements, we conducted another summative test with 12 participants. Using the same 7-point Likert scale, we saw a significant improvement in the ease of logging a symptom, as recorded throughout the test.

Eight months after the enhancements, we conducted another summative test with 12 participants. Using the same 7-point Likert scale, we saw a significant improvement in the ease of logging a symptom, as recorded throughout the test.

The ease of logging a symptom

4.85 / 7

6.20 / 7

Within the next 12 months, the positive numbers strongly proved the impact of the updated SCLA version, which are:

Within the next 12 months, the positive numbers strongly proved the impact of the updated SCLA version, which are:

29%

positive feedback in logging and maintaining symptoms.

38%

new users start using SCLA as their daily healthcare support tool.

Granular Design Problem

Firstly, I and other UX designers conducted onsite summative tests with seven participants who represented typical SCLA users. After observing their interactions and gathering feedback, we identified the following key insights:

Firstly, I and other UX designers conducted onsite summative tests with seven participants who represented typical SCLA users. After observing their interactions and gathering feedback, we identified the following key insights:

Undefined Design Logic and Constraints with the Inconsistency

Lack of clear logic and constraints with the inconsistent design alignment and guidelines lead to undefined values, missing error prevention, and error states.

Lack of clear logic and constraints with the inconsistent design alignment and guidelines lead to undefined values, missing error prevention, and error states.

Specific time

10:00 pm

Poor Hierarchy and Unresponsive Designs

Expanding symptom tabs cause excessive scrolling, making navigation difficult, especially with multiple symptoms.

The scroller is also choppy and unintuitive, requiring an extra step to input selections, which interrupts the user experience.

Expanding symptom tabs cause excessive scrolling, making navigation difficult, especially with multiple symptoms.

The scroller is also choppy and unintuitive, requiring an extra step to input selections, which interrupts the user experience.

10:00 pm

09

28

10

29

am

12


31

10

00

pm

:

Unclear Symptom Selection

Symptoms are not well-explained, and selected ones are not separated from unselected.

The "Manual Adding" button is confusing for first-time and senior users.

Symptoms are not well-explained, and selected ones are not separated from unselected.

The "Manual Adding" button is confusing for first-time and senior users.

What symptoms are you experiencing?

Search or add symptom

Fatigue

Chest Pain/Discomfort

Brain Fog

Palpitations

Cough

Abdominal Pain

Sore throat

Insomnia

Dizziness

Heart Pounding

Created symptom 1

Created symptom 2

symptom 3

symptom 4

symptom 5

symptom 6

symptom 7

See Less

When did you experience these symptoms?

February 9. 2022

10:00 pm

What symptoms are you experiencing?

Pain|

You have no symptoms that match your search.

tap on

to create symptom

10:00

Symptom Log

return

space

123

M

N

B

V

C

X

Z

L

K

J

H

G

F

D

S

A

P

O

I

U

Y

T

R

E

W

Q

Add more details

Save

Goal

A simple yet sufficient experience of logging a symptom

It’s crucial to design a simple yet effective process that encourages daily logging of abnormal symptoms, particularly for users who are not tech-savvy.

It’s crucial to design a simple yet effective process that encourages daily logging of abnormal symptoms, particularly for users who are not tech-savvy.

Interaction redesign

Part of the larger initiative of improving the logging flow

Part of the larger initiative of improving the logging flow

Improve accessibility and usability

There are design heuristic violations and it also does not meet WCAG standards.

There are design heuristic violations and it also does not meet WCAG standards.

Define the logic

Create error preventions and specific requirements/ conditions for each component.

Create error preventions and specific requirements/ conditions for each component.

Enhancements

The Time Scroller Component

A seemingly simple component had several parameters that greatly impacted the user experience. To reduce the confusion and errors from the summative test, I introduced a new, more intuitive time input interaction.

A seemingly simple component had several parameters that greatly impacted the user experience. To reduce the confusion and errors from the summative test, I introduced a new, more intuitive time input interaction.

For the time:

Instead of the sticky scroller, I switched to a text field which simplified required actions from users for picking a time. If the input doesn't meet the criteria, an error state will appear to guide them.

Instead of the sticky scroller, I switched to a text field which simplified required actions from users for picking a time. If the input doesn't meet the criteria, an error state will appear to guide them.

06:23

AM

PM

Please enter a time that is not in the future.

06:23

AM

PM

01 text field

Simplified with 03 actions required to input the time

Tap

the field

Type

the number

Select

AM or PM

For the duration :

The Duration picker was confusing with the scroller. The Duration input was changed to a text field with defined logic and corresponding error states to ensure consistency.


The new design now accounts for specific times, whether the symptom duration is ongoing or not.

The Duration picker was confusing with the scroller. The Duration input was changed to a text field with defined logic and corresponding error states to ensure consistency.


The new design now accounts for specific times, whether the symptom duration is ongoing or not.

Ongoing

On & off

--

hr

--

min

Ongoing

On & off

--

hr

62

min

Please enter a value between 0-59.

Reflecting new defined logic

Having specific time either the symptom duration is ongoing or not.

Added error states

The Searching and Adding Symptom Bar

Since users struggled to track selected symptoms when the list is collapsed, and the 'Add Symptom Manually' feature is unintuitive. I proposed a revamped design that prioritizes displaying selected symptoms for better clarity and ease of use.

Since users struggled to track selected symptoms when the list is collapsed, and the 'Add Symptom Manually' feature is unintuitive. I proposed a revamped design that prioritizes displaying selected symptoms for better clarity and ease of use.

What symptoms are you experiencing?

Search or add symptom

ADD

Abdominal pain

Panic

Anxiety

Chest discomfort / tightness

Chest discomfort during exercise

Cough

Dehydration

Dizziness

See More

Intuitive Add button

Prioritized selected symptoms

The selected symptoms would be displayed on top of the symptom list for users’ awareness.

Font and colour changes to meet WCAG requirements.

Other revamps to standardize the design and keep the consistency

Additional design enhancements were made to align with the design system constraints and improve usability as well as accessibility for Myant's users

Additional design enhancements were made to align with the design system constraints and improve usability as well as accessibility for Myant's users

Removed Cancel icon

Since the users can tap outside to close the slide-up menu, the Close icon has been removed to reduce the interaction complexity.

Standardized spacing with the consistent padding and gap.

Font and colour changes to meet WCAG requirements.

Add additional details to symptoms

Tap on each symptom to add details such as severity, possible triggers, duration and notes. Once you are finished, tap the Save button below.

Abdominal pain

Tap to add more details

Panic

Tap to add more details

Save

16px

16px

Add More Details

9:29

16px

24px

Added informative content to provide information.

Standardized components to improve design hierarchy and meet design constraints.

Final Designs

BEFORE

AFTER

Achievements

In the first four months of 2025, the SKIIN Connected Life App and its new version (Skiin Connected Life Heartbeat) have achieved significant achievements:

In the first four months of 2025, the SKIIN Connected Life App and its new version (Skiin Connected Life Heartbeat) have achieved significant achievements:

36%

of new users were acquired through clinic referrals, including both private and public clinics.

Successfully verified as a Health Canada Class II Medical Device.

“Best of Innovation and Honoree” in the CES 2025 Innovation Awards and Arab Health 2025 as part of the Ontario Pavilion.

Retrospective

A good product doesn’t have to be visually compelling. It should provide the necessary functions to meet users' needs while maintaining simplicity, encouraging daily use with minimal effort.


Testing is crucial for uncovering core issues, especially in a health-focused app. Given the complexity of such tasks, it’s vital to create a user experience that feels intuitive and effortless, allowing users to focus on providing accurate input without confusion or frustration.

A good product doesn’t have to be visually compelling. It should provide the necessary functions to meet users' needs while maintaining simplicity, encouraging daily use with minimal effort.


Testing is crucial for uncovering core issues, especially in a health-focused app. Given the complexity of such tasks, it’s vital to create a user experience that feels intuitive and effortless, allowing users to focus on providing accurate input without confusion or frustration.

Explore the previous project

Previous

project

Explore the next project

Next

project

© 2024 | All Rights Reserved. Design & Coded with ❤️️

Linkedin

Behance

I'm available

I'm available

Let's Connect

Let's Connect

Feel free to contact me if having any questions. I'm available for new projects or just for chatting.

Feel free to contact me if having any questions. I'm available for new projects or just for chatting.

Contact Me

Contact Me