Making
better eXperience
UX·UI Portfolio
Suyeon Shin
더 나은 경험을 제시하는 디자이너
신수연 입니다.
UX·UI Portfolio
Suyeon Shin
Design
Principle
Simple & Easy
간편하고 간단한 구조와
디자인으로 사용자가 쉽게 기능을
이해하고 사용할수있게합니다.
User's Perspective
사용자의 관점으로 제품을 바라보고
항상 사용자의 경험을 최우선으로
생각하고 해결하도록 합니다.
Innovatory
혁신을 두려워하지 않고
다양하고 흥미로운 분야에 대해
도전하고 공부하는 것을 즐깁니다.
01
SK Biopharm_ZERO
뇌전증 환자를 위한 헬스케어 서비스
[팀 프로젝트 리딩]
UXUI 디자인, 디자인 시스템 구축,
인터랙션 디자인, 개발 QA
02
Magazine X_OUR
디지털 매거진 플랫폼 모바일 앱
[개인 프로젝트]
IA 설계, UX전략, UI 디자인, UI 스타일 가이드제작
UI 컴포넌트 시스템 구축, 인터랙션 디자인
03
NICE Group
기업 브랜드 사이트 반응형 웹사이트 구축
[개인 프로젝트]
IA 설계, UX전략, UI 디자인, UI 스타일 가이드제작
UI 컴포넌트 시스템 구축, 인터랙션 디자인
Portfolio
Index
Seizure
management
ZERO
Healthcare Service
01
Side Project
2023
Initial concept to launch
UI/UX design
Front-end (ReactJS) / GLSL
ZERO
01
Project Overview
SK 바이오팜은 뇌전증 환자를 위한 약인 XCOPRI® 개발을 통해 국내·외 제약 회사에서 입지를 다지게 되었습니다.
나아가 변화하는 의료 패러다임에 맞춰, 뇌전증 환자들이 약을 더 쉽게 복용할 수 있도록 일상 생활에서 활용 가능한 디지털 치료제 개발을 통해 ‘발작 완전 소실(Zero Seizure)’을 이루고자 합니다. 이를 실천하기 위해 웨어러블 디바이스와 모바일 앱 서비스를 통한 뇌전증 환자의 일상을 모니터링하고 스스로 관리할 수 있는 서비스를 개발하여, 환자의 삶의 질 개선과 행복 증진을 최우선의 목표로 사회적 가치를 창출하기위해 해당 프로젝트를 진행하였습니다.
*해당 프로젝트는 2023 CES 출품을 위해 영문으로 제작되었습니다.
ZERO
02
ZERO는 뇌전증환자에서 시작하지만 더 나아가 중추신경계 질환으로 확장, 이후는 ADHD, 우울증, 조현병, 알츠하이머 등 신경계 전반 및 항암 등
새로운 분야에 대한 디지털 치료제 개발까지 확장할 수 있는 시작점이 되고자합니다. 따라서 이번 프로젝트를 통해 일상 생활 중의 발작에 대한 불안감을 해소하고 철저한 증상 관리와 원활한 진료를 받을 수 있도록 도와, 궁극적으로 환자와 보호자의 삶의 질을 높여주는 서비스를 구축하고자 합니다.
Our Mission
환자중심의 사용자 경험 및
인터페이스 설계
GOAL
ZERO
03
Project Goal
사용자의 상황을 고려한
반응형 개인맞춤화 UI 구성으로
차별화 및 유저 리텐션 제고
Service Keypoint
증상 모니터링
의료진과 환자의 정확한 커뮤니케이션
치료에 필요한 정보 제공
Expectation
서비스를 통한 긴급 상황 대처,
체계적인 일상관리 등을 통한
발작 증상 패턴을 인지와 자가 관리
Project Goal
ZERO
03
What is Eclipcy?
뇌전증은 뇌 신경세포가 일시적으로 이상을 일으켜 과도한 흥분 상태를 유발하는 질환으로, 의식 소실,
발작, 행동 변화 등의 증상을 보입니다. 전 세계적으로 0.4~1% 정도의 환자가 분포해있으며, 소아/청소년 환자
이외에 성인의 경우에도 중증도 및 질환 특성으로 인해 보호자와 밀착하여 생활하는 경우가 다반사입니다.
뇌전증 환자의 80%는 약물 치료만으로도 일상생활 유지가 가능하기 때문에 복약관리가 중요하며, 발작을
일으키는 여러 요인 중 자신의 발작요인을 찾고 관리하는 것이 매우 중요합니다.
ZERO
03
ZERO
03
What is Eclipcy?
뇌전증은 뇌 신경세포가 일시적으로 이상을 일으켜 과도한 흥분 상태를 유발하는 질환으로, 의식 소실,
발작, 행동 변화 등의 증상을 보입니다. 전 세계적으로 0.4~1% 정도의 환자가 분포해있으며, 소아/청소년 환자
이외에 성인의 경우에도 중증도 및 질환 특성으로 인해 보호자와 밀착하여 생활하는 경우가 다반사입니다.
뇌전증 환자의 80%는 약물 치료만으로도 일상생활 유지가 가능하기 때문에 복약관리가 중요하며, 발작을
일으키는 여러 요인 중 자신의 발작요인을 찾고 관리하는 것이 매우 중요합니다.
ZERO
03
경증환자
보호자
의료진
북미시장 타겟 (이번 버전에서는 CES 출품 목적)
환자와 보호자를 위한 화면 분리 필요
보호자 및 의료진은 모니터링 및 위급상황 알림 기능 주력
뇌전증 환자는 경우에 따라 시각적, 정서적으로 불안정. 자극적인 화면이 노출되면 발작의 Trigger가 될 수 있음
의료법 이슈나 타겟의 특수성을 고려하여 그래픽에서 직접적인 표현은 지양
Target Segment
알게하면, 행동한다.
Bring out ____ , will do.
Sustainable
Record
To-do list
Monitoring
Condition
Discover
Trend
Bring out
User Retention
환자와 모든 보호자가 알림에 따라 자발적으로 지속 방문하면서 복약/증상에 대해 자연스럽게 기록하게 하며, 데이터의 상관관계를 체감할 수 있게 하려합니다.
UX strategy
ZERO
06
그동안 사용자가 알고 싶었던 것을 드러나게 하면, 사용자는 스스로 행동할 것입니다.
ZERO
07
UI Style Guide
디자인 시스템을 사용해 전체 디자인의 통일성과 효율성을 높입니다.
각 디자인 에셋은 사용자의 상태와 상황에 따라 편집이 가능하며, 환자들의 다양한 상황을 반영할 수 있게끔 구성하였습니다.
ZERO
09
UI Component System
컴포넌트 시스템을 구축하여 서비스의 일관성과 효율성, 확장성 등을 용이하게 만들었습니다.
이를 통해 개발 및 디자인 프로세스를 개선하고 더 나은 서비스를 제공할 수 있습니다.
ZERO
10
ZERO
07
Today & Live
오늘 하루의 복약 및 발작 기록, 수면 등에 대한 기록 데이터를 한눈에
볼 수 있는 Today 화면과 실시간으로 내 상태를 알려주는 Live 화면을
홈화면에 설계하여 쉽게 교차 사용 할수있도록 합니다. 또한, 시간대별
백그라운드 컬러 변화를 통해 갑작스런 빛에 취약한 사용자들이
언제든지 편안하게 사용할수있도록 합니다.
Home
ZERO
11
ZERO
12
사용자의 기록과 상태에 따른 인터랙티브한 UI로
자연스러운 기록을 유도하고 하루의 기록 및 복용 등의 데이터를 한눈에 볼 수 있도록 합니다.
Today, bring out
the to do list
Record Medication
Today's 24 hour graph
Today 화면의 그래프와 위젯은 사용자의 모든 기록과 부착된 웨어러블 디바이스의 신호에 기반한 데이터를 제공합니다.
기록에 따라 변화하는 원형 그래프와 위젯으로 24시간을 한눈에 볼수있습니다. 상황에 따른 타이틀 문구와 하단 테스크 버튼으로 사용자가 쉽게 기록하고 체크할 수 있도록 합니다.
ZERO
14
Widget of the day
시각적인 그래프와 이미지를 사용한 위젯을 통해 오늘의 기록과 건강 데이터를
확인할 수 있습니다. 또한, 사용자마다 위젯의 순서와 종류를 수정 할수있어, 이를 통일감있게 형성하기 위해 재사용 가능한 컴포넌트 시스템으로 구성하였습니다.
Keep track of the
essentials in your life
through widget.
Add Symptoms
사용자가 지정한 데이터를 저장하여 매번 같은 정보를 입력할 필요가 없도록
단순한 기록경험을 제공합니다. 나의 발작 증상과 복약기록, 기타 증상 등에 대한 빅데이터를
기반으로 사용자의 정보를 쉽게 입력할수있도록 도와 지속적인 서비스 이용을 돕습니다.
Add My Data
ZERO
13
ZERO
15
Wearable device Linkage
Live Action
Monitoring
Real-Time Condition
Live Mode
Live 화면에서는 감지된 생체신호를 기반으로 실시간 환자의 상태를 알려줍니다.
이를 통해 발작을 예측과 감지하여, 이상 징후가 있을 경우 상황을 인지하고 대응할 수 있습니다.
위험 정도에 따라 색상이 변하여 상태를 쉽게 알아볼 수 있습니다.
ZERO
16
Prediction
& Detection
부착된 웨어러블 디바이스의
예측과 감지 신호를 통한
환자의 현재 상태 모니터링
앱과 함께 사용할 수 있는
환자 및 간병인을 위한
웨어러블 솔루션
Prediction & Detection
웨어러블 디바이스에서 발작이 예측되었을 경우, 환자가 응급 상황에 대비할 수 있도록 모바일 앱과 워치로 환자와 보호자 모두에게 알림을 줍니다.
Watch Screen
ZERO
17
Detection
예측이 30초 이상 지속 될 시, 감지 화면으로 변경되어 기록됩니다. 감지가 5분 이상 지속 되면 응급상황으로 판단되어 911 전화 버튼이 노출됩니다.
발작이 발생한 경우, 환자의 위치 및 응급 대처 가이드를 제공하여 주변 사람들에게 적시에 환자가 도움을 받을 수 있도록 합니다.
Emergency
Detection 30sec
Emergency Guide
Discovering
Trends
Report
기록했던 여러 증상들의 데이터를 바탕으로, Report 탭에서 증상에 대한 변화 추이를 제공합니다.
제공되는 변화 추이는 의료진에게 공유할 수 있어 치료 과정에 활용할 수 있습니다.
ZERO
18
환자가 입력한 정보를 바탕으로,
의료진은 태블릿에서 환자의 상태를 살펴볼 수 있습니다.
좌측 영역에서는 환자의 상세 프로필, 상세페이지에서는
환자의 증상 변화 추이 정보를 제공합니다.
User Screen
Medical Staff Screen
Export Report
ZERO
19
ZERO
20
