서동민 portfolio ver1

44
Hexagon Bridge S E O DONG M I N Portfolio 무모한 리얼리스트

Upload: dong-min-seo

Post on 12-Dec-2014

1.015 views

Category:

Documents


4 download

DESCRIPTION

(서동민)Daniel Seo's UX Portfolio

TRANSCRIPT

Page 1: 서동민 Portfolio   ver1

Hexagon Bridge

S E OD O N GM I N

Portfolio

무모한 리얼리스트

Page 2: 서동민 Portfolio   ver1

Hexagon Bridge

● 플리마켓 활성화를 위한 디자인 제안 : 개인 프로젝트

● 입체적인 음악듣기 MUSIC BEAN : 개인 프로젝트

● 신개념 미디어 向 제품 컨섭 UX 시나리오 개발 : 삼성전자 산학협동연구

● 더존 그룹웨어 NEO BIZBOX 사용성 테스트 : UX1 컨설팅

CONTENTS

Page 3: 서동민 Portfolio   ver1

서초구

SEO DONG MIN

도심의 문화 놀이터

FLEAMARKET 활성화를 위한 디자인 제안

SEOULFLEA MARKET

INTRO MARKET MAP COMMUNITY MY FLEAMARKET

Bling PlatoonNight

&Bling PlatoonNight

TheHarvest

마르쉐

홍대프리마켓

Page 4: 서동민 Portfolio   ver1

Hexagon Bridge

커뮤니케이션의

어려움정보 접근의 어려움

이용자 마다 플리마켓에

대한 이미지가 상이함

플리마켓 방문이

최초 목적이 아님

판매자 간의/

판매자 구매자 간의

소통 창구의 부재

판매자의 특성으로

정보가 적고

분산되어 있음

플리마켓에 대한 느낌이

전통의, 만물상, 독특한,

아트적인, 신선한 등

대립되는 이미지로 나타남

이용자는 다양한

목적으로 지역을 방문

했다가 플리마켓을

거치는 행태를 보임

UsereXperiencedesigner

SeoulFlea market

2013.11-12

Project Goal

Situation

Key problem Fleamarket의 특징

서울 플리마켓은 MAP DESIGN을 목표로 시작되었습니다. 주제를 선정하는 가운데 플리마켓의 성장 가능성을 발견하였고, 활성화를 돕는 디자인을 목적으로 정했습니다.

플리마켓은 자유로운 전통의 시장의 특성을 그대로 간직하고 있습니다. 하지만 모임의 연령층에 따라 그 성격이나 이미지가 상이하고, 판매자는 고정된 장소에서 지속해서 판매하지 않으며, 판매자 중에는 돈을 번다는 목적보다 취미로 활동하기도 하였습니다. 이러한 특성으로 홍보는 포기 상태이며, 구매자는 정보 접근의 어려움으로 불편함을느끼고 있습니다.

프로젝트 요구사항

서비스 디자인으로 접근한 MAP

Design

프로젝트 주제

플리마켓(벼룩시장)의 활성화를 위한

디자인 제안

인터넷의 활성화로 판매자와 구매자의 경계가 무너짐

3D 프린터기의 등장으로 개별 상거래 증가할 것으로 기대됨

포스트디지털세대 등장(아날로그 감성 회귀)

놀이 부족/ 재능을 살릴 수 있는 기회가 적음

디지털 시대에서 아날로그를 찾다

Page 5: 서동민 Portfolio   ver1

UsereXperienceDesign Process

아날로그 감성의 개별 상거래' 플리마켓'

주제선정

개인화 된 상품으로 개별 상거래가 증가할 것이라고 기대 됨

-포스트디지털세대 등장-판매자와 구매자의 경계 모호,-3D 프린터기의 등장

환경분석

1. 국내 플리마켓의 수/유형/장소/ 특징 파악

2. 플리마켓의 이용자의 유형 파악 을 통해 예상되는 문제점 파악

플리마켓과이용자 컨텍스트 파악

1.플리마켓을 찾는 동기2.플리마켓 이용 상황3.플리마켓 정보 접근방법

리서치 목표 수립

1.설문조사 (11문항으로 구성)2.인터뷰3.관찰노트 town watching safari shadowing

리서치 방법 수립

선행된 설문을 바탕으로 인터뷰 질의를 설계하였기 때문에 두 방법의 접점을 찾아 정리관찰노트는 상이한 플리마켓의 유형과특색을 찾아 정리

핵심 이슈나 독특한 행태를압박하는 Factor 같이 정리

각 리서치 별 내용정리

Key Finding

사용자 유형별 4명 인터뷰 총 5곳의 플리마켓 방문

리서치 수행

행위 목적을 기준으로 그룹핑상위 레벨을 세부적으로 쪼개어 가며 논리적인 흐름에 맞춰 kj-map을 구성

유저 태스크 분석Affinity diagram

1.판매경험이 있는 이용자2.다양한 플리마켓을 이용하는 이용자3.특정 플리마켓 애용자4.디자인 소품 애용자

플리마켓 이용자 행태 분류

#1 홍대 플리마켓 #2 혜화 마르쉐

#1 동묘앞 #2 삼청동 아트마켓 #3 FASHION X ART FLEA MARKET

Key word

Legend

Task

Idea

UserOpinion

Issue

# Affinity Diagram

플리마켓의 활성 정도는 여러 유흥 문화가 있는 번화가와 관계가 짙음

플리마켓의 가치는 볼 거리, 제품의 특별함(희소적 가치, 아트), 질 대비 가격

구매자의 만족도는 플리마켓의 특성과 판매자(작가)에게 영향을 많이 받음

판매자의 특성으로 홍보가 미흡. 때문에 정보의 접근성이 낮음

인터뷰어 마다 플리마켓에 갖는 이미지가 상이함

인터뷰 Key Findings

기타 5%

다양한 콘텐츠를 접할 수 있어서 9%

저렴하게 물건을 살 수 있어서

30%

기분전환 삼아 가볍게 구경하기 좋아서

33%

독특한 물건을 찾을 수 있어서

23%

1. 플리마켓을 이용하는 이유 4. 벼룩시장의 정보를 쉽게 알 수 있었던 / 없었던 이유는 ?

기타 8%

정보가 잘 정리 되어 있다 8%

정보가 많다 12%

정보가 분산 되어 있다 36%

정보가 많지 않다 36%

0 5 10 15 20 25 30

설문조사 대상 및 기간59명 응답 / 2013.11.01 - 2013.11.07

Discover Understand Define

Page 6: 서동민 Portfolio   ver1

인터뷰어들의 특징과 니즈, 페인포인트를 추출하여 퍼소나를 제작

퍼소나 모델링핵심적인 페인포인트와 이용자 행태를 선정하여, 세 가지 전략을 도출

전략1 인식각인. 조직화 되어 구분되는 플리마켓

