personal portfolio wooseok kim ux designer

1. 김우석 Wooseok Kim
UX Designer
Junglian
Aug 2018 - July 2019
UX.UI 디자인 & Front-End 개발
Doongle
Jun 2017 - Oct 2018
UX 디자인 & 사용자 리서치
Neuroassociates
Nov 2015 - Jan 2016
UI 디자인 & 시각화 개발
Urbantainer
Nov 2015 - Jan 2016
서비스 디자인
EMPLOYMENT
Unofficial Humanism
Aug 2018 - Oct 2018
난민 text-data 시각화 설치미술
Project Syria
Aug 2015 - Feb 2016
인터랙티브 데이터 스토리텔링
Smart Home Hub
Jan 2015 - May 2015
삼성전자 - SADI 산학 협력 프로젝트
PROJECT
Cardiff Met University
Aug 2014 ~ Aug 2016
경험디자인 석사
꿈꾸는 데이터 디자이너
May 2015- Aug 2015
서울시 신직업군 발굴 프로그램
Soong-Sil University
Feb.2005 - Feb 2010
미디어 공학 학사
EDUCATION

2. Branding . Design System . Front-end develop
Renewal Junglian
호텔숙박 서비스 정글리안의 디자인 시스템을 정립하는 과
정에서 개발. 마켓팅에 기여한 부분 중심으로 정리
1
Branding . Service Design
Service Design for Coffee Brand
베이징에 새롭게 런칭하는 커피브랜드의 플래그십
스토어를 위한 서비스 디자인 프로젝트
4
User Research . Persona Modeling . Mobile UX
DOONGLE 2.0
글로벌 SNS둥글의 리뉴얼 프로젝트. 유저리서치에서 얻은
인사이트가 최종 제춤까지 반영되는 과정 정리.
2
Data Visualization . Journalism . Responsive Web
PROJECT SYRIA
시리아 내전&난민 사태를 주제로한 인터랙티브
데이터 스토리텔링 기획, 개발 과정
5
Data Visualization . Web UX
DOONGLE Monitoring System
둥글 운영에 필요한 어드민 사이트 + 사용자 로그 데이터
모니터링 시스템 기획, 개발 과정
3
Communocation Strategy . User Research . Web UX
Communication Strategy for Cardiff Met
카디프맷 대학 국제사무실의 커뮤니케이션 전략 개선.
케이스 스터디부터 전략-홍보 페이지 개선 과정.
6
PROJECT LIST

3. Building New Design System
for Re-Branding JUNGLIAN
본 문서는 호텔예약 서비스 정글리안의 리브랜딩 과정을 정리하였으며, 특히
새롭게 정립한 디자인 시스템이 마켓팅 활동, 개발과정에 기여한 부분을 중심
으로 구성하였습니다.
기간
2018.10 ~ 2019.05
참여인원 (3)
서버 . API 개발1, 마케팅1, 디자인& 프론트개발1
기여항목
mobile ux.ui web ux.ui AB testingFront-end
develop
스킬셋 & 툴
sketch google
analytics
angular html5&css

4. 1-1 PROJECT BACKGROUND
1. AS IS - TO BE
-- 브랜드를 각인시킬 BI요소 결여
-- 유입된 키워드기 반영하지 않은
서비스 메인 페이지.
유입 숙소 결제
도시 키워드
호텔 키워드
브랜드 검색
1-2 BRANDING POSITIONING
브랜드 독립성
정보 전달
스토리텔링
파트너십 강조
AS-IS
TO-BE
AS-IS
브랜드.USP 인지 비용이 크며, 랜딩
페이지가 유입된 사용자 맥락을 반영
하지 않음.
TO-BE
부킹닷컴 파트너십을 브랜드 각인에
적극적을 활용, 구체적인 사용자
맥락과 연관지어 USP전달.
“서비스 주요 메트릭 감소”
(2018.06.01 - 12.31 기준)
BI 각인 부족 높은 USP 인지 비용 사용자 맥락 무시
“AS-IS의 세가지 문제점 정의”
-- booking.com영역에서의 자체
브랜드 각인 제한
-- 캐시백 설명을 위한 정보 과다
숙소 탐색
-- 적립금 적립.만료, 캐시백 신
청 내역이 동일한 테이블에
혼재되어있음.
적립 . 캐시백 신청
서비스 런칭 이후
2018년 하반기 주요
메트릭 최저치 기록.
'AS-IS'모델을 정의
하는 것으로 리브랜
딩 프로젝트 시작.
유입 35%↓ 컨버전 1.5%↓ 활성유저 33%↓
AS-IS USERFLOW

