App design기획서 mmca jihyeonkim

MMCA 국립현대미술관서울관 전용Mobile App Design

UX/UI Design SchoolJihyeon, Kim 2017. 02. 17

Process

Discover

환경분석UX Challenge

타겟 설정인터뷰퍼소나여정맵

UX 전략IA

UI 전략

디자인컨셉기능별 UI프로토타이핑유저 시나리오

DevelopDefine Deliver

1. Double Diamond

UX Research1. Environment analysis

전시내용이 새롭고 흥미를 느낄 때 신뢰도가 높음홈페이지나 전시정보의 접근을 용이하게 할 때 신뢰도가 높음휴게공간의 시설을 편리하게 이용하게 할 때 신뢰도가 높음

미술관의 신뢰도를 높이는 환경

— 총 8관의 전시실 + 서울박스, MMCA필름앤 비디오, 아트팹랩, MMCA미디어 아트월 등 다양한 전시를 한 곳에 모아둠 (한 번에 많은 전시 제공)

— 홈페이지로 전시 정보들을 제공. 전시별로 다른 / 또한 고정된 다양한 휴식공간 제공. 다양한 문화체험, 교육을 제공

국립현대미술관 서울관

주로 전시 정보를 얻는 곳

39%

SNS 미술정보웹사이트

미술정보전문 앱

이메일&뉴스레터

미술전문잡지

29%

16%

9% 7%

국립현대미술관은 정보를 주입하는 페이스북 좋아요 페이지 1위를 달성. 하지만 관객 참여형인 인스타그램은 대림미술관을 이은 2위에 그침

관객 7명 쉐도잉했을 때, 모두 사진촬영을 이유로 멈추거나 전시를 오래 본 경험 많음

페이스북 페이지 좋아요 수 1위.

쉐도잉 조사 결과 관객의 사진촬영 횟수 많음


전시내용이 새롭고 흥미를 느낄 때 신뢰도가 높음

홈페이지나 전시정보의 접근을 용이하게 할 때 신뢰도가 높음

휴게공간의 시설을 편리하게 이용하게 할 때 신뢰도가 높음


총 8관의 전시실 + 서울박스, MMCA필름앤 비디오,

아트팹랩, MMCA미디어 아트월 등 다양한 전시를 한 곳에

모아둠 (한 번에 많은 전시 제공)

홈페이지로 전시 정보들을 제공. 전시별로 다른 / 또한 고정

된 다양한 휴식공간 제공. 다양한 문화체험, 교육을 제공


주로 전시 정보를 얻는 곳은?

39%




미술전문잡지

29%

16%

9% 7%

국립현대미술관은 페이스북 좋아요 페이지 1위를 달성.

하지만 정보를 주입하는 페이스북 좋아요 페이지는 1위

이지만, 인스타그램은 대림미술관을 이은 2위에 그침.

관객 7명 쉐도잉했을 때, 모두 사진촬영 때문에 멈추거나,

전시를 오래 본 경험 많다.



많은 컨텐츠 대비 정보 전달력이 떨어짐

Insight 2

MMCA 서울관은 다양한 전시와 문화체험을 주최하고

많은 휴식공간을 제공하고 있으나,

홈페이지에서 원하는 정보를 정확히 얻기 힘듦

인지도, 사진촬영 대비 관객 참여 부족

Insight 4

MMCA 서울관의 인지도와 촬영 빈도에 비해

관객 참여(인스타그램, 태그)의 유도는 부족하다.

선 SNS — 후 홈페이지 정보 검색

Insight 3

사용자들은 전시 관람 전&중에 전시관련 어플을 사용하는데,

전시 정보의 대부분을 SNS에서 얻고,

정확한 정보는 홈페이지/어플을 통해 얻는다.

Insight 1

미술관의 신뢰도를 높이기 위해서는

홈페이지에서 전시 정보의 접근을 용이하게 하고,

휴게공간 등의 시설을 편리하게 이용할 수 있어야 한다.

전시 정보 접근 용이 & 휴게시설 안내













39%




미술전문잡지

29%

16%

9% 7%



















Insight 1





Insight 2

Insight 3 Insight 4













39%




미술전문잡지

29%

16%

9% 7%



















Insight 1





Insight 2

Insight 3 Insight 4













39%




미술전문잡지

29%

16%

9% 7%



















Insight 1





Insight 2

Insight 3 Insight 4

UX Research2. UX Challenge

미술관을 가기 전과 후에,모바일 앱을 통해원하는 정보를 제공 받고, 그를 바탕으로마음에 드는 사진을 공유하여 만족도 높은미술관의 경험을 제공한다.

