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 비대면 의료서비스_나만의 닥터
03 Adobe Korea Website 개선
04 NICE Group 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
ZERO
06
Mental Model
알게하면, 행동한다.
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
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
Today's 24 hour graph
Today 화면의 그래프와 위젯은 사용자의 모든 기록과 부착된 웨어러블 디바이스의 신호에 기반한 데이터를 제공합니다.
기록에 따라 변화하는 원형 그래프와 위젯으로 24시간을 한눈에 볼 수있습니다. 상황에 따른 타이틀 문구와 하단 테스크 버튼으로 사용자가 쉽게 기록하고 체크할 수 있도록 합니다.
Record Medication
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.08 - 2022.02
Project Leading
Participation 80%
Service Launching
Problem Definitions
UX·UI Strategy
UI Design System, Interaction Design
Covid-19 사태로 대면 진료에 대한 부담 증가
코로나 사태 출범 이후, 대면 의료 진료의 접근성과 시간제약에 대한 불편함 증가
환자와 의료진의 접근성, 효율성, 안정성 측면의 비용 최소화로
비대면 진료 서비스의 시장 확대 기대
비대면 진료 앱 사용자 수 : 161% 증가 (2022년 1월 : 57만명 -> 2022년 2월 : 150만명)
Background
나만의닥터
01
Findings
"한국의 의료서비스는 매우
불편하고 비효율적이다"
Problems
높은 의료
이용량
17.2회
연간 병원
내원횟수
10억건
환자당 평균
진료시간
4분
인구 1천명 당
의사수 OECD
하위 2위
간단한 진료를 보러가서 30분 기다리고 1분만에
진료받고 나오는 경우가 많아요. 병원을 가려면 하루의
모든 일정을 병원에 맞춰야해서 자꾸 미루거나 안가게되요.
서민정 (30세/여자/회사원)
단순 처방을 받기위해 병원을 방문하거나
경증 환자와 같은 경우에도 진료시간을 길게 투자해야
하는 것도 업무량 증가의 요인이에요.
황준희 (45세/남자/의사)
처방전이 과도하게 쌓여서 관리가 어려울때가 있어요.
환자가 너무 몰릴때는 처방전을 일일히 입력하는 업무가
버거울때가 있어요.
윤의정 (48세/여자/약사)
#높은 의료 이용량
#적은 의료진
#긴 대기와 짧은진료
UX Strategy
고객들이 원하는(Wants)것과 필요로 하는(Needs)것을
보다 더 쉽고 빠르게 선택할 수 있도록 돕는다.
진짜 필요한것을 제공
결정에 도움을 주는 정보 제공
대기 시간 정보와 야간 진료 및 전문 진료과목등의
정보를 쉽고 빠르게 탐색 가능하도록 정보 제공
불편함을 제거하기
불필요한 물리적 비용 단축
대기시간 같이 주요 목적 외로 소비되는
대기시간이나 방문루트의 단축을 제공합니다.
시작을 돕기
간편한 탐색 기능 제공
익숙하지만 간편한 탐색경험을 위한 UI 구성
대면 진료와 같은 플로우의 서비스 진행 방식
원격 진료, 약 배달
신뢰가능하고 편리한 비대면 진료
Project Goal
비대면 의료 서비스 산업에서
단/장기적인 비지니스로 구축
Phase 1.
비대면 의료서비스 출시
Phase 2.
서비스 고도화 및 수익구조 설계
발빠른 서비스 출시와 이후 고도화를 위해 확장가능한 프로덕트를 만드는것이 목표
스플래시
온보딩
로그인/회원가입
과거력 입력
진단 질병 선택
가족력 선택
홈
검색
알림
서비스 소개
진료 리스트
닥터 포인트
마이페이지
의료진 리스트
의사 상세정보
진료예약
날짜선택
시간선택
진료 대상 선택
주민등록번호
증상 입력
확인 및 결제
예약 정보
진료 정보
결제
예약 정보확인
전화 상담
배송방식 선택
약국 선택
처방전 전송
결제
약 제조 진행
재조 수락
배송 출발
전체진료 리스트
진료대상 선택
가족 추가
이름 등록
주민번호 등록
대리 통화 진료
처방전 확인
리뷰남기기
배송현황 보기
진료 영수증 보기
약제 영수증 보기
배송 현황 알림
배송완료
처방전 발급
진행 현황 알림
진료진행
약 배송
약국 선택
진료내역 확인
가족 대리 처방
진료 예약 경로
약제조 및 배송 경로
서비스 이용 경로
진료 거부
예약 확정
재조 거부
User Flow
Solution 1. 시작을 돕기
쉽고 간편한 탐색 기능 제공
홈에서는 이용률이 가장 높은 진료과목과
증상을 제시하는 퀵메뉴를 제공하고
검색 화면에서 진료과목별 / 증상별로 사용자가
원하는 진료를 빠르게 찾을 수 있게 합니다.
Phase 1. 비대면 의료서비스 시장 구축
"아픈 증상에 대해서는 잘 알겠는데
어떤 과로 진료받아야하는지 종종 헷갈려요."
가장 많이 이용하는
과목별/증상별 퀵메뉴 제공
진료과목별 / 증상별로 분리한
필터제공으로 원하는 정보에
빠르게 도달하는데 도움
Solution 2-1. 불편함을 제거하기
불필요한 시간적 비용 단축
대면 진료 시 진료시간을 예약을 해도 길어지는 대기시간과
비효율적인 병원방문-처방-약국방문의 물리적, 시간적 비용을
단축시키기 위해 의료진별 시간정보에 대한 뱃지와 필터로
원하는 진료를 빠르게 받게 도와줍니다. 또한 진료 가능한
시간대에 대한 정보제공으로 사용자의 선택 범위를 넓혀줍니다.
"원하는 시간대에 예약가능한
병원에서 진료 받고 싶어요."
진료 가능한 상태에 따른
뱃지노출이나 필터사용으로
원하는 옵션으로 선택에 도움
명확한 예약가능
시간 제시로 불필요한
대기시간을 줄이는데 도움
Phase 1. 비대면 의료서비스 시장 구축
"이전에 진료받았던 기록이나
처방전을 다시 보고싶어요."
Solution 2-2. 불편함을 제거하기
불필요한 물리적 비용 단축
약국 방문없이 처방이 가능한 약국을 선택하여
원하는대로 약을 배달 받을수있습니다.
처방된 처방전은 FAX로 전송할 수 있으며
진료기록은 사용자가 다시 열람할 수 있습니다.
"처방전이 자동 디지털이 문서로 입력되어 들어오면,
기록을 확인하고 관리하는데 용이해요."
진료내역과 진행상황을
한눈에 확인
약 제조 의뢰가 가능한
다수의 옵션 제공
Solution 3. 진짜 필요한것을 제공
결정과 진행에
도움을 주는 정보제공
의료진에 대한 상세 정보와 리뷰 등의 정보를 제공하여
믿고 진료를 받을 수 있도록 도움을 줍니다.
또한 진료 진행과 약제 배송 등의 현황에 대한 지속적인
알림을 제공하여 서비스 이용에 차질이 없도록 합니다.
비급여 항목
가격 정보 제공
진료후기 제공으로
결정에 도움
진행 현황에 따른 알람 제공
"진료를 진행할 의사선생님을 선택할때
별다른 정보가 없어서 쉽게 선택하기가 어려워요."
Achievements
매우 간단한 경험 제공으로 사용자들에게 좋은 첫인상을 심어주어
경증 환자들에게 지속적인 서비스 이용증가율을 보이고 있음
722배+
진료건 수
출시직후 진료건 대비
140배+
MAU
출시직후 데이터 대비
3,564배+
거래액
출시직후 거래액 대비
서비스 출시 이후 1년간 성과 데이터
비대면 진료 시장 1위 서비스 구축
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
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의 정보 탐색 경험이 다양한 디바이스 환경에서도
일관성있게 제공됩니다.
UX·UI Portfolio
Suyeon Shin