5. 부킹닷컴 파트너십을 적극적으로
활용한 스토리텔링
BI 요소 제작시 부킹닷컴과의
시각적 배합 고려
Primary color, 카드 UI, 화이트 스페이스의
균형 고려 시각계층 정리
도시, 호텔명등 유저가 호텔을 찾으려는
기준에 맞춰 랜딩페이지 최적화
Credit based partner-Credit based partnership Simple & Bold
인지비용 최소화를 위해 시각요소들의
단순화 및 대비 강조
Specific as possible
유저의 가장 구체적인 상황을 활용한
브랜드. USP 스토리텔링.
junglian indigo dark indigo bright blue
#4b28ff #132a8e #0083ff
500 700 400
Junglain primary color
booking.com
dark blue
booking.com
light blue
#003580 #009fe3
500 500
booking.com primary color Mobile Main PC Main landed by ‘hotel‘ keyword
*usp상세 페이지 상단 파트너쉽 설명
Junglian logo
type: Monterrat Black
Booking.com logo
type: custom type
2. STRATEGY

6. 3-1 VISUAL ELEMENTS 3-2 COMPONENTS
Space & Size (PC)
Roundness
Colors Button
Card
Card slider
List
FAB
Selection Control
Chips
junglian indigo
#4b28ff
700
dark indigo
#132a8e
900
bright blue
#0083ff
400
Accent
#ffa000
400
Typography (PC)
헤드라인1 / H1
Noto Sans CJK Bold / 24px
헤드라인2 / H2
Noto Sans CJK Bold / 18px
본문1 / Body1
Noto Sans CJK Regular / 14px
본문2 / Body2
Noto Sans CJK Regular / 12.8px
캡션 / Caption
Noto Sans CJK Regular / 12px
Color Viration
700 #4b28ff
600 #5939ff
500 #6446ff
200 #a594ff
50 #e2ddff
Gray Scale Viration
900 #212121
800 #424242
700 #646464
400 #BDBDBD
100 #F5F5F5
4px
tiny
8px
1X
16px
2X
32px
4X
64px
8X
text - element: tiny, 1X
elment - element: 1X, 2X
component - component: 2X, 4X
templete - templete: 4X, and more
container-col1 highlight. 8px
container-col1. 4px
container-regular
4px
container-regular
4px
container-regular
4px
button . 2px chip . 50%
Search Box
Textfield
이메일 주소를 입력해주세요
3. DESIGN SYSTEM AS ASSETS sketch

7. 4-1 VISUAL DEFINITION 4-2 COMPONENT DEFINITION
4-3 TEMPLETE USAGE EXAMPLE 1 4-4 TEMPLETE USAGE EXAMPLE 2
search-box.component.ts
@Component({
selector: 'search-box-horizon',
templateUrl: './search-box-.component.html',
})
search-box.component.html
<div class="container radiaus_2x primary_500_bg">
<div class="textfield">
.
.
</div>
Searbox Templete#1- Main Page Card Slider - hotel
Searbox Templete#2- Event Page Card Slider - city
SearchBox Templete1 HTML
<search-box-horizon [type]="'main'">
</ search-box-horizon>
SearchBox Templete2 HTML
<search-box-horizon [type]="'event'">
</ search-box-horizon>
hotelData = {
contentType: “hotel”,
numDisplayContent: 4,
CardWidth: (1180 - 64)/4,
contentHeight: 346
}
cityData = {
contentType: “city”,
numDisplayContent: 5,
CardWidth: (1180 - 64)/5,
contentHeight: 272
}
4. DESIGN SYSTEM IMPLEMENTATION
“기본적인 시각요소들은 css로 관리” “모든 디자인 컴퍼넌트들을 앵귤러 컴퍼넌트로 모듈화하여 재활용성 및 생상성 보장”
“동일한 컴퍼넌트들을 다양하게 활용할 수 있도록 템플렛 구성” “동일한 템플렛이라도 json을 매개로 사용 맥락에 맞는 옵션 최적화”
.col1 { width: 100%}
.col2 { width: 50%}
.flex_col { flex-direction: column}
.flex_col { flex-direction: column}
.flex_center {align-itmes: center}
.
.
layout
color
색상.스케일
size
마진,패딩 크기
shape
윤곽.모양
Type
타이포그래피
공간 성격.비율
Calling City card-slider component
<card-slider [contentData]=”cityData”>
</card-slider>
Calling Hotel card-slider component
<card-slider [contentData]=”hotelData”>
</card-slider>
angular html5&css

