Portfolio
© Suyeon Shin
Suyeon Shin
UX·UI designer,
making better eXperience
UX·UI Design Portfolio
©2023
suyeonshin.com
hisy0417@gmail.com
Portfolio
© Suyeon Shin
Responsive
Interactive
Creative
Portfolio
© Suyeon Shin
01 SK 바이오팜_뇌전증케어 ZERO
02 NICE Group Website 개선
03 Adobe Korea Website 개선
04 Deeponde Brand Website 제작
I am an user experience designer,
and focus on designing in a more creative way to ensure users have an easy and pleasant experience.
더 나은 경험을 제시하는 디자이너 신수연입니다.
01
2022.03 - 2022.12
Project Leading
Participation 70%
Problem Definitions
UX·UI Strategy
Design System, Interaction Design
ZERO
01
Project Overview
SK 바이오팜은 뇌전증 환자를 위한 약인 XCOPRI® 개발을 통해 국내·외 제약 회사에서 입지를 다지게 되었습니다. 이를 일상생활에서 쉽게 실천하기 위해
웨어러블 디바이스와 모바일 앱 서비스를 개발하여, 뇌전증 환자의 일상을 모니터링하고 스스로 관리할 수 있도록 하였습니다. 이는 환자의 삶의 질 개선과
행복 증진을 최우선의 목표로 사회적 가치를 창출하기위해 해당 프로젝트를 진행하였습니다.
*해당 프로젝트는 2023 CES 출품을 위해 영문으로 제작되었습니다.
ZERO
02
ZERO는 뇌전증환자에서 시작하지만 더 나아가 중추신경계 질환으로 확장, 이후는 ADHD, 우울증, 조현병, 알츠하이머 등 신경계 전반 및 항암 등
새로운 분야에 대한 디지털 치료제 개발까지 확장할 수 있는 시작점이 되고자합니다. 따라서 이번 프로젝트를 통해 일상 생활 중의 발작에 대한 불안감을 해소하고 철저한 증상 관리와 원활한 진료를 받을 수 있도록 도와, 궁극적으로 환자와 보호자의 삶의 질을 높여주는 서비스를 구축하고자 합니다.
Our Mission
환자중심의 사용자 경험 및
인터페이스 설계
GOAL
What is Eclipcy?
뇌전증은 뇌 신경세포가 일시적으로 이상을 일으켜 과도한 흥분 상태를 유발하는 질환으로, 의식 소실,
발작, 행동 변화 등의 증상을 보입니다. 전 세계적으로 0.4~1% 정도의 환자가 분포해있으며, 소아/청소년 환자
이외에 성인의 경우에도 중증도 및 질환 특성으로 인해 보호자와 밀착하여 생활하는 경우가 다반사입니다.
뇌전증 환자의 80%는 약물 치료만으로도 일상생활 유지가 가능하기 때문에 복약관리가 중요하며, 발작을
일으키는 여러 요인 중 자신의 발작요인을 찾고 관리하는 것이 매우 중요합니다.
ZERO
03
In-depth Interview
ZERO
04
In-depth Interview
우발적 증상 발현
예측하지 못한 발작으로 인한 2차 사고 우려
보호자가 확인 할수없는 상황에 대한 두려움
사회전 낙인 및 사회활동 위축
너무 많은 증상으로 인한 기록에 대한 거부감
매번 변경되는 처방약의 효과 알 수 없음
정확한 외부요인을 알수없음
기억에 의존한 기록
환자의 기억과 문진에 의존한 주관적 진단
치료/처방 효과 확인이 어려움
외래 시 제한된 시간만 측정 가능한 EGG
제한된 의료정보
Main Promblem
타겟군은 기록과 모니터링 전부 하기도 하고 상황이나 질병의 중증도에 따라 모니터링만 하기도 한다고 대답하였습니다.
그리고 복약에 따른 증상 변화 추적을 알고 싶어한다는 것을 파악할 수 있었습니다.
경증환자 4명, 보호자 3명, 의료진 2명, 전문가 4명 인터뷰 진행 (2021. 11)
아무것도 하지 않음(44%)
기록과 모니터링 전부(41%)
모니터링만 (25%)
Q1. 기록과 모니터링 중 무엇을 하시나요?
예(98%)
Q2. 복약에 따른 증상 변화 추적을 원하시나요?
ZERO
05
Survey
ZERO
05
타겟군은 기록과 모니터링 전부 하기도 하고 상황이나 질병의 중증도에 따라 모니터링만 하기도 한다고 대답하였습니다.
그리고 복약에 따른 증상 변화 추적을 알고 싶어한다는 것을 파악할 수 있었습니다.
경증환자 4명, 보호자 3명, 의료진 2명, 전문가 4명 인터뷰 진행 (2021. 11)
아무것도 하지 않음(44%)
기록과 모니터링 전부(41%)
모니터링만 (25%)
Q1. 기록과 모니터링 중 무엇을 하시나요?
예(98%)
Q2. 복약에 따른 증상 변화 추적을 원하시나요?
ZERO
05
Survey
ZERO
05
Target Needs
알게하면, 행동한다.
Bring out ____ , will do.
Sustainable
Record
To-do list
Monitoring
Condition
Discover
Trend
Bring out
User Retention
환자와 모든 보호자가 알림에 따라 자발적으로 지속 방문하면서 복약/증상에 대해 자연스럽게 기록하게 하며, 데이터의 상관관계를 체감할 수 있게 하려합니다.
UX strategy
ZERO
07
To-do list
복용, 수면 시간 등 기록해야할 것을 알려준다면,
놓치지 않고 체크할 수 있습니다.
Condition
현재 환자의 상태를 실시간으로 알려준다면,
응급상황에 대처 할수있습니다.
Report
기록된 데이터를 바탕으로 생체 변화의 추세를
앱에서 보여주면 지속적인 증상 관리가 가능합니다.
그동안 사용자가 알고 싶었던 것을 드러나게 하면, 사용자는 스스로 행동할 것입니다.
ZERO
08
Solution
그동안 사용자가 알고 싶었던 것을 드러나게 하면, 사용자는 스스로 행동할 것입니다.
ZERO
08
ZERO
07
Home
Today & Live
오늘 하루의 복약 및 발작 기록, 수면 등에 대한 기록 데이터를 한눈에 볼 수 있는 Today 화면과 실시간으로 내 상태를 알려주는 Live 화면을 홈화면에 설계하여 쉽게 교차 사용 할수있도록 합니다. 또한, 시간대별 백그라운드 컬러 변화를 통해 갑작스런 빛에 취약한 사용자들이 언제든지 편안하게 사용할수있도록 합니다.
ZERO
09
ZERO
10
사용자의 기록과 상태에 따른 인터랙티브한 UI로
자연스러운 기록을 유도하고 하루의 기록 및 복용 등의 데이터를 한눈에 볼 수 있도록 합니다.
Today, bring out
the to do list
Today's 24 hour graph
Today 화면의 그래프와 위젯은 사용자의 모든 기록과 부착된 웨어러블 디바이스의 신호에 기반한 데이터를 제공합니다.
기록에 따라 변화하는 원형 그래프와 위젯으로 24시간을 한눈에 볼 수있습니다. 상황에 따른 타이틀 문구와 하단 테스크 버튼으로 사용자가 쉽게 기록하고 체크할 수 있도록 합니다.
Record Medication
ZERO
11
Widget of the day
시각적인 그래프와 이미지를 사용한 위젯을 통해 오늘의 기록과 건강 데이터를
확인할 수 있습니다. 또한, 사용자마다 위젯의 순서와 종류를 수정 할수있어, 이를 통일감있게 형성하기 위해 재사용 가능한 컴포넌트 시스템으로 구성하였습니다.
Keep track of the
essentials in your life
through widget.
Add Symptoms
사용자가 지정한 데이터를 저장하여 매번 같은 정보를 입력할 필요가 없도록
단순한 기록경험을 제공합니다. 나의 발작 증상과 복약기록, 기타 증상 등에 대한 빅데이터를
기반으로 사용자의 정보를 쉽게 입력할수있도록 도와 지속적인 서비스 이용을 돕습니다.
Add My Data
ZERO
12
ZERO
13
Wearable device Linkage
Live Action
Monitoring
Real-Time Condition
Live Mode
Live 화면에서는 감지된 생체신호를 기반으로 실시간 환자의 상태를 알려줍니다.
이를 통해 발작을 예측과 감지하여, 이상 징후가 있을 경우 상황을 인지하고 대응할 수 있습니다.
위험 정도에 따라 색상이 변하여 상태를 쉽게 알아볼 수 있습니다.
ZERO
14
Prediction
& Detection
부착된 웨어러블 디바이스의
예측과 감지 신호를 통한
환자의 현재 상태 모니터링
앱과 함께 사용할 수 있는
환자 및 간병인을 위한
웨어러블 솔루션
Prediction & Detection
웨어러블 디바이스에서 발작이 예측되었을 경우, 환자가 응급 상황에 대비할 수 있도록 모바일 앱과 워치로 환자와 보호자 모두에게 알림을 줍니다.
Watch Screen
ZERO
15
Detection
예측이 30초 이상 지속 될 시, 감지 화면으로 변경되어 기록됩니다. 감지가 5분 이상 지속 되면 응급상황으로 판단되어 911 전화 버튼이 노출됩니다.
발작이 발생한 경우, 환자의 위치 및 응급 대처 가이드를 제공하여 주변 사람들에게 적시에 환자가 도움을 받을 수 있도록 합니다.
Emergency
Detection 30sec
Emergency Guide
Discovering
Trends
Report
기록했던 여러 증상들의 데이터를 바탕으로, Report 탭에서 증상에 대한 변화 추이를 제공합니다.
제공되는 변화 추이는 의료진에게 공유할 수 있어 치료 과정에 활용할 수 있습니다.
ZERO
16
환자가 입력한 정보를 바탕으로,
의료진은 태블릿에서 환자의 상태를 살펴볼 수 있습니다.
좌측 영역에서는 환자의 상세 프로필, 상세페이지에서는
환자의 증상 변화 추이 정보를 제공합니다.
User Screen
Medical Staff Screen
Export Report
ZERO
17
UI Design System
디자인 시스템을 사용해 전체 디자인의 통일성과 효율성을 높입니다.
각 디자인 에셋은 사용자의 상태와 상황에 따라 편집이 가능하며, 환자들의 다양한 상황을 반영할 수 있게끔 구성하였습니다.
ZERO
18
UI Component System
컴포넌트 시스템을 구축하여 서비스의 일관성과 효율성, 확장성 등을 용이하게 만들었습니다.
이를 통해 개발 및 디자인 프로세스를 개선하고 더 나은 서비스를 제공할 수 있습니다.
ZERO
19
ZERO
20
04
2021.11 - 2022.02
Project Leading
Participation 60%
Problem Definitions
UX·UI Strategy
UI Design System, Interaction Design
Project Overview
그동안 나이스그룹은 다양한 사업을 선보일 기회가 없어 낙후됐다는 평가를 받아왔습니다.
본격화 하는 마이데이터 사업과 비대면 문화의 확산으로 금융시장은 더욱
치열한 경쟁이 예상되는 가운데, NICE 그룹만의 자산을 잘 나타낼 수 있도록 차별성 있는
아이덴티티 강화가 필요한 시점이라고 생각했습니다.
NICE Group
02
웹사이트에서 뚜렷하게
나타나지않는 브랜드 이미지
운영되지 않는 오래된
콘텐츠로인한 이미지 저하
명확하지 않은 정보와 위계로
원하는 정보를 찾기 어려움
Brand Identity
명확하고 자연스럽게 정보를 연결하여
NICE그룹의 브랜드 아이덴티티 구축
낙후된
underdevelope
명확하지 않음
indefinite
불분명한 아이덴티티
uncharacteristic
NICE GROUP
UX·UI RENEWAL
Project Goal
NICE 그룹만의 전문성에 더불어 안전성, 신뢰성으로 쌓아온 탄탄한 그룹이라는
차별성있는 아이덴티티를 가지고 정보와 메시지를 효과적으로 전달하고자 합니다.
Clear
Connect
NICE Group
03
Brand Core Value
금융 산업의 기준을 만들어가는
NICE그룹
1.
Brand Value
경쟁사들과 차원이 다른 입지로 30년의
탄탄한 역사를 가진 기업이라는 것을 표현
#Unrivaled
#Overwhelming
#Historical
2.
Service Value
NICE 그룹만의 전문성에 더불어
국내에서 가장 안전하고 신뢰할 수 있는
서비스라는 인식 재고
#Trustworthy
#Matchless
3.
Service Value
한국 최초의 신용평가 제도 도입 및 가장 많은
양의 데이터 저장 및 결제 전반에 참여하는 등
금융 인프라 산업을 확대 및 선도
#Leading
#Expandable
Design Motif
HERITAGE
Unrivaled
: 독보적인
1986년부터 유지해온 NICE그룹의
심볼을 이용해 금융업계의 빛이
되고자 하는 의미 응용
Trustworthy
: 신뢰할수있는
신뢰, 전문성, 안정성 등 NICE그룹의
철학적 가치를 담아낸 사옥의 직선적인
디자인 컨셉을 활용
Leading
: 선도하는
적극적으로 시장을 이끌어나가는 NICE 그룹의
위상을 보여주기 위한 이미지와 그래픽 요소들이 확장되는 인터렉션 컨셉 도출
Design Concept
Light &
Straight
Light
'금융업계의 빛' 이라는 컨셉에 맞게
빛이 적극적으로 활용되는 이미지의
톤앤매너로 전체 페이지 통일감 부여
Straight
신뢰, 전문성, 안정성 등 NICE그룹의
철학적 가치를 담아낸 사옥의 직선적인
디자인 컨셉을 활용
Expand
다양한 산업으로의 진출과
확장 가능성을 나타낸다는 의미의
인터렉션 요소 활용
NICE그룹의 철학적 가치를 담아낸 사옥의 직선적인 디자인을 활용하여,
웹사이트의 화면 그리드를 메인 디자인 요소로 사용합니다.
그리드는 시각적으로는 4단 그리드가 노출되지만, 실제로는 10개의 그리드를 사용하고 있습니다.
NICE Group
04
Grid System
Home
NICE그룹의 홈은 권위있고 독보적인 컨셉의 조형물과
사람, 빛이 드러나는 이미지를 활용하여 경쟁사들과
차별화를 둔 고급스러운 인상을 전달하고자 하였습니다.
NICE Group
05
Strengthen Identity
전체 페이지의 기본적인 레이아웃은 직선 그리드에
의해 배치하여 직선적인 아이덴티티를 표현하고
정보들이 정돈되어 보일 수 있도록 하였습니다.
NICE Group
06
Interaction Design
각 페이지는 스크롤을 통해 맥락에 맞는
자연스러운 연결을 형성하여 사용자의 이해를 돕고
정보간 유연한 이동을 제공하고자 하였습니다.
NICE Group
07
Dark Mode & Light Mode
저시력자의 접근성을 향상시키고,
사용성을 최적화할 수 있도록 웹 접근성 기준에
적합한 다크모드를 지원합니다.
NICE Group
08
Dark Mode & Light Mode
저시력자의 접근성을 향상시키고,
사용성을 최적화할 수 있도록 웹 접근성 기준에
적합한 다크모드를 지원합니다.
Responsive Web
반응형 웹사이트로 설계된 NICE 그룹의 웹사이트는
PC의 정보 탐색 경험이 다양한 디바이스 환경에서도
일관성있게 제공됩니다.
NICE Group
09
03
2021.09 - 2021.11
Project Leading
Participation 70%
Problem Definitions
UX·UI Strategy
UI Deisgn, Video Source Making
Adobe Korea
Adobe Korea Website
UX·UI Renewal
Overview
Adobe는 소프트웨어를 개발, 판매하는 글로벌 기업입니다.
이번 프로젝트에서는 Adobe Korea.com의 구매 경험을 개선하고 Adobe사의 글로벌 디자인 시스템인 AEM을 이용해 구축하는 것이
핵심 과제였습니다.
Problem
현 Adobe Korea 웹사이트에 대한 의견, 비지니스 목표, 제약 사항을 파악하기 위해 임직원과 사용자들을 인터뷰하고 수집된 데이터를
분석한 결과, 정체성이 모호하고 사이트의 구조가 정돈되지 않은 것이 가장 큰 문제인것을 파악하였습니다.
Localization
Identity
Easy & Quick
Increased
Purchase rating
GOAL
사이트의 정체성 확립과 명확한 정보구성으로
구매 전환율 증가를 목표
혼재되어 있는 정보와
명확하지 않은 구매 플로우
한국 현지 정서에 맞는 정보구성과
쉽고 빠른 구매 경험을 제공
Adobe Korea
01
User Survey & Interview
혼재되어 있는 정보
사용자 서베이와 인터뷰를 통해 사이트 이용 목적을 파악하였습니다.
사용자들은 구매를 목적으로 Adobe Korea 웹사이트에 방문하고 있었지만,
디자인 영감을 주는 콘텐츠나 마케팅 콘텐츠와 같은 다른 여러 정보가 섞여있어 필요한 정보를 찾는 데 어려움을 겪고 있다는 점을 확인할 수 있었습니다.
* 제품 관련 콘텐츠 보다 마케팅 콘텐츠 클릭률이 높음, 페이지 이탈 발생
Heatmap Data
* 복잡한 구매여정으로 인한 혼란을 겪는 사용자 행동패턴
User Test
Usablilty Test & Data Analysis
명확하지 않은 구조로 인한 구매 저하
사용성 테스트를 진행해 주요 사용자들의 패턴을 두 가지로 분류하였습니다.
빠른 구매를 원하는 A그룹과, 여러 페이지를 탐색 후에 구매를 원하는
B그룹으로 분류하였습니다. A그룹은 대부분 빠른 구매 행동으로 인해
결제 정보를 모두 인지 하지 못했고, B그룹의 경우는 복잡한 구조로 인하여
정보 탐색 도중 이탈하는 문제가 빈번하게 발생하고 있었습니다.
Heuristic Evaluation
이해하기 어려운 텍스트
사용자들이 방문하는 페이지의 사용성 및 비주얼을 분석하고자
UX·UI 디자이너들을 대상으로 휴리스틱 평가를 진행하였습니다.
Adobe Korea 웹사이트는 부자연스러운 번역체의 텍스트로 인해 내용을
이해하기가 어렵고, 정보가 불친절하게 느껴져 ‘실수 발생을 줄이는’,
‘친절한’ 항목에서 낮은 점수를 받았습니다.
Adobe Korea
02
User Survey & Interview
혼재되어 있는 정보
사용자 서베이와 인터뷰를 통해 사이트 이용 목적을 파악하였습니다.
사용자들은 구매를 목적으로 Adobe Korea 웹사이트에 방문하고 있었지만,
디자인 영감을 주는 콘텐츠나 마케팅 콘텐츠와 같은 다른 여러 정보가 섞여있어 필요한 정보를 찾는 데 어려움을 겪고 있다는 점을 확인할 수 있었습니다.
* 제품 관련 콘텐츠 보다 마케팅 콘텐츠 클릭률이 높음, 페이지 이탈 발생
Heatmap Data
* 복잡한 구매여정으로 인한 혼란을 겪는 사용자 행동패턴
User Test
Usablilty Test & Data Analysis
명확하지 않은 구조로 인한 구매 저하
사용성 테스트를 진행해 주요 사용자들의 패턴을 두 가지로 분류하였습니다.
빠른 구매를 원하는 A그룹과, 여러 페이지를 탐색 후에 구매를 원하는
B그룹으로 분류하였습니다. A그룹은 대부분 빠른 구매 행동으로 인해
결제 정보를 모두 인지 하지 못했고, B그룹의 경우는 복잡한 구조로 인하여
정보 탐색 도중 이탈하는 문제가 빈번하게 발생하고 있었습니다.
Heuristic Evaluation
이해하기 어려운 텍스트
사용자들이 방문하는 페이지의 사용성 및 비주얼을 분석하고자
UX·UI 디자이너들을 대상으로 휴리스틱 평가를 진행하였습니다.
Adobe Korea 웹사이트는 부자연스러운 번역체의 텍스트로 인해 내용을
이해하기가 어렵고, 정보가 불친절하게 느껴져 ‘실수 발생을 줄이는’,
‘사려 깊은’ 항목에서 낮은 점수를 받았습니다.
Information
제품별
일관된 정보 제공
Structure
정보 정렬,
페이지 구조 개선
UX·UI Design
직관적인 UX writing과
정체성이 드러나는 디자인
Adobe Korea
03
Adobe Korea
04
UX Strategy & UI Design
AEM Design System
UX·UI Strateggy
Adobe Korea
05
모호한 정체성
브랜드 이미지 강화
기존의 로비 페이지 구성은 배너 형태의 정보 나열로 복잡하고 통일되지 않은
이미지 사용, 부자연스러운 텍스트로 인해 사용자들이 원하는 제품을 찾기
어려워하고 있었습니다. 개선안에서는 컬러가 강조된 추상적인 이미지를
활용하여 브랜드 이미지를 강화시킵니다. 또한 사용자들이 자주 구매하는
제품에 특징적인 이미지를 활용하여 빠르게 정보를 인지할 수 있도록 돕습니다.
Lobby page > Product page > Pricing Page > Checkout Page
Adobe Korea
06
혼재되어 있는 정보
일관된 정보 제공
플랜의 특징과 장점을 직관적으로 알려주는 문구를 사용합니다.
또한 대표 플랜과 단순 제품 구매를 비교하는 정보 구성으로, 사용자의
니즈에 맞춰 원하는 제품을 쉽게 찾고 빠르게 정보를 습득할 수 있습니다.
Lobby page > Product page > Pricing Page > Checkout Page
As Is
To be
Adobe Korea
07
Lobby page > Product page > Pricing Page > Checkout Page
기존 AEM시스템을 이용한 창의적인 표현
플랜의 장점을 직관적으로 보여주는 이미지를 사용하며 AEM 시스템 디자인 안에서
충분한 창의성을 보여줄 수 있도록 Full size를 적극 활용하여 스크린을 전체적으로
사용하였습니다. 이는 사용자가 새로운 시각적 자극을 느껴 집중할 수 있도록 합니다.
Adobe Korea
08
Lobby page > Product page > Pricing Page > Checkout Page
찾기 힘든 정보
직관적인 정보구성
기존의 구매 페이지는 단일 프로그램과 플랜이 한 탭 안에 섞여 있어 원하는 제품을 빠르게 찾기 어렵고 결제 과정이 복잡하였습니다. 개선안에서는 단일 프로그램과
여러 프로그램을 사용할 수 있는 플랜 리스트를 탭으로 명확히 구분하여 사용자들이 원하는 제품을 쉽게 찾을 수 있습니다.
Adobe Korea
09
어려운 결제 확인
쉬운 결제 단계
기존의 구매 페이지는 단일 프로그램과 플랜이 한 탭 안에 섞여 있어 원하는 제품을 빠르게 찾기 어렵고 결제 과정이 복잡하였습니다. 개선안에서는 구매 과정에서도
정확하고 쉽게 정보를 입력할 수 있도록 입력에 따른 정보를 순서대로 노출하며
테스크를 수행하도록 합니다.
Lobby page > Product page > Pricing Page > Checkout Page
04
2020.06 - 2020.10
UI Designer
Participation 60%
Problem Definitions
UX·UI Strategy
UI Deisgn, Video Source Making
Deeponde
01
Deeponde
02
Deeponde
03
Deeponde
04
Deeponde
05
향후 지속해서 출시될 신제품과
새롭게 업데이트될 이벤트를 고려하여
효율적으로 사이트를 운영할 수 있도록
메뉴 트리와 GNB를 구성하고, 페이지 내
요소들을 컴포넌트화 하였습니다.
Deeponde
06
Deeponde
07
UX·UI Portfolio
Suyeon Shin