Touch point

전시 관람 전전시 관람 중

Channel

모바일어플리케이션

Experience

원하는 정보 제공SNS 공유

Target1. User Research

20대 대학생&직장인 여성

20대, 문화예술에 관심 가장 높다

20대 ‘문화 열광족’은 문화예술 관심도(93점)와 문화예술 중요

도(77.1점)는 가장 높다. 전시회는 두 달에 한 번 꼴로 참여하며,

문화활동비용은 연간 69만4,281원으로 세대 중 가장 많이 지불

한다. 여가활동의 동반자는 주로 친구(53.9%)거나 혼자서 즐기

는 경우(35.5%)가 많았다. (2015, 서울문화재단)

20대여성이 미술전시를 가장 많이 관람… SNS, 웹, 앱 활용도 커

20대 여성이 미술전시를 가장 많이 관람하고 미술관련 정보에도 가장 많은 관심을

보이는것으로 밝혀졌다. 응답자의 69%가 20대였으며, 87%가 여성이었다. 또한

45%의 응답자가 한달에 한번 전시를 관람하는 반면 22%가 일주일에 1회 관람하

는 것으로 밝혀져 의외로 많은 이들이 자주, 정기적으로 미술전시를 접하고 있음을

알 수 있다. 주로 방문하는 지역으로는 미술관과 갤러리, 카페가 밀집한 삼청동과

인사동이 꼽혔다.만24세 이하 또는 만65세 이상 / 대학생

무료 관람객 현황

89.4%

UX Research1. User Research - 심층 인터뷰

미술관 접근 동기

전시 정보를 얻는 경로

휴식공간 정보 인지

전시 동선

특징

포털사이트에 진행중 전시 검색SNS 포스팅으로 알게됨

블로그 등으로 전시 세부 정보를 알고 난 후 방문

몰라서 직접 이곳 저곳직접 뒤져본 후 인지

어디를 먼저 가야할지몰라서 보이는 곳 먼저 방문

사진찍을 곳이 많아 방문.sns에 많이 올리는 편이다.


전시를 좋아하고 무료라 자주 방문. 사진은 많이찍지만 공유까지 이어지지는 않음.

다른 사람이 올린 sns 사진을보고 방문 후, 실망한 경험이 많음.원하는 전시에 따른 동선 제공 희망

정보를 딱히 알지 않고공간이 좋아 방문

그냥 가다가 어디든지휴식 공간이 있으면 휴식

가도 가도 헤깔려서아트숍 먼저 방문

홈페이지 봐도 세부정보를알 수 없어서 포탈로 검색

로비에 있는 의자 말고는휴식공간 정보 모름

1층 먼저 구경한 후지하로 내려가 구경또는 보고싶던 전시만 구경

락커룸 이용 후, 지하에 있는전시 먼저 관람 후 1층 관람. 또는보고싶던 전시와 근처 전시 구경

sns로 발견 후 홈페이지 검색.정보를 알 수 없어 그냥 방문

전시에 따라 달라져서기억, 인지 어려움

삼청동 갔다가 우연히 지인 추천

방우리25세 / 직장인방문 5회 이상

오예술25세 / 대학생방문 1회

이훈정24세 / 대학생방문 3회

조인아26세 / 직장인방문 5회 이상

UX Research1. User Research - 인터뷰 Insight




전시 동선

특징



















홈페이지에서 적절한 정보를 제공받지 못해 sns나 포털/블로그 검색으로 정보를 다시 제공받음

휴식공간에 대한 인지 매우 낮음 - 전시를 보다가 우연히 발견하는 경우가 많음

정보제공부족









전시 동선

특징





















MMCA 서울관의 원래 컨셉이 동선을 정해놓지 않은 자유로운 분위기의 전시이지만,전시 동선에 대한 정보가 아예 없어 처음 방문 또는 재방문 시에도 혼란을 겪음

정보제공부족

동선에대한 니즈









전시 동선

특징



















MMCA 서울관의 원래 컨셉이 동선을 정해놓지 않은 자유로운 분위기의 전시이지만,전시 동선에 대한 정보가 아예 없어 처음 방문 또는 재방문 시에도 혼란을 겪음

다른 곳과 달리 전시장 전체 사진 촬영 가능으로 전시를 보며 사진촬영 빈도와 SNS 공유 빈도 높음

동선에대한 니즈

사진촬영 빈도



정보제공부족





UX Research2. Persona

이서진26세 / 예술분야 종사자

외향적

감성적

내향적

이성적

이서진은 예술분야 종사자로 사진을 찍어 sns에 올리는 것이 취미이