8. 유입 숙소 탐색 숙소 결제 적립 . 캐시백 신청
5. TO-BE SCENARIO
다이렉트. 브랜드 검색 또는 도시 키워드로 부터 유입 호텔 키워드로 부터 유입
1.서치엔진. 상품설명에 파트너십 강조.
2.호텔명 키워드로 유입시 캐시백 가능 금액과 연관지어 상품 설명.
CLICK TO LINK CLICK TO LINK

9. 유입 숙소 탐색 숙소 결제 적립 . 캐시백 신청
부킹닷컴 상품 리스트 페이지 예약. 결제 이후 적립내역 및 캐시백 신청 페이지
1. 부킹닷컴 상품 리스트 페이지의 USP설명 배너 가독성 개선. 1. 기존 텍스트 테이블에서 예약 단위로 적립내역 표시방식 변경.
2. 적립.만료 내역에 잔여 적립금 표시, 적립금 관련 CS 최소화.

10. 6. ACHIEVEMENT & A/B TESTING
KEY METRIC IMPROVEMENT A/B TESTING AFTER 1ST UPDATE
활성 사용자 72% 증가이탈율 35% 감소 컨버전 2.3% 증가
“4월 주요 업데이트 이후 약 4개월간 주요 메트릭 개선” “1차 업데이트 이후 메인페이지 서치박스 디자인 AB테스트 시행”
PC 버전 실험 가설
후기 섹션을 배너로 대체하고 시선의 흐름을
수직으로 통일시키면 검색량이 증가할 것이다.
PC 버전 실험 결론
실험버전의 검색률이 6% 높고, 이벤트 배너
클릭량 증가로 실험버전 최종 채택.
자료1. Booking.com 어드민 페이지 컨버전 통계
(5,6월은 counter visitors 측정 오류도 컨버전이 잘못 기록되있으며 5.5% ~ 6%사이로 추정됨.)
자료2. GA 이탈률 통계
(2019년 4월 - 7월)
자료3. GA '7일간 활성유저' 통계
(2019년 4월 - 7월)
첫번째 업데이트 버전 실험 버전
자료4. GA 'AB Testing' 결과 보고 페이지
(2019년 7월 2주차)
google
analytics
google
optimize

11. DOONGLE 2.0
“Find your global friends”
1인 프로젝트로 시작한 ‘둥글’의 법인화
과정에서 서비스 리뉴얼 실시.
사용자 리서치에서 도출한 인사이트가
제품에 최종적으로 반영된 과정을 중점
적으로 기술.
프로젝트 소개
2017.08 ~ 2018.03
투입 인원(6)
기간
개발(3), 사용자 리서치 & UX( 1),
브랜딩 & GUI(1), 마케팅(1),
데이터 분석(1)
기여 항목
Sketch
Mobile UX.UI
Framer Html &
Javascript
Google
Analytics
User ResearchPrototyping
툴 & 스킬셋

12. 1-1. SERVICE BACKGROUND 1-2 .DESIGN CHALLENGE
2011
1인 개발자에 의해
펜팔앱으로시작
2013
스토리 피드 및
SNS 기능추가
2017
서비스 법인화
리뉴얼 프로젝트 시작
Predictable IA
정보구조. 레이블
일관성 개선
Context Clarity
탐색- 관리 경험
전환 개선
UX Standard
누적된 사용성
문제 개선
1. PROJECT OVERVIEW
Match (User Search)
Storyfeed (landing screen) Filtered Story Feed
Notification Stack
-- 필터 항목들이 제공하려는 맥락들이 뚜렷하지 않음.
-- 탐색(새로운 인맥)과 관리(기존)를 위한 항목들 혼재.
-- 새로운 유저의 접근과 기존 인맥과의 소통유도하는 알람
들이 구분될 필요있음.
-- 매칭 기준과 스토리를 필터링하기 위하 기준의 차이점에 설득력이 떨어지며 일관
된 탐색경험을 저해하는 여지 제공.
Random Message
-- 메세지를 보낼 유저를 선정하는 기준과 다른 기능에서의 필터링 기준이 상이함.
-- depth 이동이 적합할 화면들의 링크들이 드롭다운 메뉴에
집중되어 인지과부하 여지 제공.
AS-IS USERFLOW

