SKIIN App:
Logging a Symptom

SKIIN App:

Logging a Symptom

UX and UI Enhancement

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

Timeline:

March 2023 - April 2023

Timeline:

March 2023 - April 2023

Team - Developer Experience:

01 UI Designer

02 UX Designer

02 Developers

Team - Developer Experience:

01 UI Designer

02 UX Designer

02 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.

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

Granular Design Problem

Firstly, I and 02 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

Lack of clear logic and constraints of the time picker’s interaction leads to the undefined input hour and minute values, missing error prevention and error states.

Inconsistent Design Components

Components with the same function have inconsistent styles and alignment, with unclear informative text, breaking design guidelines.

Specific time

10:00 pm

Poor Design Hierarchy

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

Unresponsive Scroller Component

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

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

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.

Interaction redesign

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.

Define the logic

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.

For the time:

Instead of the complex sticky scroller, I switched to a text field that allows users to type in the time directly. If the input doesn't meet the criteria, an error state will appear to guide them.

BEFORE

10:00 pm

05 actions required to input the time

Tap

the

field

Scroll

for

Hour

Scroll

for

Minute

Scroll

for

AM/ PM

Tap

confirm

03 scrollers combined: Hour - Minute - AM/PM

Unintuitive confirmation after selections

Cannot process down the screen if the time is being selected.

Using the Timer icon

AFTER

06:23

Please enter a time that is not in the future.

06:23

01 text field

Simplified with 03 actions required to input the time

Tap

the field

Type

the number

Select

AM or PM

Added error states

Icon change to match the internal consistency

Shorter vertical height

For the duration :

Along with the scroller's poor usability, the Duration icon was identical to the Time icon, causing unnecessary user confusion. To ensure consistency, the Duration input was changed to a text field with defined logic and corresponding error states.

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

BEFORE

Specific time

mins

hr(s)

On going

on & off

Inconsistent, misleading design

Choppy scroller with the unclear informative text

Undefined logic with the lack of constraint.

The change of component’s total height

Displaying the scroller when selecting the field causes unnecessary glitches of total height.

AFTER

Ongoing

On & off

min

Ongoing

On & off

min

Please enter a value between 0-59.

Internal consistent design

Reflecting new defined logic

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

Added error states

Icon change to match the internal consistency

The Searching and Adding Symptom Bar

In the current design, users struggle 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.

BEFORE

What symptoms are you experiencing?

Search or add symptom

Chest Pain/Discomfort

Fatigue

Fainting

Shortness of Breath

Palpitations

Brain Fog

Cough

Abdominal Pain

Sore throat

The lack of recognition regarding the Add Symptom button

The lack of selected symptoms’ visibility when the list is collapsed.

Pixelated search icon.

The design does not meet WCAG requirements.

AFTER

What symptoms are you experiencing?

Search or add symptom

ADD

Abdominal pain

Panic

Anxiety

Chest discomfort / tightness

Chest discomfort during exercise

Cough

Dehydration

Dizziness

Intuitive Add button

Prioritized selected symptoms

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

Standardized icon

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

BEFORE

AFTER

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.

Shortened the options' name

Font and colour changes to meet WCAG requirements.

BEFORE

10:00

Symptom Log

Additional Information (Optional)

Headache

Sore throat

Fever

Chest Pain

Save

37px

20px

AFTER

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

Add More Details

9:29

16px

24px

Added and reworded content to provide information.

Standardized components to improve design hierarchy and meet Myant’s design system (4pt grid).

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.

The ease of logging a symptom

4.85 / 7

6.20 / 7

BEFORE

AFTER

Retrospective

After this, I’ve learned that 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

project

Explore the next project

project

Behance

I'm available

Let's Connect

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

Contact Me