Designing scientific data to be user-friendly.

 


Applications

iOS, Android


My Role

• user research
• prototyping
• UX
• UI


Challenge

How can we make scientific data easier to understand by consumers?


Background

The gpskin Barrier is a medical device that measures key skin biomarkers and connects to the gpskin App. Transepidermal Water Loss (TEWL) and Stratum Corneum Hydration (SCH) are biomarkers that have clinical significance in evaluating the health of the epidermis.


Problem

However, their scales are opposite in value. High TEWL is bad, High SCH is good. Low TEWL is good, Low SCH is bad. 

 
 
RawScales-Handwritten.jpg
 
 


The Goal

To create a scoring system converted from raw data that would allow users to quickly understand their skin health.


Where We Started

Coming into the project, there was UI and UX that was already established. However, there was also initial feedback about the numbers, design and layout causing confusion amongst users.

 
 
Group.jpg
 
 
Group 42.jpg
 
 

The old UI was established based on the assumptions that users knew what the skin barrier was and could easily learn the unique scales for each biomarker. The initial feedback that was trickling in was that people weren’t learning the scales and were unclear on the meaning of images presented. My main hypothesis was:

“If information is presented in their raw TEWL/SCH format, then users will not understand the meaning of results.”

So my first task was to gather evidence that tested the hypothesis.



Gathering Feedback

Goal
Our goal was to find out how familiar our target demographic (18-35 year old females) was with the terms skin barrier and TEWL.

Surveys via Google Forms
We created and sent online surveys to customers and friends in target demographic.

One on One Interviews
Additionally, since we are based in Seoul, Korea, we interviewed English-speaking users in our target demographic by recruiting expats located in Korea.



Discovery

  1. Our assumption that users didn’t know the meaning of TEWL was validated.

  2. Our assumption that most users didn’t even know what the skin barrier was proved to be semi-true. About half of users were familiar with the term ‘skin barrier’. Less than that were aware of the role skin barrier played in overall skin health.

  3. Although all users were aware of what hydration was, they didn’t understand what it meant when compared to the TEWL.

  4. Users were still confused on what each score meant. The overall image and text were vague and didn’t provide any clarity for users.

  5. When looking for more details in breakdown scores, they were still confused on the scales.

Overall, we gathered enough evidence to prove to key stakeholders (the CEO) that the current system wasn’t working. So we began working on improvements based on the feedback we received (with the support of the CEO!).


Solutions

To better educate users on their own data, we made several adjustments:

 
 
raw-new-scale-names.png
 
 

Added scales named ‘Barrier Strength’ and ‘Hydration Level’
Our first solution was to rename TEWL and SCH into something that was easily understandable. By working with our dermatology advisors, we decided to rename TEWL to ‘Barrier Strength’ and SCH to ‘Hydration Level’.

BarrierStrength-Scale.jpg
HydrationLevel-Scale.jpg
 
 

Converted both TEWL and SCH scales from 0-100
Second, we converted the TEWL and SCH scales into a range of 0-100, 100 being best, 0 being worst. This was a scale that users found easy to understand without hesitation.
[barrier strength and hydration level scales - no color, just breakdown]

 
 
 
 

Assigned colors to various score levels
Third, we gave each score level a color so a user could visually recognize where they were on the overall skin scale.

OverallScore-Scale.jpg
 
OverallScore-Colors.png
 

Created ‘Overall Score’ from 0-100
We created our own custom algorithm to combine the two scores into a single overall score, called the Overall Score. This allowed users to have a quick understanding of their position on the overall health of their skin. If user wanted more information, as many users do, the information is then broken down into further detail with Barrier Strength and Hydration Level descriptions.


Results

During our next tests, users no longer wondered what the scores meant. Instead, they were now curious as to what they needed to do to improve their score.

Next steps for future iterations consist of developing copy that breakdowns ways to improve scores and how each biomarker affect each other.

 
OverallScore_MockUps.jpg
 

-


If you’d like to learn more about this project,
feel free to contact me directly at jasoneyoo@gmail.com.

Back to Work | Back to Top