13. 사용동기
learing language using langauge meet forienger dating
유저간의
연결 계기
포스트
(소극.수동적)
메시지
(능동적)
선호하는
소통방식
포스트를 통해서
(커멘트, 라이크)
지속적인 메시지
지향하는
소통경험
온라인 오프라인 주기적 만남
(오프라인)
2-1. DESIGN PROCESS 2-2. INDEPTH INTERVIEW
2-4. PERSONA & DISTRIBUTION2-3. EXPERIENCE FEATURES
langauge learner
특정 언어사용자 빨리 찾기
주기적인 대화 상대
socializer
실시간 대화 상대 찾기
오픈된 인터랙션을 선호함
explorer
특정한 주제의 정보 찾기
지역기반으로 유저들과 연결
love seeker
데이트 상대 찾기
2. DESIGN PROCESS & PERSONA MODELING
motivation
for usage
forming
relationship
Usability &
Experience
$
In-App Item
Satisfaction
20명의 참가자에게 4개의 카테고리 질문들 인터뷰
p2/28
자영업
p6/24
학생
p8/29
학생
p3/26
학생
p9/36
IT종사
p11/24
학생
p4/25
학생
p10/28
학생
p2/20
학생
p5/30
무직
p1/27
온라인 마케터
p7/33
서비스업
인터뷰에서 도출된 키워드들로 페르소나 특징이되는 경험척도 정의 1. 공통된 경험척도를 갖은 클러스트들을 페르소나로 분류
2. 설문조사(표본 820명)를 통해 각 페르소나의 분포 및 기타 특이사항 조사
526 21
128
114
In-depth
Interview
Value
Proposition
UX
Strategy
Information
Architecture
Wireframe
& Prototyping
GUIFunction
categorizing
Question
-naire
Persona
Modelinng
DISCOVER DEFINE IDEATE DELIVER

14. 3-1 .KEY STRATEGY
3-2. MENTAL MODEL 3-3. INFORMATION ARCHITECTURE
Quick Switching
새로운 인맥 탐색과 기존 인맥 관리 경험을
구분하되, 빠른 전환을 위한 네비게이션 제공.
Consistent Exploration
탐색 기준의 일관성을 제공하되 각 페르소나의
니즈를 충족시킬 수 있는 확장성 보장.
Regional Driven
사용자들의 관심사에 가장 큰 영향을 주는요소
중 하나인 '지역' 중심의 탐색경험을 강화.
3. UX STRATEGY & METNAL MODEL
"인맥 관리, 탐색 경험을 메인으로 분리한 Instagram의 멘탈모델을
차용하되 노출. 탐색 경험에 대한 몰입을 강화."
1.1.1 Doongle filter
6.0 User Profile
(Stranger)
1.1.3 Inbox1.1.2 Notification
main tab
새로운 인맥. 컨텐츠에
대한 노출
목적. 적극성에 따라
최적화된 탐색 경험
관계 형성에 트리거가
되는 요소 노출
관계 유지를 위한 소셜
매니징 및 소통 경험
EXPOSED EXPORE CONNECT MAINTAIN
Refresh Screen Explore Connect
5.0 My Page1.0 story tab
(Landing screen)
2.0 Search tab 3.0 Right Now 4.0 Friend's story
6.0 User Profile
(Friend)
1.1.3.1 Message

15. EXPOSED EXPLORE CONNECT MAINTAIN
1.0 doongle story 6.0 user profile 4.0 friend's story
1.2 notification2.0 search
1.0 doongle story
(filtered)
1.0 doongle filter
3.0 right now 2.0 search
(filtered)
4. TO-BE SCENARIO

16. 1.1.1 Doongle Filter
5. EXPOSED --EXPLORE
Key Fact
설문 참가자의 64%, 특히 'socializer'의 72%가
스토리를 매개로한 프로필 방문을 선호한다고 답하
여, story tab을 서비스 랜딩스크린으로 유지한다.
2.0 Search Tab1.0 Story Tab
DOONGLING FILTER
-- 스토리, 유저 탐색에 동일한 기준 적용이 적용
된 통합 필터 사용(doongling).
-- 기존 인맥들에 대한 필터 옵션은 제외한 대신
하단 네비게이션에 친구 스토리탭 추가.
필터 화면으로 이동
피드.유저리스트 갱신

