ux design by uijun park

CHALLENGE USER EXPERIENCE DESIG NER PARK’S PORTFOLIO

UI and UX Design is CHALLENGE of Critical thinking, Communicating and Creating.

CONTENTS

E-BOOK PROJECT

“Singles” Experience Design

New Interaction of Smart Printer

산학 project

수업 project

Teamwork

UX/UI Product Graphic

CDAK Information Archtecture & User Interaction

Seoul International Design Competition

Graphic Design

수업 project

공모전 finalist

Individual work

UX/UI Product Graphic

E-BOOK PROJECT 졸업연구, 산학프로젝트 : 책과 사람의 소통을 위한 메뉴얼 Explaination: E-ink 기반의 Ebook device를 다양한 방법론으로 조사 분석 하여 Design Direction을 완성하고, Direction을 기반으로 한 새로운 concept을 제안하는 프로젝트이다. Role: Team Managing, In-depth user interview, Framework making, 3d modeling, GUI/UI

HANDONG GLOBAL U N I V E R S I T Y

Transformer

Quartre

시간과 공간 활용을 극대화. 4가지 화면 멀티태스킹

마법같은 화면구성. 매직메뉴버튼(M)과 자유이동 인터랙션

독자의, 독자에 의한, 독자를 위한 책. 콰트로의 첫장열기

사용자가 원하는 만큼의 책장 넘기기. 콰트로 페이지 컨트롤러

특별한 당신을 위한 새로운 POSITIONING

In-depth Interview & Video Protocol Readerâ&#x20AC;&#x2122;s Object(book) Observation

2-1. Methodology

Best Practice Best Practice Expert Aid

2. Framework

3. Persona

Benchmarking, Usability Test

1. Heuristic & Pre-research

START

C A

Keyword Extracter

Analysis

5. Consolidation

Design Process

6. Direction

4. UT

7. Concept

to lef

r ve

n tio 행 ta en 을 실 em w 등 pl ervie

r ve to

lef

n, tio va

레 카

Te er

카레

Si 트

젝

향

정

설

방

의 족

징 특

A 대

B . 를 리 원 한 다

지 원

절 약 하 기

소 비 2. 공 간

싱 공 글 활 간의 족은 용 이 효 생활 필 율적 요 하 다 .

4. 합 리 싱 적 글족 적 인 은 인 소 합 비 시 간

사 식

족 Fr 의 am Ne ew ed or s k .

인

싱 좀 글 사 더 족은 용 효 시 하 율 간 고 적 을 싶 으로 다 .

en ce qu Se

적 칙

관

규

싱 적 글족 인 은 소 합 비 리 를 원 한 다

습

lS et 의 tin 식 족

oa G

gl e

레

출 추

카

ct io

iss

Si n

pe ty 한

레 카

tra Ex

에

s ue 레 카

Iss 레 카

rin

o St

프 로

fo d

tin

a st

및

in m

정

식

re c

rv iew te

n. . io

va t er

Te st

rO se ,U

er Us 활 용 하 기

싱 좀 글 사 더 족은 용 효 시 하 율 간 고 적 을 싶 으로 다 .

HANDONG GLOBAL

음

설

Role: In-depth user research, Concept generation Making Framework, 3d modeling, GUI/UI

o fo 관 g tin 습 ?” Ea 식 가 관 의 한 보 족 떠 음식 e 어 , gl 리 in 은 식 처 “S ce en 리, 음 조 qu

겟

?”

ife get rl r 한 tte or ta 양 을 be on f 큼 다특징 다. ts lecti 인만 그 보았 an Se 주제 들과 치해 w 람 서 유 자 사 리 의 류 종

U N I V E R S I T Y

t va er bs O

le?

g sin

E M

ho “W

타

er Us

w Ne

”

족

Web

s e gl ingle ace in s l d “S rage wn p t foo ple ve r o tan peo r a fe ns fo Pre er i illion sy ef m Pr t 6 Bu ou Ab

Newspaper Explaination: 기업이 최근 주목하는 싱글족의 식습관을 Support할 수 있는 제품을 선정하고, 싱글족의 Experience에 맞추어 설계된 Methodology를 이행하고 최종 Concept을 제안한다.사용자 조사를 진행하고 이를 통해 도출된 Data를 토대로 Direction을 설정하고 Final Concept을 제안한다.

trash can

a h se earc ion Re Res aluat et ed Ev rg -bas istic b ur Ta e W He s,