다. 사진찍기 좋은 전시들이 많아 현대미술관에 자주 방문하는 편이

다. 하지만 올 때마다 동선이 꼬여 똑같은 곳을 수차례 방문하게 되어

불편함을 느낀다. SNS에 올라온 사진들이 무슨 관인지 바로 찾고싶지

만, 한참을 둘러본 뒤에 찾곤 한다. 사진촬영에 일가견이 있는 이서진

은 자신이 찍은 사진도 남들에게 뽐내고 공유하고싶다.

프로필

1. 동선에 대한 정보 제공

2. 보고싶던 전시 바로 찾기

3. SNS와 사람들에게 공유

동기부여

1. 너무 많은 관이 있어 어떤 전시를 우선으로 봐야

할지 모르겠음

2. 자신이 찾던 관의 위치 정보를 알기가 어려움

3. SNS 공유를 활발히 해 사람들이 내 사진을 더 많

이 보았으면 좋겠음

불만사항

1. 사용자의 니즈에 맞는 동선 제공 및 추천

2. 자신이 현재 있는 위치정보 제공

3. 사진 공유의 활성화

목적

성격동선을 제대로 알고 전시를 보고싶고제가 찍은 사진을 공유하고 싶어요!

논리적 직관적

Contents Research2. User Journey Map — 전시 관람 전

인지 전시정보 탐색 관람권 예매

이서진26세 예술분야 종사자

거주지 서울가족정보 싱글인터넷 사용 상SNS 사용빈도 상

1. 활발한/외향적인 성격2. SNS에 사진 올리는 게 취미3. 미술관 애호가4. 일이 바빠져 여유시간이 없음5. 주말은 잠을 몰아서 자는 편6. 한 곳에 오래 머무르는 성격7. 친구들과 함께 다니는 것을선호함.8. 혼자 다니는 것도 즐김9. 인내력 있는 편10. 체험형 / 참여형 전시선호11. 웹보다 모바일 사용 선호

특성&동기

Stages 인지 전 경험

Thinking

Doing

TouchPoint

Experience

Feeling

요즘 너무 바빠 주말에는 자기만 하네..

오, 이 전시 재밌어보인다!

서울관? 집이랑도 가깝네

드디어 찾았다! 미리 예매하고 가야지

오늘이 아니라 일요일 전시를 찾아야해

아 이렇게 찾아야 보이는구나. 6개중에...

3개중에 내가 찾던 전시는 여기 없는데..

그래서 서울관에서 하는 전시는 뭐지?

내가 일반인가? 24세 이하인가?

어차피 현장에서 다시 티켓으로교환해야 하는 거네..

로그인하니 다시 메인페이지로 돌아가네..

오랜만에 미술관 가고싶다

인스타그램에 업로드 된 사진

요즘 재밌는 전시 뭐가 있지?

페이스북 페이지 광고글

체험형 전시같은 건 없나

포탈 현재전시 검색 / 블로그 후기

주말을 알차게 보내고싶어

친구 추천

인스타&페이스북 게시물 구경

휴식취하기

지루함 흥미로움 복잡함 귀찮음 번잡함 분노일상을

벗어나고픔 기대 혼란스러움 인내심발휘전시회방문욕구

인스타일상사진 업로드

일하기

모바일웹사이트접속

관람권예매

메인페이지전시 탐색

서울관클릭

현재전시-서울관 클릭

미술관캘린더

필터 -서울관 클릭

전시클릭-정보보기

회원가입-로그인

예매재클릭

날짜선택

매수선택

권종선택

결제금액확인 결제

Contents Research2. User Journey Map — 전시 관람 전

인지 전시정보 탐색 관람권 예매

이서진26세 예술분야 종사자

거주지 서울가족정보 싱글인터넷 사용 상SNS 사용빈도 상

1. 활발한/외향적인 성격2. SNS에 사진 올리는 게 취미3. 미술관 애호가4. 일이 바빠져 여유시간이 없음5. 주말은 잠을 몰아서 자는 편6. 한 곳에 오래 머무르는 성격7. 친구들과 함께 다니는 것을선호함.8. 혼자 다니는 것도 즐김9. 인내력 있는 편10. 체험형 / 참여형 전시선호11. 웹보다 모바일 사용 선호

특성&동기

Stages 인지 전 경험

Thinking

Doing

TouchPoint

Experience

Feeling

요즘 너무 바빠 주말에는 자기만 하네..

오, 이 전시 재밌어보인다!

서울관? 집이랑도 가깝네

드디어 찾았다! 미리 예매하고 가야지

오늘이 아니라 일요일 전시를 찾아야해