17. Framer Html &
Javascript
38,889
100%8%32 AMAT&T
??Online Users
6. REGIONAL DRIVEN EXPLORE
RIGHT NOW!
Prototyping with Framer & HTML5
--지역별 실시간 접속자들과 즉각적인 소통을 원하는 유저들을
위한 지도기반의 그룹 채팅.
--둥글 필터에서 확인할 수 없는 도시단위 접속유저 확인 가능,
특정 지역의 관심을 매개로 유저들과 연결.
Key Fact
설문 참가자의 56%, 특히 ‘Explorer’의 86%는 국가를 매개로 사용자 검색을
한다고 응답하였고, 지역별 시차로 심한 지역의 유저를 찾는 경우 현재 접속자
와 즉각적인 대화를 이어나가기 어렵다는 페인포인트가 들어났다.
ver1: Dual mode ver2: Stress test ver3: Search mode 3.0 Right now
3.0.1 Profile Pup-up
Clyde Barret
Btistol, England
Visit Profile1:1 Chat
CLICK TO LINK CLICK TO LINK CLICK TO LINK

18. 7. ACHIEVEMENT
활성 사용자 약 300%
--업데이트 2주후 1일 활성사용자 약 300% 증가
--특히 1일 활성 사용자의 증가는 소셜 관리 기능
강화로 앱 시작 경로를 다변화한 결과로 예측함.
종료율 약 10% 감소
--랜딩 스크린(1.0 Story tab)의 종료율 10% 감소
--스토리탭의 종료는 유저가 탐색의 흥미를 느끼지
못한다는 뜻으로 특히 첫번째 세션일 경우의 종
료. 이탈율이 감소됨.
세션 시간 13% 증가
--세션 시간 13% 증가
--특히 ‘1.0 story tab’과 ‘1.1.1 doongle filter’
에서 체류시간이 늘어남

19. DOONGLE MONITORING SYSTEM
in-app purchase log data visualization Friend Rqeust between Nations New User statistic from log server Profile approval request list
프로젝트 소개
둥글 운영에 필요한 커뮤니티 관리 및 GA에서 확인
할 수 없는 log data를 모니터링하기 위한 웹시스템.
(2018.07 ~ 2018.08)
참여인원 (3)
--서버 API 개발(1)
-- 데이터 분석(1)
--디자인& 프론트개발(1)
기여항목
Front-end
develop
web ux.ui data vizs
스킬셋 & 툴
sketch html5&css d3 JS JQuerry

20. PROJECT BACKGROUND
둥글을 운영함에 있어 다음 3가지 니즈가
내부적으로 들어남
커뮤니티 관리와 주요 유저 로그를 확인할 수 있는
모니터링 웹시스템 기획
DATA ACCURACY
“성과 측정을 위한 정확한 데이터를
알고 싶다. GA 콘솔의 new user중
실제 몇명이 신규 가입자인가?”
-마케터-
USER LOG DATA
“자세한 유저 로그 데이터를 알고싶다.
각 나라별 유저들은 어떤 지역과 주제에
관심이 많을까?”
-UX 디자이너-
COMMUNITY MANAGING
“기존에 어드민의 프로필 승인. 신고 처리
가 더 편해졌으면 좋겠다. 불필요하게 반
복되는 액션이 많다. ”
-CS.관리 커뮤니티 운영자-

21. INFORMATION ARCHITECTURE
Log-in
admin
main
data portal
main
new profile
approval
Existing profile
approval
Profile Approval
Message
Report
Story
Report
Conetent Report
Search
User
Reward
Multiple Users
Send
Multiple Msg
Extra Functions
New Users
Active Users
User Statistic
In-app
Purchase
Revenue Report
Friend Request
Msg Exchange
User Interactions
FRONT-END
user profile user active logstory message
BACK-END
profile status API Story report API
MSG report API
MSG send API user access log API Purchase record API User Action record API
1일 단위로 접속 유저수 확인.
당일 가입 유저인지 동시 확인.
1일단위 구입이 완료된 아이템 종류
와 누적 구입수를 기록.
최근 7일동안 각 국가별 유저들의
메세지,친구요청 대상 국가 기록