전략2 행동유도. 콘텐츠 사이의 플리마켓 (연결-맵/ 웹)

전략3 채널구축. 정보의 교차로 플리마켓(Hub Site)

전략 도출

디자인 제안

추출한 컨텍스트와 인사이트를 조합하여 6가지 유저 시나리오 소스를 도출

1. 지역 콘텐츠 매체와 파트너십을통한 홍보2. 코스와 플리마켓3. 플리마켓 정보 제공4. 매니아 형성...

시나리오 설계

각 인사이트를 표현할 수 있는 그래픽 표현 및 구성을 여러타입으로 진행

전략의 맞추어 브랜딩 싸이트페이퍼 타입의 패키치를디자인하여 제안

그래픽 디자인

인사이트의 1레벨을 ‘Visual’ 과‘System’으로 구분하고, 그 하위레벨을Paper 과 Web 으로 나누어 세분화

Level 1 InsightSystem1. 플리마켓 웹 사이트들을 모아 놓은 허브 (+게이트 역할) 사이트 구축2. 사용자 접근성을 높이도록 페이스북과 연동3. 판매자와 연결할 수 있는 수단을 만들어 팬 등록, AS등 구매 이후의 과정 설계...

Level 2 InsightWeb1. 관련 정보 사이트와 연계하여 홍보 (인디밴드 사이트의 배너 홍보)2. 커뮤니티를 제공하여 A/S나 작가 - 소비자 간의 소통이 가능하도록 +판매자 - 판매자 / 노하우 공유 및 정보 공유 +판매자 - 구매자 / A/S, 팬 시스템

3. 작가의 경력/포트폴리오 등을 표시 할 수 있는 사인 시스템...

인사이트 도출

Favorite &Hobbies

집안 꾸미기 / 쇼핑 / 맛집 찾아 다니기 / 공연 보기 / 걷기

Needs

시간을 알차게 보내고 싶다 / 데이트를 할 때 신선한 경험을 하고 싶다 /남들과 다른 특별한 잇 아이템을 가지고 싶다 / 좋은 물건을 싸게 사고 싶다 /적은 비용으로 한번에, 다양하게 즐기고 싶다 / 희소가치가 있는 악세서리를 가지고 싶다

Problems

한 가지 물건을 구매하기 위해 방문하기는 꺼려진다 / 언제 어디서 열리는지 알기 힘들다 /동일한 판매자를 만나기 힘들다 / A/S가 어렵다 / 날씨가 좋지 않을 때 가기가 망설여 진다 /시간이 한정적이다 / 어디로 가야 하는지 모르겠다

Expectations

서울의 플리마켓 현황을 한눈에 알 수 있다 / 주변 컨텐츠를 함께 소개 받아, 알차게 계획을 세울 수 있다 /데이트 코스(대표적)를 짜는 시간을 줄일 수 있다 / 판매자와 원활한 소통이 온라인에서 이루어 질 수 있다 /언제 어디서 열리는지 알기 쉬워 졌다 / 플리마켓의 판매 품목을 한눈에 알 수 있다 /플리마켓의 규모를 미리 확인 하고, 머무르는 시간을 예상할 수 있다

대학생용돈 30만원

연애중외향적

여가인 / 여 / 23

Context

Legend

Paper

Web

구매자

판매자

1 2 3 4 5 6

# Affinity Diagram

SEOULFLEA MARKET

언플러그드 플리마켓

홍대 free market

보따리스 플리마켓 페스티벌

마켓 밤삼킨별

늘장홍대 플리마켓

종로구선택 위치마켓 위치

INTRO MARKET MAP COMMUNITY

서초구 강남구 마포구 광진구 중구 용산구 성북구

용산구

종로구 성북구

중구

동대문구

광진구

강남구

마포구

서초구

서초

SEOULFLEA MARKET

INTRO MARKET MAP COMMUNITY

ⓒ Rights is reserved by SFM

서울 플리마켓은 시민의 문화 놀이터를 4가지 목적으로 지원합니다.

1. 도심의 건전한 놀이 문화를 형성합니다.

시민이 더 많은 취미 활동을 할 수 있도록 활력을 주고, 독특한 개성과

문화를 존중하는 태도를 확립하는 것입니다.

2. 놀이 문화를 통해 감춰진 재능을 표현하는 기회를 더 많이 부여합니다.

수공예품, 공연, 전시, 먹거리 등의 성격을 가진 장터를 지원함으로써

재능을 가진 많은 시민들이 자신의 능력을 표현할 수 있는 기회가 많아

지기를 기대합니다.

3. 2차 3차적으로 새로운 시장이 파생할 수 있도록 지원합니다.

기존 공산품과 다른 특징 있는 수공예품이 활기를 얻어 재능 있는 시민,

소상인이 개인의 사업영역으로 확장할 수 있도록 지원합니다.

4. 세대간의 문화를 공유합니다.

여러 세대가 어울릴 수 있는 놀이 문화의 장이 되기를 기대합니다.

HUB게이트 + 콘텐츠

Link site지역관련 콘텐츠

SNSContents플리마켓 콘탠츠 관리

SNSFanpage작가 팬페이지

Design

추상화

구체화

Develop Deliever

Page 7: 서동민 Portfolio   ver1

인디밴드/공연

맛집/ 명소

Hexagon Bridge

이용자 마다 플리마켓에

대한 이미지가 상이함

플리마켓 방문이

최초 목적이 아님

플리마켓에 대한 느낌이

전통의, 만물상, 독특한,

아트적인, 신선한 등

대립되는 이미지로 나타남

이용자는 다양한

목적으로 지역을 방문

했다가 플리마켓을

거치는 행태를 보임

UsereXperiencedesigner

SeoulFlea market

2013.11-12

Stratege

Fleamarket의 특징

Fleamarket의 특징

플리마켓이란 용어의 뜻을 명확히 알지 못하며, 기존 플리마켓과(전통 벼룩시장)과 현재 새롭게 나타나고 있는 유형이 정리되지 않아 리서치의 응한 이용자들 또한 가벼운 혼란을 일으켰습니다.

이용자의 플리마켓 방문 동기는 다양한 목적으로 지역을 방문했다가 플리마켓을 들려 즐기는 행태를 보였습니다.또한 플리마켓 아이템에 대한 정보를 인디밴드 홈페이지나 지역관련 정보에서 얻기도 하였습니다.

조직화 되어

구분되는 플리마켓

1.인식각인.

기존 유형의 플리마켓

(전통 벼룩시장)

= 중고품 및 만물상

= 나이든 = 젊은

= 예술 + 독특한 먹거리

새롭게 나타난 유형의

플리마켓

(구/신 유형 구분)

지역의

유명 콘텐츠와

콘텐츠 사이의

플리마켓

2.행동유도

(권유/ 홍보)

