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 Biopharm_ZERO

02 NICE Group_Website

03 Adobe Korea Website

04 Deeponde Website

I am an interface 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

06

그동안 사용자가 알고 싶었던 것을 드러나게 하면, 사용자는 스스로 행동할 것입니다.

ZERO

07

Solution

ZERO

08

Design Concept

UX·UI Strategy

UI Design System

디자인 시스템을 사용해 전체 디자인의 통일성과 효율성을 높입니다.
각 디자인 에셋은 사용자의 상태와 상황에 따라 편집이 가능하며, 환자들의 다양한 상황을 반영할 수 있게끔 구성하였습니다.

ZERO

09

UI Component System

컴포넌트 시스템을 구축하여 서비스의 일관성과 효율성, 확장성 등을 용이하게 만들었습니다.
이를 통해 개발 및 디자인 프로세스를 개선하고 더 나은 서비스를 제공할 수 있습니다.

ZERO

10

ZERO

07

Home

Today & Live

오늘 하루의 복약 및 발작 기록, 수면 등에 대한 기록 데이터를 한눈에 볼 수 있는 Today 화면과 실시간으로 내 상태를 알려주는 Live 화면을 홈화면에 설계하여 쉽게 교차 사용 할수있도록 합니다. 또한, 시간대별 백그라운드 컬러 변화를 통해 갑작스런 빛에 취약한 사용자들이 언제든지 편안하게 사용할수있도록 합니다.

ZERO

11

ZERO

12

사용자의 기록과 상태에 따른 인터랙티브한 UI로

자연스러운 기록을 유도하고 하루의 기록 및 복용 등의 데이터를 한눈에 볼 수 있도록 합니다.

Today, bring out

the to do list

Record Medication

Today's 24 hour graph

Today 화면의 그래프와 위젯은 사용자의 모든 기록과 부착된 웨어러블 디바이스의 신호에 기반한 데이터를 제공합니다.
기록에 따라 변화하는 원형 그래프와 위젯으로 24시간을 한눈에 볼 수있습니다. 상황에 따른 타이틀 문구와 하단 테스크 버튼으로 사용자가 쉽게 기록하고 체크할 수 있도록 합니다.

ZERO

13

Widget of the day

시각적인 그래프와 이미지를 사용한 위젯을 통해 오늘의 기록과 건강 데이터를
확인할 수 있습니다. 또한, 사용자마다 위젯의 순서와 종류를 수정 할수있어, 이를 통일감있게 형성하기 위해 재사용 가능한 컴포넌트 시스템으로 구성하였습니다.

Keep track of the
essentials in your life
through widget.

Add Symptoms

사용자가 지정한 데이터를 저장하여 매번 같은 정보를 입력할 필요가 없도록 

단순한 기록경험을 제공합니다. 나의 발작 증상과 복약기록, 기타 증상 등에 대한 빅데이터를 

기반으로 사용자의 정보를 쉽게 입력할수있도록 도와 지속적인 서비스 이용을 돕습니다.

Add My Data

ZERO

14

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

02

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

전체 페이지의 기본적인 레이아웃은 직선 그리드에
의해 배치하여 직선적인 아이덴티티를 표현하고
정보들이 정돈되어 보일 수 있도록 하였습니다.

Interaction Design

각 페이지는 스크롤을 통해 맥락에 맞는
자연스러운 연결을 형성하여 사용자의 이해를 돕고
정보간 유연한 이동을 제공하고자 하였습니다.

Dark Mode & Light Mode

저시력자의 접근성을 향상시키고,
사용성을 최적화할 수 있도록 웹 접근성 기준에
적합한 다크모드를 지원합니다.

Dark Mode & Light Mode

저시력자의 접근성을 향상시키고,
사용성을 최적화할 수 있도록 웹 접근성 기준에
적합한 다크모드를 지원합니다.

Responsive Web

반응형 웹사이트로 설계된 NICE 그룹의 웹사이트는

PC의 정보 탐색 경험이 다양한 디바이스 환경에서도

일관성있게 제공됩니다.

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

E.O.D

UX·UI Designer
Suyeon Shin

Suyeon Shin Portfolio
<-
1 / 0
->
Copy URL