22. USER FLOW: ADMIN MAIN
LOG-IN PAGE ADMIN MAIN ADMIN FUNCTION PAGE (Profile Report)
-- 지정된 어드민으로 지정된 ID로 접속.
-- 로그인 이후 페이지를 무엇으로할지 선택옵션.
-- 헤더(글로벌 네비게이션)를 통해 Data-portal로 이동 가능.
-- 주요 기능은 크게 프로필 승인, 리포트 관리, 기타 기능으로 분류.
-- 주요 메뉴(기능)의 변경 사항을 염두하여 확장 가능한 Grid UI 사용.
-- 각 기능당 대기하고 있는 처리건수 미리 보여주기.
-- 모든 처리를 개별적으로 처리했던 기존 방식을 최대 50건씩 일괄처리하
도록 개선
-- 처리 결과 옵션을 운영자가 빠르가 체크한 후 ‘update’버튼을 통해 결과
값 DB로 전송

23. DATA PORTAL - USER LOG VISUALIZATION
DATA PORTAL MAIN DATA VIZ1: MESSAGE EXCHANGES BETWEE NATIONS DATA VIZ2: IN-APP ITEM PUCHASE LOG
DATA PORTAL의 대시보드에는 5개의 데이터셋들을 시각하여 보여준다.
1. 최근 6개월간 1일단위 가입자
2. 최근 6개월간 활성화 유저 (당일 기준 7일이내 2번이상 접속)
3. In-app Item 구매 경향 시각화
4. 최근 1달간 국가별 유저간 메세지 교환수
5. 최근 1달간 국가별 유저간 친구 요청수
-- TOP 15개국 유저간의 메세지 교환수를 Sankey Chart로 시각화.
-- 발신국가의 Node를 클릭하면 각 국가로 발송된메세지수를 보여줌.
(수신국가 클릭시 동일)
-- 친구요청 로그 또한 동일한 방식으로 시각화.
-- 전반적으로 한국인에 대한 관심이 많지만 그중 터키가 가장 편향된 관심
을 보임
-- 자국 유저간의 메세지가 가장 많은 유일한 국가는 터키이며 이는 터키 남
성이 자국내 이성에게 보이는 관심으로 판단함.
-- 단일 품목이었던 ‘Premium’ 아이템의 2회 이상 재구매율은 약 64%였다.
-- ‘Premium’ 아이템 구매경험이 있는 유저들의 평균 구매 횟수는 약 3.2회
였다.
-- X축: 날짜(1일 단위)
-- Y축: 아이템을 한번이라도 구매한적 있는 유저의 ID
-- 즉 Y축은 시간(X축)에 따른 개별 유저의 아이템 구매 내역의 배치를 뜻함.
INSIGHT INSIGHT

24. ACHIEVEMENT
DATA PROTAL을 통해 얻은 인사이트를 통해
다음 세가지 개선사항을 이뤄냄
IMPROVE STORYFEED
SORTING ARGORITHM
스토리 피드에 아무런 필터옵션이 없을경
우 각 국가의 선호지역 wieght를 반영.
스토리 피드 체류시간
12% 증가
PREMIUM ITEM 구매율
16% 증가
1일 커뮤니티 관리시간
1시간 단축
1회성 구매였던 프리미엄 아이템을 3개월
단위로 묶어서 판매. (3,6개월)
*3,6개월중 1개월을 기존 단일 품목으로 계산
PREMIUM ITEM
BUNDLE SET
하루 프로필 승인 200건, 신고 처리 100
건 기준 처리시간 약 1시간 단축.
IMPROVE COST EFFECT
OF COMMUNITY MANAGE

25. BRAND ORIENTED SERVICE DESIGN
FOR NEW COFFEE BRAND IN BEIJING
KEYWORDS
- Service Design
- Branding
- Customer Behaviour
MY ROLE
- Modeling Persona
- Experience Map Design
#3.
DATE: 2015.12 TYPE: TEAM PROJECT
MASTER PLAN
RESEARCH
FLAGSHIP
STORE
BRAND
PLATFORM
SERVICE PROCESS
1. Context framework
2. Persona
3. User Journey Map
BACKGROUND
Beijing based corporation planed to
launch NEW COFFEE BRAND. Their
first plan is to build flagship store of
the brand in Beijing.
CONTEXT FRAMEWORK
DESIGN CHALLENGE
Designing SERVICE PROCESS of
the FLAGSHIP STORE considered
context framework and persona
which are driven from BRANDING
PLATFORM.
CUSTOMER SEGMENTATION
CORE BRAND VALUE PROPOSITION
ATTITUDE OFFERINGS CUSTOMERS
ULTIMATE
CRAFTMANSHIP
EXPERIENCE
ITSELF
OPEN MINDED
& RELAXED