플리마켓

Page 8: 서동민 Portfolio   ver1

정보의

교차로 플리마켓

3.채널구축

(온라인 채널)

커뮤니케이션의

어려움

정보 접근의 어려움

Key problem

SEOULFLEA MARKET

INTRO MARKET MAP COMMUNITY

ⓒ Rights is reserved by SFM

서울 플리마켓은 시민의 문화 놀이터를 4가지 목적으로 지원합니다.

1. 도심의 건전한 놀이 문화를 형성합니다.

시민이 더 많은 취미 활동을 할 수 있도록 활력을 주고, 독특한 개성과

문화를 존중하는 태도를 확립하는 것입니다.

2. 놀이 문화를 통해 감춰진 재능을 표현하는 기회를 더 많이 부여합니다.

수공예품, 공연, 전시, 먹거리 등의 성격을 가진 장터를 지원함으로써

재능을 가진 많은 시민들이 자신의 능력을 표현할 수 있는 기회가 많아

지기를 기대합니다.

3. 2차 3차적으로 새로운 시장이 파생할 수 있도록 지원합니다.

기존 공산품과 다른 특징 있는 수공예품이 활기를 얻어 재능 있는 시민,

소상인이 개인의 사업영역으로 확장할 수 있도록 지원합니다.

4. 세대간의 문화를 공유합니다.

여러 세대가 어울릴 수 있는 놀이 문화의 장이 되기를 기대합니다.

HUB게이트 + 콘텐츠

Link site지역관련 콘텐츠

SNSContents플리마켓 콘탠츠 관리

SNSFanpage작가 팬페이지

Hexagon Bridge

UsereXperiencedesigner

SeoulFlea market

2013.11-12

Stratege

Design: Branding

정보 접근이 쉽도록 플리마켓의 SNS나 홈페이지, 외부 사이트(지역관련 콘텐츠) 등을 엮고, 개별 구성원이 연결될 수

있도록 판매자 (작가) 개인 SNS나 홈페이지를 연결합니다. [허브형(게이트+ 콘텐츠) 사이트]

인식각인 단계. 새로운 플리마켓 유형을 담을 수 있는 그릇을 만들기 위해 두 가지 과정을 진행하였습니다.

1. 하위 브랜드 선정 및 특징 추출2. 비전 수립 및 상위 브랜드 구축

Process

01약 30개(서울) 중18개 후보 선정.

022차 분류. 특징이 뚜렷한 6개 선정

03최초 목적을 기준으로VISION 수립.

04하위 BRAND 특징 정리.상위 BRAND ROLE 수립.

Page 9: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

SeoulFlea market

2013.11-12

Design: Branding

브랜드 롤(BRAD ROLE)

생기가 있고, 모험적이며,현실보다는 이상을 쫓는 도전자

옛 것의 감성과 현대 감성을조화롭게 살리는 예술가

다른 이의 창의적인 감성을이해해 주는 자

(예술/ 건전한 놀이/ 참여/ 소통)

SEOULFLEA MARKET

MODERN VINTAGE = YOUNG + ART + UNIQUE 컨셉으로 디자인 하였습니다.

Bling PlatoonNight

&Bling PlatoonNight

TheHarvest 마르쉐

홍대프리마켓

블링 플래툰 나이트

“Club Night”

이태원 계단장

“The Stairs”

홍대 프리마켓

“Freely”

더 하베스트 “Tranditional Restaurant”

SAM 아트 마켓“Artists”

마르쉐@ 혜화“Organic”

BRAND LEADER SHIP BRAND PERSONALITY

BRAND ESSENCE

VISION

상위브랜드 하위브랜드

긍정적으로 사기를 북 돋워 주는지지자를 목표

1. 도심의 건전한 놀이문화 형성 Supportive leader ship YOUNG

ARTISTIC

UNIQUE도심의 문화 놀이터

2. 재능 표현 기회 부여

3. 새로운 시장 파생

4. 세대간의 문화 공유

에센스의 전개참여자: 서로의 개성을 존중하는 문화 형성, 판매자로서의 노하우 공유를 통한 발전. 조직: 최소의 조직으로 역할하며, 참가자의 성향에 따라 바뀔 수 있는 유기적인 자세 배양경쟁: 디자인의 도용을 방지하며 참가자들을 지킬 수 있는 울타리 구축

Page 10: 서동민 Portfolio   ver1

플리마켓과 콘텐츠 연결(앞 / 뒤 페이지) 플리마켓 소개(뒤 페이지)

Hexagon Bridge

UsereXperiencedesigner

SeoulFlea market

2013.11-12

Design: Paper Map

행동유도 단계. 지역의 유명 콘텐츠와 연결하여 테마있는 여행 코스로 제안하고, 상세정보를 제공합니다. 앞쪽에는 켈린더를 넣어 플리마켓이 열리는 날을 알 수 있으며, 뒷쪽에는 서울에 있는 플리마켓을 소개합니다.

판매품목 표시

플리마켓 특징 설명

플리마켓 사진

마켓명 및 시작 년도

테마있는 코스 소개

플리마켓 범례

날짜 및 세부 장소

웹페이지 주소

달/ 요일

첫 째주

두 째주셋 째주

넷 째주

매주

상설

Page 11: 서동민 Portfolio   ver1

A2 size.

Page 12: 서동민 Portfolio   ver1

A2 size.

Page 13: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

SeoulFlea market

2013.11-12

Design: Paper CardFleamarket의 특징

선정된 6개의 플리마켓은 그 Identity가 잘 보이도록 카드형식으로 따로 디자인 하였습니다.각 플리마켓은 지하철을 기준으로 위치정보를 구성하였으며, 주로 판매되는 아이템을 Icon화하여 쉽게 파악할 수 있도록 디자인 하여습니다.

Page 14: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

SeoulFlea market

2013.11-12

Page 15: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

SeoulFlea market

2013.11-12

Design: Web page

Flow chart

채널 구축 단계.

Main1Community

[1 depth]메인화면

[2 depth]메인화면

[2.5 depth]메인화면

[3 depth]메인화면

[3.5 depth]메인화면

Start Page

※메인으로 돌아가는 네비게이션이 항상 상단에 위치함

Depth Navigation

Main2Market Map

Main3My F.M

Intro

ContentF.M inforContent

Navi2

Navi3

ContentOverview

Detail

Link

Click on menu

Scroll

SNS FleaMarket

SNSSeller

Contenthistory

탐색과정에서 플리마켓에 대한 관심 촉진과 판매자와의 연결을 중점으로 플로우차트를 구성하였습니다.

1. 플리마켓의 지리적 정보와 열리는 날짜, 취급 물품을 쉽게 볼 수 있도록 구성2. 각각 플리마켓 홈페이지나 SNS/ 작가의 SNS나 온라인 샵으로 쉽게 이동할 수 있도록 구성 (아이템과 작가의 SNS를 직접적으로 연결하여, 꾸준히 관심을 갖을 수 있도록 함)