Single Experience Design :What is good for Singles?

ng ,

od eli

UI G

tio

석

tio ula m Si

및

id a

분

n tio ali za

Re r to

3D 리

정

ch et

ra ge fri Re

종 최

제

품

선

셉

설 정

Se 정 및 t 컨 ct io re Di

at im

ng eli

ta Da

된

ty pe

류 분

w Ra

r so

r to ra er ge g r fri Ran sso - e

pr m Co e ng Ra E-

on lC

na Fi

Compressor E-range Refrigerator Si

. E pr 한 에 려 m 시 고 Co 동 을 줄 를 턴 와 미 패 도 재 활 생 를 와 거 사 의 수 식 le족 의 리 분 ng le족 의 le족 ng Si

집

ta Da

석

분

e tic ac Pr

Final Modeling

! ta

Fl ! Da

p ou

! ! ch ar

! se

! Re

a on

! c

ey rv

수

p ou

st Be

n ti o

? ?

ti n

생

식

t se 글족의가? 싱 인 gy l o 하여 할 것 통 악 do ho 법을 e를 파 방 c et M 어떤 quen se 활

의 ea Id 싱글족 내기 로 어 대 디 토 이 를 아 ta 줄 Da 해 된 원 출 지 추 활을 생

식

Better environment for singles ?

a b c

New Interaction of Smart Printer Explaination: 복합기 제품을 선정하여 User Experience를 위해 설계된 Methodology의 과정에 따라 사용자 조사를 진행하고 이를 통해 도출된 Data를 토대로 Direction을 설정하고 Final Concept을 제안한다. Role: In-depth user research, Concept generation Making Framework, 3d modeling, GUI/UI

Building Research Framework

Pre-research 1 Web research

3 Critical issues

2 Mind map

3 Domain Properties

Heuristic

5 Usability Framework

4 Evaluation

HANDONG GLOBAL U N I V E R S I T Y

3 Critical issues

5 Usability Framework

1 Web research

Label 및 Pictogram 등이 올바른지 알아본다.

Naming, Metaphor error Natural Mapping error

Routinely-made error 반복적이고 자주 일어나지만 많은 행동단계를 요하는 Work 에 반응하는 사용자의 행태 조사

4명의 팀원들이 복합기 사용경험이 있지만 시장동향 및 디자인 동향에 대해 파악하고 Research 방향을 수립할 수 있는 Data를 모으는 작업을 수행하였다.

2 Mind map

Research를 통해서 Domain(출력, 스캔, 복사)의 속성에 따라 중요한 issue를 도출하여 정리 및 통합을 하였다. 이는 Research Framework의 기본이 될 작업이었다.

Direction, positional error 출력물의 방향과 위치가 사용자의 의도와 맞지 않은 사용행태를 조사하고 일치하지 않는 이유를 알아본다.

3 Domain Properties

설치

환경설정

프린트

복사

고장

스캔

Phase perception Configuration 의도한 결과물을 얻기 위해 얼마나 쉽게 환경설정을 할 수 있는 지 관찰한다.

4 Heuristic Evaluation

유지보수, 카트리지 교체

5~6명의 프린터 유저들로 하여금 출력, 스캔, 복사의 과정에 있어서 연상되는 것들에 관하여 mind-mapping을 하는 시간을 갖고 이를 통하여 cirtical issue를 추출하였다.

사용자의 패턴화된 행동이 복합기의 물리적 레이아웃(버튼, LCD 등)과 Natural Mapping 을 이루는 지 알아본다.

이동

Pre-research에서 나온 Data를 토대로 복합기의 Sequence에 따른 특성을 뽑아낸다. 예 } 프린트 - 출력시 진동, 통장 사본 및 증명 사진 출력 복사 - 책의 안쪽 부분은 복사 시 어둡게 나옴 스캔 - 스캔 후 원본 빼는 것을 잊음 환경 - 컴퓨터와 프린터 기 사이의 색상 차가 존재 설치 - 드라이버 다운받기 귀찮음 고장 - 빨간 불 나올 때 어떻게 할까?

자체적으로 제품 및 interaction Service에 대해 평가하는 시간을 갖고 이를 Data화 하였다. 이 자료를 분석하여 통/폐합하여 Usability Framework를 짜기 위한 전초단계를 완성시킨다.

장비 상태, 고장 진행에 대한 정보를 사용자가 쉽게 인지하고 대응할 수 있는 지 관찰한다.

:) Design Implementation