27. PERSONA by context framework & Customer segmentation
Cafe is their best relaxing space
after shopping, they want to be
served F & B and relax in comfort-
able atmosphere.
SHOPPER
LIGHT MEAL
CHATTING RELAXING INDIVIDUAL
RELATED CONTEXTS
NEEDS
CONTRIBUTION OF BUSINIESS GOAL
Their Working time is flexible. They
prefer to be placed in creative
environment without disturbing.
Quality coffee would give them
fresh energy.
URBANTAINER
TASTING
PRODUCTIVE
CHATTING
TAKE-OUT LIGHT MEAL
RELATED CONTEXTS
NEEDS
CONTRIBUTION
They are the leading group who
consume coffee actively in China.
Coffee is their daily habbit and
they like to customize coffee taste
by themselves.
COFFEE LOVER
TAKE-OUT
SELF-BREW TASTING
PEAR
LEARNING
RELATED CONTEXTS
NEEDS
CONTRIBUTION
They spend a lot of time to find
trendy space. They are not hes-
itate to talk to stranger and cafe
could be a place for their social
activities.
SOCIALIZER
AFTER WORK
PARTY
HANG OUT SOLO DRINKER
SOCIAL
ACTIVITIES
RELATED CONTEXTS
NEEDS
CONTRIBUTION

29. INTERACTIVE
DATA STORYETLLING
OF SYRIA CRISIS
KEYWORDS
- Data Visualization
- Interactive Storytelling
- Responsive Web & Vizulaization
SKILL
- HTML5
- Java Script
- D3.js
MY ROLE
- Research & Interview
- Concetp Design
- Front-End develop
Date: 2016.02 Type: Team project
Scrolling Narratove trigger
transition of data visualization

30. PROJECT GOAL
PROCESS
"Developing Interactive Storytelling based on
qunatatitive research insights about Syrian Crisis"
Research Data Mining
Analysing
data
Define
Key insight
Define
UX stratgey
Building
I.A
Concept
Skecth
Developing
Visualization
Front-end
developing
DISCOVER DEFINE CONCEPTUALIZING DEVELOPING
Date Battle
Air
strike
Direct
attack
Barrel
bomb
Shelling
2013/1/1 205 268 552 11 1126
2013/2/1 162 174 400 4 846
2013/3/1 85 36 270 3 595
2013/4/1 96 61 297 5 799
2013/5/1 89 57 115 3 413
2013/6/1 140 92 134 0 612
2013/7/1 21 16 48 2 88
2013/8/1 47 13 61 2 67
2013/9/1 50 33 48 5 146
2013/10/1 22 13 27 1 72
2013/11/1 44 14 29 0 66
.. .. .. .. .. ..
Refined data explains refugee distribution and
cilvil damage pattern by timeline.
REFINED DATA UX STRATEGY OF
INTERACTIVE STORYTEELING
NARRATIVE STRUCTURE
History of
Syrian Refugees
INSIGHT FROM DATA ANALYSIS
2011 2012 2013 2014 2015
Level of
Civil Attack
Number of
Reugee
DATA
VISUALZIATION
NARRATIVE
ELEMENTS
STORYTELLING
TECHNIQUE
Refugee
Dirstribution
Timeline of
Civil War
Who is Involved
Syrain Crisis
INTERACTIVE
VISUALIZATION
SCROLLER
INTERFACE
2
3
1
4
AUTHOR DRIVEN
STORYTELLING

31. Image fiexd
Image
fixed
Visualization
window width 100%
Index Page Chapter1 Chapter2
windowheight100%
http://projectsyria.witnessism.org/wireframe/LINK TO WIREFRAMEWIREFRAME & PROTOTYING with HTML, CSS and JQUERY
page transition after
scrolling this point
Visualiztion is fixed on
the screen while narrative
is scrolled
Narrative trigger
transition of
visualization
Narrative trigger
transition of
visualization
Visualiztion is fixed on
the screen while narrative
is scrolled
page transition after
scrolling this point
page transition after
scrolling this point

32. Desktop
Mobile

33. http://projectsyria.witnessism.org/
LINK TO PROJECT
INTERACTIVE DATA VISUALIZATION by D3.js & Javascript
Highlight area of visualization
matched with current narrative
Tooltip for checking detail
information on the vizualiation