Page 16: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

SeoulFlea market

2013.11-12

Design: Web page

지리 요소를 통해서 플리마켓의 위치를 직관적으로 파악할 수 있도록 구성하였습니다.

이미지 탐색으로 플리마켓에대한 흥미를 촉진할 수 있도록 구성하였습니다.

Page 17: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

SeoulFlea market

2013.11-12

Design: Web page

커뮤니티를 통해서

1.플리마켓에 대한 전반적인 뉴스 파악 2. 판매자간의 노하우를 공유 3. 작품/ 작가 소개를 통한 홍보를 할 수 있도록하였으며, 아이템과 작가를 연결하여 팬문화를 형성하도록 유도하였습니다.

이미지 탐색에서 흥미(몰입)를 지속할 수 있도록, 화면에서 최대한 벗어나지 않도록 디자인 하였습니다.

(디테일한 정보 창 POP-UP/ 숨김 기능)

TOP

12. 07 Saturday

INFO

Page 18: 서동민 Portfolio   ver1

입체적인 음악듣기 MUSIC BEAN

SEO DONG MIN

음악 SNS 어플리케이션 앱 개발 및 디자인

Page 19: 서동민 Portfolio   ver1

Hexagon Bridge

스마트기기의 이용이

단순 검색에서

상황해결로 목적이 바뀜

(관심기반 SNS 급성장)

현 음악 스트리밍

서비스는 사용자의

음악감성을 충족

시키지 못함

UsereXperiencedesigner

MusicBean

2013.03-06

Project Goal

Situation

뮤직빈은 두 가지 목적을 가집니다1. 기존 음악 어플리케이션보다 깊숙히 사용자와 대면하여 음악과 삶을 연결하는 서비스 개발이 목적입니다.2. 다중 감성에 대한 이해를 위한 실험적인 프로젝트 입니다.

멜론 프로젝트를 통해 음악 서비스에서 비즈니스의 딱딱한 느낌을 많이 받는 다는 것을 알 수 있었습니다.그 이유는 현 음악 스트리밍 서비스는 음악을 듣는 기능적 행위에만 집중을하여 음악 서비스가 주어야 하는감성적인 느낌을 전달하고 있지 못합니다. (Hierarchy of Needs의 즐거움/ 의미있는 레벨로 올라가지 못함)

User Research결과 및 Key findings(리서치 문서)

Persona &Scenario(시나리오 문서)

IA & UI 구성과InteractionPrototype

+

Page 20: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

MusicBean

2013.03-06

Service Concept

SNS

공유 및 관계망 구축 기능 ++SNS의 기능 중 음악에 관련된 페이지

만들기, 피드, 공유, 댓글, 추천 등의

기능을 사용 할 수 있는 탭 제공

음악플레이어의 기본 기능인 곡

재생 및 재생목록 설정 등의

인터페이스 제공

사용자가 음악과 어울리는 추천

할 만한 것에 대해 태그 가능함.

인물, 미디어, 검색 등의 서비스 제공

태그

사용자의 상태 태그 기능

음악플레이어

음악플레이어 기본적 기능

음악을 더 이상 귀로만 듣지 않는다

시의 한 구절을 음악과 함께 들으면,

음악에 감성과 기억이 입혀져 새로운(입체적인) 음악듣기가 시작됩니다.

Real voice

“ 그 음악을 들으면서 걷던 중에

예전에 같은 장소의 추억이 새록새록 떠오르면서

여행을 한 기분이 들어요"

Page 21: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

MusicBean

2013.03-06

Benefit

1) 음악에 대한

표현의 기회가

확대된다.

사용자 측면 음악을 들으며 떠올랐던 추억이나 가사에 공감하는 부분, 감성을 자극하는 음악 등음악에 대한 내 감정을 자유롭게 표현할 수 있는 새로운 공간이 제공됩니다.

2) 음악에 대한

지식/ 감정 공유

가 활성화 된다.

3) 기대하지 않았던

정보를 얻게 된다.

비즈니스 측면

1) 기존과 다른

의미있는

데이터베이스 축적

2) 문화 상품으로

새로운 사업기회

라이프 스타일을 담은 데이터를 축적함으로써 사용자들의 맥락 파악이 가능하게 됩니다. 축적된 데이터는 공연기획이나 앨범 등의 음악 문화에 사용될 수 있으며, 사용자가 음악 외적인 정보도 함께 공유하는 장으로 발전하여 다양한 사업의 기회로 연결될 수 있습니다.

Page 22: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

MusicBean

2013.03-06

Information Architecture

메뉴트리

MY PAGE FEED PLAY

프로필 프로필 사진

대표 음악

많이 듣는 음악

음악 히스토리

콘서트

소울메이트

정보

FEED

스탬프

설정

LIKE 음악재생

재생바

사진찍기

불러오기

담기

다운로드

동시청취

마이뮤직

공유

댓글

SNS 쉐어

공유

플레이리스트추가

알림

실시간태그

실시간음악

베스트태그

베스트음악

음악 & 태그

프로필

정보

FEED

정보

앨범

FEED스탬프

설 정 숨기기

차단

소울메이트 추천

소울메이트

소울메이트 추가

프로필 사진

대표 음악

많이 듣는 음악

음악 히스토리

콘서트

소울메이트

POST

태그입력

공유설정

친구태깅

포스팅

사진업로드

검 색

SOULMATE 소울메이트PAGE

음악 PAGE

앨범사진

앨범정보

청취자수

베스트태그

담기

태그피플

정보

앨범

컨텐츠 PAGE

베스트태그

태그피플

좋아요

익숙한 SNS의 정보구조를 차용하여 사용을 보다 용이하도록 구성하였으며, 음악 재생과 SNS의 조화를 가장 크게 고려하였습니다.

Page 23: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

MusicBean

2013.03-06

Information Architecture

플로우 차트 사용자들의 맥락이 담긴 FEED를 중심으로 음악의 정보, 음악과 궁합이 좋은 콘텐츠들(태그로 묶인)을 볼 수 있으며, 마음에 드는 음악을 발견한다면 바로 들을 수 있습니다.

MY PAGEFEED

FEED

음악 PAGE

검 색

재 생소울메이트 PAGE

컨텐츠 PAGE

④③

피드에서 음악을 바로 재생한다.피드에서 음악 상세페이지로 이동하여 음악정보를 살펴보고 음악을 재생한다.피드에서 소울메이트/컨텐츠 페이지로 이동한뒤 음악을 재생한다.피드에서 소울메이트/컨텐츠 페이지로 이동한뒤 음악 페이지를 거쳐 재생한다.검색에서 소울메이트/컨텐츠 페이지로 이동한뒤 음악을 재생한다.검색에서 소울메이트/컨텐츠 페이지로 이동한뒤 음악 페이지를 거쳐 재생한다.