User Research 6 Persona Selection 7 Usability Test

9 Desgin Strategy

8 Analyzing Data

0 Ideation

1 Final Concept

6 Planning UT Method

6 Persona Selection

0 Ideation

7 Usability Test

:) 1 Final Concept

평가자 1의 입장에서 UT 촬영 장면 평가자_2 실험자 조작 상황의 전체적인 모습을 전면에서 촬영함

직장인 - 보고서 무한 출력자 유형

숨은 조력자

평가자_3

실험자가 interview에 적극적으로 임할 수 있게 분위기 조성

대학생 - 시험문제 출력자 유형

전체적인 실험을 진행하며 과업을 실험자에게 전달함

Muliti-function Printer

실험자 책상에 앉아서 태스크 수행 평소에 사용하는 환경과 비슷한 분위기를 제공 편안한 마음으로 실험에 임할 수 있게 함

프리랜서 - 고품질 출력자 유형

실험자가 말하는 내용이나 질문을 현장에서 랩탑에 기록함

각 분야를 대표할 수 있는 User Testee를 선정하기 위해 Persona 기준을 만들고 그에 가장 적합한 인물을 Contact 하여 UT를 실행가능하도록 하였다.

주어진 Task를 실행하면서 사용자가 범하는 오류 등을 체크하고 촬영하여 작업 모습을 남겼다.

6 Planning UT Method

Feedback & Modification

Scenario writing Task Simulation

Value 1. Consequential Prediction System ex 1. 급지 및 스캔시 출력 방향, 위치 예측 ex 2. 메뉴 선택에 따른 결과 예측

User Interaction

Value 2. PUI에 적합한 interface 방식 제공하기

8 Analyzing UT Data

What are the tasks?

Task Room Setting

9 Design Strategy

평가자_1

원인에 대한 분류

Task

현재 상태에 대한 알림성

두껍고 큰/얇고 가벼운 책 스캔

오류 및 특이사항

현재 상태에 대한 알림성

한 장에 두 페이지 인쇄

인지하기 쉬운 naming

부분 확대 복사

인지하기 쉬운 naming

전용지 인쇄

용지 설정을 위해 "미리보기"메뉴 대신에 "사진편집"메뉴로 들어갔 다.

자연스러운 대응성

신분증 방향을 맞추어 복사

신분증을 스캐너 벽에 붙여서 놓음

원인

대안

현재 스캔중이라는 시각적인 메시 스캔은 집중을 요하는 work이 아니기 신호를 인지할 수 있는 수단이 줄어들 지가 있었지만 스캔이 아직 덜 끝 때문에 신호를 지각할 수 있는 범위가 어도 인지할 수 있도록 두 종류 이상의 났음에도 프린터기가 조용하여 다 한정되어(시선 돌림) 현재 상태를 명확 Feedback을 준다. (시각적 신호와 청각 끝난줄 알고 원본을 제거하여 오류 히 인지하지 못한다. 적 신호를 동시에 제공) 발생

사용자가 사진 인화지로 설정되어 있던 것을 보지 못하고 원래 의도 했던 A4가 아닌 사진 인화지 모드 인 채로 출력을 함

부분확대 모드말고, 백분율 모드로 잘못 들어감

복합기에서는 일반적으로 사용하는 용 지와 특별히 사용하는 용지의 구분 없 이 이전 세팅값만을 기억하여 제공하 는 반면, 사용자는 어떠한 일을 할 때 현재 상태(세팅값)에 대한 Feedback을 work가 바뀌게 되면 그 단계만을 인지 줄 수 있는 방안 고려(용지함 부분이 하고 생각하기 때문에 복합기의 세팅 빛나는 램프) 값과 사용자가 인지하는 세팅값간의 현재 상태(용지 종류 등)를 상시 표시 Gap이 발생한다. 해 주는 창 고려 용지 상태의 표시가 다른 메뉴와 비슷 해 Sensory Memory에 인식되기 어렵 다. 사용자가 크기 조절에 대한 유사성을 근거로 메뉴를 선택할 때, cognitive 대상과 행위 모두를 포괄할 수 있는, naming을 제대로 주지 않아 오류를 범 인지하기 쉬운 네이밍을 해 준다. 하게 한다. Naming이 하위 메뉴들을 포괄하지 못 하여 선택 후 결과를 예상하는데 어려 하위 메뉴를 포괄할 수 있는 네이밍을 다시 해 준다 움이 있다. 현재 위치에 대한 명확한 인지가 어렵 네비게이션을 넣어 주어 현재 위치가 어디쯤인지 알게 해 준다 다. 복합기가 제시하는 Conceptual Model (Sequence를 고려 : 미리보기-용지설 정)과 Mental Model( 속성의 유사성을 고려 : 사진편집-용지설정)이 일치하지 않는다. 앞 뒤 복사를 할 때 위치 파악이 용이 하도록 행동함