34. KEYWORDS
- Design Thinking
- Communication Strategy
DATE: 2014.11 TYPE: PERSONAL PROJECT
Intake of students from middle east
has been decrease for last 3 years
Enhancing promotion channel
for Islamic Students
Phenomenology research of
two different stakeholders
33%of international students
in Cardiff Met university came from
middle east. However....
NEW COMMUNICATION STRATEGY
OF INTERNATIONAL OFFICE
TARGETING ISLAMIC STUDENTS
*Key fact*Key fact
Intake of international students is
crucial KPI of international office.
Arabic students were the most
majority follwoing Chinese students
background design challenge
MEthodology
ISLAMIC
STUDENTS
INTERNATIONAL
OFFICE

35. DISCOVER
Key
Finding
or
Activities
Tool
DEFINE IDEATION DELIVER
SNS of Omani students had
promotion effect to prospective
student in the country.
Developing idea based on
connection between needs of
the students and the office
Developed comprehensive
solution by 4 stage of
innovation process
Only intake of Oman has
been increased among top 5
countries in students intake.
• In-depth Interview
• Ethnography
• Affiniti Diagram
Problems
Recognition
Explore context of
stakehodlers
SWAT analysis of
international office
Case study of
Omani communty
Co-design
Ideation
Explore
Core value of
stakeholder
• SWOT Analysis
• User Journey map
• Codesign Session with
taffs and students
• Codesign Session with taffs
and students
process
Business
model
Rebranding
Communication
Strategy
Web
Service
tangible

36. COMMUNICATION
STRATEGY
REBRANDING
Impression
Process Network
NEW VALUE
PROPOSITION
UX DESIGN OF
OFFICIAL WEBSITE
innovation STAGES
STAKEHOLDERs INSIGHT
MARKETING TEAM
GOALS
- Increasing intake number
NEEDS
- Enhancing multi-channel marketing
- More sustainable marketing channel
PAIN POINTS
- Lack of partnership with local agency
- Distraction of marketing activities as target countries
increased
WELFARE TEAM
GOALS
- Retain high score in satisfaction survey
NEEDS
- Transition ‘man to man’ communication to the more
efficeint approach.
PAIN POINTS
- Long intervention of interaction between students
- High effort to solve huge amount of inquries
ISLAMIC COMMUNITIES
GOALS
- Initiating more students
- Activating cultural/religioous event
NEEDS
- Initiating guildeline for fresh man
- Renting Space for events
PAIN POINTS
- Complex administration process
- High effort to initiate member from different courses

37. Welfare
Team
Marketing
Team
Islamic
Communities
Online & Offline
Service
High Score of
Evaluatin Survey
Contributing Student
Satisfaction
Expending
Marketing Channel
Providing
Marketing Channel
Promoting
Communities
<Value Exchange between Stakeholders >
Value exchange map
Stage1: Rebranding
From To
Impression
Friendly Partnership
Process
Devoting Smart
Network
Informative Participatory
<Rebranding Current Attributes>
stage2: integrating business models
International Office
Intergrated
Area
Activating
Communities
Direct
Supporting
Internatioanl
Communities
Business
Goal
Activities
Target
<Business Acticities of International Office>
Increasing
Satisfaction
Man to man
service
Current
Students
Welfare
Team
Increasing
Intake
Overseas
Marketing
Potential
Students
Marketing
Team

38. stage3: communication strategy - PARTICIPATORY NETWORK
Prospective
Student
Local
Agency
Current
Student
Channel
Network
Communication
Flow
Promotion
Effect
AS - IS MODEL : MAN TO MAN COMMUNICATION
Welfare
Team
Marketing
Team
TO - BE MODEL : SOCIAL NETWORK BASED COMMUNICATION
Welfare
Team
International
Communities
Marketing
Team
Welfare team
Man to man communication required a lot of effort, main
cause of heavy work burden to staffs
Marketing team
Relied on only local agency of target countries, there was
limitation of promotion effect.
Welfare team
By involving international communites, they can increase communication
flow more effectively.
Marketing team
When SNS of international communities are exposed to prospective
students, marteking team can takge advantage of promotion effect.

39. stage4: redesign international section of official website
AS - IS: INFORMATIVE TO - BE: PARTICIPATORY
REMOTE USER TEST OF POTENTIAL STUDENTS
A potential student from Oman couldn't find
information he want to explore in 4 link moves.