⑥⑤④③

Page 24: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

MusicBean

2013.03-06

Wireframe

메인화면 & FEED

상단 바 자신의 현 위치를 알려줌

상단 메뉴 상단에 형성된 아이콘

우측 사이드 바 화면을 크게 이탈하지 않고 다양한 메뉴를 구성함

상단 탭 상단의 있는 탭

리스트 형식 메뉴를 가장 많이 볼 수 있는 구조

하단 탭 핵심적인 네비게이션

1

2

13

4

5

6

1

2

13

1

2

13

4

1

2

13

4

5

6

하단 탭 - Search

태그

실시간음악 실시간태그 베스트음악 베스트태그음악

검색바1

2

3

4

드롭메뉴 음악관련과 태그관련 검색결과를 고를 수 있다.

검색바 검색어를 쓸 수 있는 창

차트탭 음악이나 태그의 실시간 순위를 볼 수 있음

리스트형식 음악이나 태그의 사진과 목록을 볼 수 있다

포스트 - 태그 설정태그 검색 상단 메뉴 태그 검색을 완료하고 저장하거나

이전 메뉴로 돌아감

태그 검색 음악 태그, 친구 태그 등 원하는 태그를 검색할 수 있음

메인 화면 태그 검색 결과가 나타남

미스코리아 이효리

03:5600:00

하단 탭 - 재생플레이어 마이뮤직 개인 음악을 관리하는 페이지

플레이리스트 현재 재생 목록

플레이어 음악을 재생, 정지, 랜덤재생, 반복재생

콘텐츠메뉴 왼쪽부터 차례로 동시청취자, 음악정보 SNS공유, 담기, 다운로드, 볼륨조절

앨범자켓 재생되고 있는 곡이 수록된 앨범자켓 터치 시, 음악에 대한 feed 확인가능

가사보기 터치 시 가사를 볼 수 있는 아이콘

태그 검색바 검색바 검색바

# TAG # TAG

# TAG

# TAG

태그

# TAG

태그

1 2

3

4

Page 25: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

MusicBean

2013.03-06

GUI Design 메뉴트리 가장 깊은 Depth는 5 단계이며, 깊지 않고 넓은 정보구조를 가집니다.

로딩페이지

감성적이고 빈티지한 MINT

Main Sub B.G P

Page 26: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

MusicBean

2013.03-06

GUI Design

마이페이지

대표음악마이앨범

자기의 앨범 목록과 추천앨범, 피드앨범을 볼 수 있는 페이지

프로필의 대표음악 상세 정보와 공개앨범 목록을 볼 수 있는 페이지

스탬프

대표스탬프의 상세정보와 모은 스탬프를 볼 수 있는 페이지

재생

화면을 한번 터치 시,재생 음악에 대한 실시간 FEED 확인 가능

소울메이트 매칭

마이뮤직의 하위메뉴로타 사용자와의 취향 일치율을 알려주는 기능

소울메이트 태그

포스팅하면서 원하는 친구를 태그할 수 있다.

포스팅

검색

Page 27: 서동민 Portfolio   ver1

참여 인원 6명•팀장의 역할을 수행. 프로젝트의 방향성을 고민하고, 팀원들 특성 을 파악 및 고려하여 시간대비 효율을 높이는데 기여. 특히 리서치 파트에서 인터뷰 질의문 설계 및 사용자 동기, 태도 분석에 기여.

프로젝트 특징•타 프로젝트의 경험으로 어느정도의 가설을 가지고 시작하였기 때문에 IDEO의 더블 다이아몬드 방법론과 차이가 있음

프로젝트 한계•리서치 Define 기간이 짧아 핵심 이슈인’콘텐츠 연결’을 깊게 다루지 못함 때문에 IA구성에서 큰 특징을 부여하지 못함

리서치 목적

•사용자들이 음악 스트리밍 서비스에 가지는 가치를 확인

•사용자들이 음악에 갖는 동기와 태도 행동을 파악

리서치 대상•음악 스트리밍 사용자 중 여러 음악 서비스를 사용핚 사람과 단일 서비스를 사용하는 사람으로 구분하여 진행

•음악 코어 사용자 중 음악감상을 깊이 하는 사람과 가볍게 하는 사람으로 구분하여 진행

•온라인 서베이 시 10대, 20대, 30대 연령별 구분하여 진행

리서치 프로세스

01전반적인

컨텍스트 분석

02리서치 시나리오 설계

03리서치 진행

04리서치 결과 분석

사용자 리뷰 분석

트랜드 분석

리서치 이슈 도출

리서치 질의 작성

대상 선정

리서치 방법 선정

2013.4.9~4.19(10일간)

온라인설문 118명, 대면 30명

10대(2) 20 대(4) 30대(4)

관찰노트(타운워칭)

인뎁스 인터뷰

서베이

콘텐츠 수용 위주의 조사

Hexagon Bridge

UsereXperiencedesigner

MusicBean

2013.03-06

전체 프로세스부가정보

01DISCOVERY

02DEFINE

03DEVELOPE

04DELIVERY

과제 주제 선정 배경

유사앱 조사 결과

향후 우리 과제의 방향

Alliance

Benefit

APP 기획 목표

사용자 리서치 결과

페르소나 설정

사용자 시나리오

정보구조 설계

Wireframe 만들기

APP 브랜딩

GUI 디자인

종이 프로토타입 제작

사용성 평가 결과 분석

사용성 평가 Fish Diagram

UI, GUI 가이드라인

Page 28: 서동민 Portfolio   ver1

신개념 미디어向 제품 컨셉

UX 시나리오 개발(산학협동연구)

Acadumic adviserProf. Nam Choon ParkIndustrial design. Seoul Wonmen University

EducateeSeo Dong MinKim Seung KwonLee Hee Joong

Page 29: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

SamsungElectronics

2012.03-06

Project Goal 삼성전자가 근 미래에 상용화할 Flexible display에 대한 UX컨셉 시나리오를 연구하는 프로젝트 입니다.‘플랙시블의 특성이 종이와 비슷하기 때문에 종이 시장을 대체할 수 있지 않을까?’하는 전제를 가지고 프로젝트를 진행였습니다.

User Research결과 및 Key findings(리서치 문서)

A5, A4 sizeNew UX ConceptScenario/Interaction Idea(시나리오 문서)

Big& Small sizeUX ConceptScenario/Interaction Idea

Overview 기존 타블릿PC 개념이 아닌 추후 생산/ 보급될 포스트 미디어를 대체할 수단으로써 Flexible display를 탑제한 신 개념 미디어를 종이/ 사용자/ 환경 관점에서 세로은 Feature를 제안하는 것이 과제의 핵심입니다.