속성의 유사성을 고려하여 복합기가 제시하는 Conceptual Model과 사용자 의 Mental Model을 일치시킬 수 있는 네이밍을 다시 해 준다 x

ex 1. 데이터의 양(Continuous/Discrete)에 따라 그에 적합한 인터페이스 제안 ex 2. 요구되는 조작의 세밀도에 부합하는 인터페이스 제안 Value 3. Right Time, Right Information ex 1. 현재 진행 중인 Task에 대한 시각, 청각적 피드백 제공 ex 2. 활성화 상실 오류를 범하는 곳에 대한 due 제공 ex3. 설정된 상태에 대한 정보를 실시간으로 제공

Form-Factor

Information Archtecture Restructuring & User Interaction Proposal Explanation: 캐논 Powershot 제품을 선정하여 제품의 IA구조를 파악하고 최적화시킨다. 이를 통해 캐논 Powershot을 Redesign하고, Powershot을 Promotion할 수 있는 GUI/UI를 제안한다. Role: INDIVIDUAL WORK GUI/UI, Interview, 3d Modeling

HANDONG GLOBAL U N I V E R S I T Y

“Menu 구조 최적화를 위해 Information Architecture 수정”

Design Process

IA Analyzation

Intro Page: Redesign된 Powershot의 360도 회전 장면 묘사

Main Features: 주요 디자인된 부분에 대한 새로운 기능 설명

IA Restructuring

Product Redesign

User Interface Design

Old & New: 기존의 제품과 Redesign된 제품 비교

Scene: 상황 별 가상 사용장면을 보여주어 사용자에게 사용의 실제감 제공

Realization

Redesign된 Cannon Powershot과 재구성된 Information Architecture로 Promotion User Interface 디자인

2010 Seoul International Design Competition : Water-Saving Faucet (FINALIST) Explanation: 지구 온난화가 화두가 되고 있는 오늘날, 물을 아껴쓰는 것은 대단히 중요하다. 이를 집에서 의지를 갖고 실천하지 않아도 자동적으로 설정된 만큼의 양을 물을 쓰도록 하는 수도꼭지를 디자인하였다. Role: INDIVIDUAL WORK. Ideation, 3d Modeling 2010 SEOUL DESIGN FAIR

WATER-SAVING Faucet

Graphic Design :The North face (FINALIST) Explanation: 아웃도어의 Active한 모션을 그래픽으로 표현해 본 작품이다. 3가지 작품 모두 등산을 주제로 하고 있다. Role: INDIVIDUAL WORK

NEVER STOP EXPLORING

Poster :독서 캠페인 Explanation: 독서 활성화를 위한 포스터 프로젝트 . 기와를 모티브로 삼았다. Role: INDIVIDUAL WORK CDAK :Communication Design Association of Korea

Challenge & Field UX/UI 디자인 제품/시각 디자인 마케팅/전략기획

About PARK

Challenge & Experience 아이리버 UI 디자인 팀 인턴 2년 간의 군 생활(의정부 카투사) 예비 대학 새내기를 위한 스키캠프 기획 고등학생을 위한 한동 리더십 캠프 기획 총무 자원봉사(독거노인 수발, 저임금 자녀 무상 과외) 아이리버 E-book 디자인 제안 산학 프로젝트

Challenge & Competition 2005년, The North Face 그래픽 디자인 공모전 입선 2006년, 커뮤니케이션 디자인 공모전 특선 2009년, 충북 아이디어 챌린지 정책 공모전 우수상 2010년, 서울국제 디자인 공모전 제품 부문 특선 Specialty 행정병 출신으로 각종 컴퓨터 관련 업무 능통 농구, 축구, 족구, 야구, 탁구, 그리고 요리

“목표를 세우고, 언제까지나 도전할 열정을 가진 젊은 스물 일곱 청년 박의준 입니다.”

Park Ui Jun UX Designer graduated HGU 11 Seoul, Korea

CHALLENGE CONTINUES Park’s Portfolio, 2010 82) 10-9272-8302 cacao85@naver.com