아 이렇게 찾아야 보이는구나. 6개중에...

3개중에 내가 찾던 전시는 여기 없는데..

그래서 서울관에서 하는 전시는 뭐지?

내가 일반인가? 24세 이하인가?

어차피 현장에서 다시 티켓으로교환해야 하는 거네..

로그인하니 다시 메인페이지로 돌아가네..

오랜만에 미술관 가고싶다

인스타그램에 업로드 된 사진

요즘 재밌는 전시 뭐가 있지?

페이스북 페이지 광고글

체험형 전시같은 건 없나

포탈 현재전시 검색 / 블로그 후기

주말을 알차게 보내고싶어

친구 추천

인스타&페이스북 게시물 구경

휴식취하기

지루함 흥미로움 복잡함 귀찮음 번잡함 분노일상을

벗어나고픔 기대 혼란스러움 인내심발휘전시회방문욕구

인스타일상사진 업로드

일하기

모바일웹사이트접속

관람권예매

메인페이지전시 탐색

서울관클릭

현재전시-서울관 클릭

미술관캘린더

필터 -서울관 클릭

전시클릭-정보보기

회원가입-로그인

예매재클릭

날짜선택

매수선택

권종선택

결제금액확인 결제

1. 직관적인 전시 정보 제공 필요

2. 날짜별 전시를 쉽게 제공

3. 모바일 예매

4. 모바일 티켓을 가능하게

Contents Research2. User Journey Map — 전시 관람 중

미술관 입장 전시 관람 휴식미술관 위치 탐색

서울관이 어느 역이랑 가깝더라? 지도를 보니 지하, 1층, 2층 다 전시가 있네

저 전시도 괜찮아보이는데 그냥 먼저 봐야겠다

인스타에 올라왔던 곳은 여기네!

따로 정해진 동선은 없는건가?

보기가 너무 힘들다.

에이..따로 어플도 받아야하고 유료네

맥? 맥이 뭐지? - 아 시간별 도슨트구나

따로 들을 수 있는 도슨트가 있나?

사이트에 경로가 나와있겠지? 어디부터 봐야하는거지..? 전시를 오래 봤더니 쉬고싶다.

홈페이지에 휴식공간들이 나와있었나..?

아까 지나오면서 봤던 그 의자에서 쉬어야지

쉴 곳 없나? 여기서 쉬어야겠다.

번거로움 기대 복잡함귀찮음 실망감 혼란스러움 뿌듯함 깨달음 피로함 편안함

웹사이트찾아오시는 길 네이버 지도

오래걸렸지만 혼자 보는 것 보다 이해가 잘 가네!

웹사이트접속 전시해설

클릭

맥 작품감상프로그램

오디오가이드

티켓받기

감상시작전시관 찾기

휴식욕구

휴식헤멤 발견 도슨트방송

전시해설듣기

X

SNS공유

전시구경 사진촬영

전시해설 예고를 방송으로 해주는구나

시간도 있는데 들어볼까?

정해진 동선이 어느정도 있구나!

기억에 의존한휴식공간 탐색

눈에 보이는휴식공간 발견

Contents Research2. User Journey Map — 전시 관람 중

미술관 입장 전시 관람 휴식미술관 위치 탐색

서울관이 어느 역이랑 가깝더라? 지도를 보니 지하, 1층, 2층 다 전시가 있네

저 전시도 괜찮아보이는데 그냥 먼저 봐야겠다

인스타에 올라왔던 곳은 여기네!

따로 정해진 동선은 없는건가?

보기가 너무 힘들다.

에이..따로 어플도 받아야하고 유료네

맥? 맥이 뭐지? - 아 시간별 도슨트구나

따로 들을 수 있는 도슨트가 있나?

사이트에 경로가 나와있겠지? 어디부터 봐야하는거지..? 전시를 오래 봤더니 쉬고싶다.

홈페이지에 휴식공간들이 나와있었나..?

아까 지나오면서 봤던 그 의자에서 쉬어야지

쉴 곳 없나? 여기서 쉬어야겠다.

번거로움 기대 복잡함귀찮음 실망감 혼란스러움 뿌듯함 깨달음 피로함 편안함

웹사이트찾아오시는 길 네이버 지도

오래걸렸지만 혼자 보는 것 보다 이해가 잘 가네!

웹사이트접속 전시해설

클릭

맥 작품감상프로그램

오디오가이드

티켓받기

감상시작전시관 찾기

휴식욕구

휴식헤멤 발견 도슨트방송

전시해설듣기

X

SNS공유

전시구경 사진촬영

전시해설 예고를 방송으로 해주는구나