Just like paper More than paper

Easier editing & writing종이에 글을 쓰는 것처럼,동일한 방식으로 펜을 이용하여 쉽게 글을 쓰고 지울 수 있는 것

Digital upload손으로 쓴 내용을 바로 디지털 포맷으로변환하여, 자신 또는 타인의 전자 기기로전송하는 것

Instant update컨텐츠 업데이트/수정이 발생할 경우,재인쇄가 아니라 실시간으로 컨텐츠를갱신해주는 것

Context-aware종이 사용 환경 또는 사용자를 인식하여그에 따른 컨텐츠를 제공하는 것

Flexible사용용도에 따라서 다양한 형태(접기,찢기 등)의 변형이 가능한 것

Slim & Lightweight가볍고 얇아서 휴대가 용이한 것

Page 30: 서동민 Portfolio   ver1

UsereXperiencedesigner

SamsungElectronics

2012.03-06

Hexagon Bridge

Key Insight

Insights Context factor

기존의 종이/ 미디어 사용자는 아주 다양한 기록/수납/가공 형태를 가지고 있었습니다. 프로젝트 중반부에 리서치 결과에서 나온 인사이트는 두가지 기준으로 선정되었습니다.

1. 프로젝트의 목표에 부합하는 결과2. 아이데이션 단계에서 영향을 줄만한 의미있는 결과

환경에 따라 종이 사용 집중도는 달라짐

종이/ 미디어를 사용할 때 사용자의집중도는 이하의 요소에 의해 달라진다

종이의 사이즈/ 사용자가 있는 공간/ 환경의 밝기

(대부분은 스마트폰으로 사진을 찍고 디지털로 변환 후 폐기)

기록을 타인에게 전달하고자 할 때/기록을 직접 상기하고자 할 때/

종이의 색상/ 사이즈/ 모니터/ 베젤/ 벽 재질

자료를 중복 발견할 때/ 자료 인지 범위 한도 초과 시보관 공간의 위치가 모호할 때/ 파티션에 제한받을 때

기록을 하기 전에는 통상 템플릿을 만들어 재사용/기록을 한 이후 가공은 만족감& 제안을 위함

붙이는 종이는 특정 요소(사이즈/ 생상 등)에따라 이용 방법이 달라진다

사용자가 종이/ 파일을 분류하는 데는일정한 기준점이 있다

기록 전/후에 사용자는 본 기록을가공하고 싶은 욕구가 있다

1회용으로 사용되는 종이는 사용자의특정 업무(전달/ 상기 등)와 그 중요도에 따라폐기 시점이 결정된다.

일회용 종이는 폐기시점 패턴이 존재

붙이는 종이는 중요도가 부여됨

분류/ 정리 동기를 유발하는 시점이 존재

기록을 재가공 하고 싶은 욕구 존재

Page 31: 서동민 Portfolio   ver1

UsereXperienceDesign Process

Discover Define

1. 전자종이의 가치를 파악하여 사용자에게 기대 이상의 편리함을 제공한다.

2. 단순한 전자종이를 넘어 사용자에게 소통 그 이상의 가치를 제공한다.

3. 새로운 미디어는 사용자의 컨텍스트에 맞춰진 개인화 도구로발전해야 한다.

프로젝트 배경 조사 및 UX challenge 설정

1.종이 시장을 거시적으로 파악

2.사람들이 현재 종이를 어떻게 사용하는가에 대한 유형을 개인 & 공공 & 사이즈별로 나눔

3.사용자 예상 행동을 모두 나열하고 유형별로 가상의 퍼소나를 만듬

종이 시장과 사용자 컨텍스트 파악

사용자 리서치의 목적을 수립하고 리서치에 사용할 기법을 설정함.사용한 기법은 다음과 같음

1.5 whys2.Cognitive maps3.Guided tour4.Personal Inventory5.Long range forecast

리서치 목적 설정과 진행 기법 준비

사용자 리서치 결과를 1차적으로 정리하기위하여 사용자의 동기/상황/특징/행동을 정리함

또한, 사용자 리서치의 Data Affinity를 아날로그/디지털/아날로그+디지털 행태로 나누어 정리, 해당 사용자가 어떤 미디어를 주로 사용하는지 시각적으로 파악함

EX.실제 종이 사용이 많은 사용자

유저 태스크 분석

사용자 리서치 데이터를 2차적으로 Cross-case 분석하고 인사이트를 도출하기 위해 1차적으로 정리한 데이터를 친화도별로 다시 정리함

Affinity diagram 진행

종이를 사용하는 사용자 유형을 다음과 같은 기준으로 축소

1.실용을 추구하는 사용자2.정리/ 보관에 철저한 사용자3.아날로그 보다 디지털 선호 사용자4.디지털 적극 활용자

종이 이용 행태별 사용자 분류

사용자를 유형별 8명을 대상으로 정성적 리서치를 진행

사용자 리서치 진행

Analog Digital A+D

1차, 2차로 정리한 리서치 데이터를 바탕으로 패턴과 흥미로운 영감을 주는데이터를 별도로 정리

Key findings 도출

Page 32: 서동민 Portfolio   ver1

Develop Deliever

시나리오를 구체화하고 최종 UX컨셉을 제안

최종 UX 컨셉 시나리오 제안

도출한 인사이트를 기준으로 새로운 유저 컨텍스트를 제안하기 위해 아이데이션을 진행. 총 100개 정도의 아이디어를 도출함

아이데이션(스케치) 진행

제작한 퍼소나를 바탕으로 아이데이션 결과를 그룹핑함

아이디어 그룹핑

각 인사이트 요소에 대응하는 Context Factor를 나열하고 제작하고자 하는 퍼소나의 성격을 정의 후 퍼소나 제작

퍼소나 모델링새로운 유저 컨텍스트를 제안하기 위해 컨셉 시나리오를 제작함

1.Attachable paper(붙여쓰는 미디어 페이퍼)2.Temporary-use paper(임시 사용 미디어 페이퍼)3.Modular paper(모듈형 미디어 페이퍼)

컨셉 도출

사용자의 종이 사용 컨텍스트는아래와 같은 요소로부터 변화한다는사실을 도출함

1.종이를 사용할 당시의 집중도는 사이즈/ 공간/ 밝기에 따라 달라진다

2.종이 사용의 중요도의 따라 폐기 시점이 결정됨

3.사용자가 종이를 사용/분류하는 데는 일정한 기준점이 있다(Ex. 중복/인지범위 초과)

4.기록을 별도로 가공하고자 하는 욕구가 있다5.사물 경계에 붙이는 종이는 특정 목적이 있다.

인사이트 도출

Page 33: 서동민 Portfolio   ver1

Concept

Hexagon Bridge

Scenario1.Attachable paper

Key user voice

Development

Insights붙이는 종이는 아래의 요소에 따라 사용 방법이 달라진다

“자주 잊어버린다거나 중요한 것들을 주로 모니터에 붙이고 있어요. 때로는 메시지를 전달할 때도 자주 쓰지요”

-신영욱(초등학교 교사)

“붙이는 종이는 색깔 별로 구분해서용도를 구분해야만 해요. 안 그러면 구분이 잘 안돼요.”

-박채림(대학생)

“지금 당장 중요하거나 잊어버리지 말아야 할 기록은 지갑에라도 붙여서 가지고 가요.”

-임종혁(연구원)

UsereXperiencedesigner

SamsungElectronics

2012.03-06

�C�o�n�t�e�x�t� �f�a�c�t�o�r� � 정보의� 중요도� � 종이의� 색깔�

� 용도에� 따른� 사이즈� 구분� � 베젤의� 형태�

�F�e�a�t�u�r�e� � 업무� 중요도�(상�/중�/하�)�

� 노랑�/파랑�/보라�/…�

� �7�6�X�7�6�m�m… � �

베젤의� 유�/무�,� 시각적요소 �

새로운 방식의 붙여쓰는

미디어 페이퍼

Page 34: 서동민 Portfolio   ver1

1. 모니터 베젤에 붙여 놓은 미디어 페이퍼가 시간이 지나면서 낡아지는 형태를 띄게되면서 정보의 유통기한을 파악할 수 있게 됩니다.

시간이 지나면서 색이 변함

2. 전화가 끝나고 스마트폰을 올려 놓으면 NFC를 통해 메시지 이미지 데이터가 전송되는 시나리오 입니다. 이미지 분석>문자변환>전송프로세스를 통해 메시지를 보냅니다.

3-1. 붙이는 페이퍼 미디어 위에 자신이 쓴 내용이 담긴 스마트폰을 올려높으면 프스트잇 페이퍼에 자신의 메모 데이터가 저장됩니다.

3-2. 포스트잇에 또 다른 미디어 페이퍼를 접촉시키면 자동으로 내용을 복사할 수 있으며, 따로 필기를 하거나 프린트를 할 필요가 없어집니다.

Page 35: 서동민 Portfolio   ver1

Concept

Hexagon Bridge

Scenario2.Temporary paper

Key user voice

Development

Insights종이/미디어를 사용할 때 사용자의 집중도는 이하의 요소에 의해 달라진다

“수업에는 이면지를 항상 활용해요.노트북을 가져가기가 버겁기 때문이죠.”

-신형섭(대학생)

“노트북은 집중하고 싶을 때 오히려 방해가 되요 클릭하고 싶은 정보가 너무 많아서요.”

-박채림(대학생)

“굳이 출력할 필요 없는 서류(i.e. 결제서류) 출력할 때가 있는데, 그럴 때마다 종이가 참 아깝다는 생각을 해요.”

-송대규(회사원)

공공장소에 임시로 사용하는 미디어 페이퍼

UsereXperiencedesigner

SamsungElectronics

2012.03-06

�C�o�n�t�e�x�t� �f�a�c�t�o�r� �F�e�a�t�u�r�e� �

� �

화면의� 사이즈

사용자가 � 있는� 공간�

환경의� 밝기�

기록� 행동의� 유무�

사용하는 � 미디어의 � 자율성�/

주변� 소음의� 정도�

�A�1�,�A�2�,�A�3�,�A�4…�

개인�/공공의� 공간�

밝은�/어두운� 조명�

쓰면서� 상기�/경청�

스마트폰 �/노트북�/수첩�

타이핑� 소리�/기타� 소음�

Page 36: 서동민 Portfolio   ver1

1. 강사가 스마트폰을 이용하여 유인물로 사용할 다량의 임시 미디어 페이퍼에 강의 데이터를 전송합니다. 이렇게 함으로써 일일히 유인물을 복사해야하는 번거로움을 줄여줍니다.

2. 강의실 입구에 배치된 임시 미디어 페이퍼를 학생들이 수업을 위해 받아갑니다.

3. 학생은 임시 미디어 페이퍼에 전용펜으로 필기를 함으로써 강의 내용에 관련된 메모를 할 수있고, 동시에 강의 관련 컨텐츠를 볼 수 있습니다.

4. 강의가 끝나면 메모한 내용을 스마트폰/ 클라우드에 저장함으로써 다음 수업 참여 시 지속적으로 데이터를 활용할 수 있습니다. 다쓴 임시 미디어 페이퍼는 회수합니다.

Page 37: 서동민 Portfolio   ver1

Concept

Hexagon Bridge

Scenario3.Modular paper

Key user voice

Development

Insights사용자가 종이/파일을 분류하는 데는 일정한 기준점이 있다

“책 정리를 할 때 책장에 카테고리를 한 칸 마다 달리 해놓아 차후 고르기편하게 만들었어요.”

-천민우(아트디렉터)

“E-book의 한 단면 형태보다는 책의 형태가 좀 더 책을 읽기 편하고 안정감을 느껴요.”

-이상봉(연구원)

“화장실에서 보는 책, 방에서 보는 책, 밖에서 보는 책이 전부 달라요.”

-신영욱(교사)

모듈 형식의페이퍼 미디어

+개인 페이퍼

미디어

UsereXperiencedesigner

SamsungElectronics

2012.03-06

�C�o�n�t�e�x�t� �f�a�c�t�o�r �F�e�a�t�u�r�e�

자료의� 중복� 발견� 시점

자료의� 인지� 범위� 한도�

보관� 공간의� 위치�

한� 경계의� 공간� 분류�

같은� 파일� 발견� 시�

�4�0�~�5�0개� 이상�

서랍�/책장�/주변� 공간…�

예�)� 파티션�

Page 38: 서동민 Portfolio   ver1

1. 벽면에 책장용 모듈 페이퍼를 설치합니다. 이 벽면용 미디어 페이퍼는 디스플레이/ 책 전송 등 제한된 인터랙션 용도로만 사용이 가능합니다.

2. 사용자는 책과 동일한 형태를 가진 미디어 페이퍼를 가지고 있습니다. 이것을 통해 책장용 미디어 페이퍼와 책 수납/ 다운로드 인터랙션을 수행합니다.

3. 개인용 E-Book 미디어 페이퍼는 사용자가 언제든지 들고 다녀 책처럼 읽고, 책갈피를 사용할 수 있으며, 전용 북스토에 플랫폼을 통해 책을 다운로드/ 저장 할 수 있습니다.

4. 다운로드 한 책/ 책갈피&밑중 정보를 저장한 정보를 책장용 모듈 페이퍼로 다시 전송하여 커스터마이징 된 나의 책이됩니다.

Page 39: 서동민 Portfolio   ver1

USABILITY TEST RPORT

Page 40: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