시간도 있는데 들어볼까?

정해진 동선이 어느정도 있구나!

기억에 의존한휴식공간 탐색

눈에 보이는휴식공간 발견

5. 모바일 도슨트 제공6. 사용자 니즈에 맞는 전시 동선 제공

7. 어플 사용 -> SNS 공유, 참여 활성화8. 휴식공간 정보 제공

UX Research3. Main Goal

사용자에게 꼭 필요한 기능만 남겨

미술관을 가기 전에는 전시/행사에 대한 정확한 정보를 제공받고,

미술관에 가서는 전시를 효율적이고 즐겁게 감상할 수 있는 어플리케이션 구축

사용자에게 전시/문화체험 정보를

직관적으로 제공하여 각 전시에 대

한 인지력을 높일 수 있도록.

직관적인전시 정보제공

넓고 많은 관이 있는 서울관을 사용

자가 주체적으로 돌아다닐 수 있도록,

위치 알림동선 제공

‘복합예술 문화공간’이라는 MMCA의

컨셉을 살려 어플도 사용자의 예술적

참여공간이 될 수 있도록

참여 활성화

전시 관람 중(미술관 안)

전시 관람 전(미술관 밖)

전시 관람 후(미술관 밖)

UX Research4. UX Concept

Time & Place사용자가 언제, 어디에 있는지에 따라보여지는 컨텐츠가 달라진다.

01 날짜 선택

02 전시 리스트 보기

03 전시 상세 정보

04 전시 관련 이벤트

05 티켓 예매

01 모바일 티켓

02 모바일 도슨트

03 선택 전시 — 동선 추천

04 현재 위치별 공간 정보

05 위치별 사진 공유

01 공유된 사진 피드백

02 예정 전시 안내






01 날짜 선택




05 티켓 예매

01 모바일 티켓












01 날짜 선택




05 티켓 예매

01 모바일 티켓










순환



Contents Research2. IA_After

관람 전

SplashScreen

관람 중메뉴

전시 정보

문화활동/이벤트정보

티켓 예매

전시 동선제공

전시별 도슨트

사진 공유

주변 공간 정보

평면

입체

날짜/기간 선택

전시 선택

모바일 티켓

미술관 소개

찾아오시는 길

도슨트

새소식 / 이벤트

아트샵

로그인 / 설정 / 도움말

전시 캘린더

미술관 밖 미술관 안

Design1. Design Style

1. Shape 서울관의 선적인/네모난 이미지 착안 — Line / Square

2. Color 서울관의 빨강, 로고의 흰/검 & Opacity& 서브로 사용되는 Gray colors

3. Font현대적인 이미지의 산세리프

SF UI Display Ultra Light

애플 산돌고딕 네오 Ultra Light

애플 산돌고딕 네오 Thin

애플 산돌고딕 네오 Medium

Chalet 0 1 2 3 4 5 6 7 8 9

SF UI Display LightSF UI Display Medium

Key color

Sub color

#212529

#868E96 #CED4DA

#DD4521F8F9FA

#495057

Design2. UI Concept

최소한의 뎁스페이지의 이동 없이 가로&세로 스크롤을 으로

컨텐츠를 쉽게 이용할 수 있다.

세로 스크롤

— 세부정보 보기/설정

가로 스크롤/스와이핑

— 다른 정보 보기

—— 전시 세부 정보

—— 티켓 예매 버튼

—— 전시장 안에서 공유된관람객들의 사진

—— 전시 관련 행사타임테이블

3. GUI— 전시관람 전

전시 정보가 적절하게 나와있지 않아 블로그나 SNS로 다시 찾아보는 경우가 많다.

사용자가 전시정보를크게, 바로바로 접함.

아래로 스크롤 — 날짜 선택위로 스크롤 — 전시 세부정보왼쪽으로 스와이핑 — 다른 전시

직관적인 전시 정보 제공

좌우 스와이핑 — 같은 위치 사진

위 아래 스크롤 — 다른 위치 사진

10가지의 전시장이 있음에도 동선,위치, 휴식공간에 대한 정보가 제공되지 않았던 점을 보완

참여도가 부족한 점을 보완해‘복합 예술공간’이라는 MMCA의취지에 맞게 어플리케이션도 하나의 참여 공간으로 만듦

동선 추천 및위치정보 제공

SNS 연동참여 활성화 가로 전환 시 가상현실로 전환

왼쪽으로스와이핑

사진 선택

모바일 티켓

(미술관 도착 시 자동 팝업)

3. GUI— 전시관람 중

3. GUI— 기타 메뉴

햄버거 메뉴 예매 완료 후