Project Goal 소규모 기업에서 부터 대기업까지 사용 가능한 확장성 있는 그룹웨어를 목표로 더존 그룹웨어 비즈박스 S2를 개발하였고, UX/UI의 개선을 위한 검증이 필요하였습니다. UX1에서는 두 가지 방법으로 검증을 진행하였는데,저는 사용성 테스트를 진행하였습니다.

Overview ● 사용자 그룹에 따라 사용환경 및 학습성(Learnability) 확인을 위한 사전 인터뷰● 그룹웨어 내 기능별 task 수행을 통한 본격적인 사용성 테스트● 사용 후 발견 된 총체적인 니즈 확인을 위한 정리 인터뷰로 진행

DuzonGroupware

2012.09(10)

UT ReportHeuristicEvaluationReport

일반사용자

조직관리자

더존 그룹웨어 사용

타 그룹웨어 사용

그룹웨어 미사용

더존 그룹웨어 미사용

사용자 구분

2. 사용 익숙도 확인

3. 기존 니즈 확인

1. 그룹웨어 사용도 및 업무 연관성 확인

2. Task 단위별 수행 패턴 테스트

3. Task 성공 여부, 오류 발생 여부

및 빈도, 처리 시간 측정

1. 관리자/일반사용자로 사용자 그룹 구분에 따른 수행 범위 지정

1. 사용 소감을 통한 전반적인 니즈 확인

2. 난해한 Task 확인

사전 인터뷰

수행절차

사용성 테스트 정리 인터뷰

Page 41: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

TaskAnalysis

Task 데이터 분석을 다음과 같은 순서로 분석하였습니다.

1. 소요시간차, 수행성공률, 에러율 전체 데이터를 비교하여 수행 성공률이 낮고 오류발생률이 높으며 수행 시간이 오래 걸리는 항목을 점검이 필요한 TASK로 선정

2. 선정된 Task를 기준으로 수행 성공률, 에러발생율 소요시간을 복합적으로 평가하여 개선 시급 우선순위를 선정

3. 오류 발생 빈도가 높아 선정된 Task를 UI / IA / 레이블링 / 인터렉션 총 4개 부문으로 구분하여 집중분석

DuzonGroupware

2012.09(10)

심각도가 높은 Task인터렉션

레이블링

IA

UI

0

2

4

6

8

10

12

14

결재올리기

근태관리

주간업무보고

부서일정

마이메뉴 만

들기

차량운행일지

증명서요청/출

회사비품

웹펙스보내기

큰테환황조회

휴가신청조회

공유일 생

성관리

주간업무환인

승인후확인

게시판

증명서관리

파일추가 및

삭제

SMS전

송관리

Page 42: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

Summary 중복될 수 있는 정보구조 형태와 기대와 다른 작업절차가 가장 큰 문제점으로 나타났습니다. 버튼의 위치 등의 통일성이 부족하고 자주 사용하는 기능이 잘 보이지 않거나 인식하기 어려운 GUI를 가졌습니다. 그밖에 이해하기 쉬운 용어 선택 및 올바른 행동을 유도할 수 있는 가이드 제시 순으로 개선이 요구됩니다.

UT Rport 그룹웨어 특성상 복잡한 정보구조를 가지고 있으며, 회사마다 일하는 절차나 방식이 다르기 때문에 그 기준점을 잡기가 어려웠습니다. 그렇기 때문에 대기업과 중소기업의 일반적인 절차를 염두해 두고 진행하였습니다.

DuzonGroupware

2012.09(10)1. IA (정보 구조 설계)

문제 45%

2. UI (사용자 인터페이스) 문제 27%

3. 레이블링 및 인터렉션 문제 16%/12%

● 사용자가 적절하다고 생각하는 절차와 제공하는 작업절차가 달라 실수가 잦았다.

1. 시스템 정보구조와 사용자의 기대 사이에서 오는 문제

● 하나의 카테고리에서 작성이나 요청등 관련 Task를 진행하려 하기 때문에 찾지 못하였다.

● 카테고리가 모호하여 학습이 어려워졌다.

2. 사용자 기대보다 세분화, 중복 되어있는 정보구조

● 사용자가 생각했던 작업 수행 절차보다 많은 절차를 제공하기 때문에 혼란이 가중된다.

3. 복잡한 작업 수행 절차

IA(정보구조 설계)

IA 45%

UI 27%

INTERRACTION

12%LABELING

16%

66%시스템 정보구조와 사용자의 기대사이에서 오는 문제

6%

28%사용자 기대보다 세분화, 중복 되어있는 정보구조

복잡한 작업 수행 절차

Page 43: 서동민 Portfolio   ver1

Hexagon Bridge

UsereXperiencedesigner

UT Rport 예상되는 어려움은 두 가지 였습니다. 절차가 상당히 세분화 되어있기 때문에 UI의 통일성이 더욱 중요하였고, 시선을 정리하되 의미를 잘 구분해서 UI를 배치하는 것입니다. 예상대로 사용자들은 혼란 속에서 UT를 진행해습니다.

UT Rport 레이블링을 굳이 따로 분석한 이유는 IA에 포함시키기에는 많은 데이터가 나왔기 때문입니다.허나 독립 카테고리로 배치하기에는 그 크기가 작아 인터렉션과 같이 묶어 결과를 보고 하였습니다.

DuzonGroupware

2012.09(10)

25%

● IA가 크게 개인/팀으로 구분되어 내부에 비슷한 이름의 Task들이 즐비하여, 혼란을 가져온다.

● 사용자가 실수하지 않도록 절차에 대한 가이드가 충분치 않다

1. 유사한 이름

2. 다른 이름이지만 기능이 같은 버튼이 있다.

3. 작업 가이드 제시 부족

● 작업을 완료 했지만 피드백이 부족하여 인지하기 어렵다.

4. 피드백 부족

레이블링 및 인터렉션

30%

31%20%

20%

● 근래 서비스에서는 생략된 절차가 많아 실수가 잦다

1. 트랜드에 맞지 않은 올드패션

● 자주 사용하는 기능의 버튼이 작거나 icon이 의미를 명확히 전달하지 못한다

3. GUI의 의미전달 부족

● 작업마다 버튼의 위치가 달라 혼란스럽게 한다

● 상단에 단축메뉴가 나오는 곳과 나오지 않는 곳이 있어 혼란스럽게 한다

2. UI통일성 결여

● 전혀 다른 기능의 버튼이 모여있어 잘못된 행동을 계속 유도한다

4 버튼 배치의 부적절

UI (사용자 인터페이스)

30%

트랜드에 맞지 않은 올드패션

15%

30%UI통일성 결여

버튼 배치의 부적절

GUI의 의미전달 부족

다른 이름 같은 기능

작업 가이드 제시 부족

피드백 부족

유사한 이름

Page 44: 서동민 Portfolio   ver1