Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

[Rightbrain UX Academy] Netflix UX/UI개선 Slide 1 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 2 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 3 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 4 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 5 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 6 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 7 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 8 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 9 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 10 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 11 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 12 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 13 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 14 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 15 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 16 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 17 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 18 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 19 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 20 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 21 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 22 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 23 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 24 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 25 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 26 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 27 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 28 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 29 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 30 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 31 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 32 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 33 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 34 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 35 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 36 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 37 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 38 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 39 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 40 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 41 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 42 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 43 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 44 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 45 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 46 [Rightbrain UX Academy] Netflix UX/UI개선 Slide 47
Upcoming SlideShare
What to Upload to SlideShare
Next

0 Likes

Share

[Rightbrain UX Academy] Netflix UX/UI개선

라이트브레인 2020 UX 아카데미 10기 Open Project입니다.
이번에 소개해 드릴 결과물은 'Netflix - UX/UI 개선 프로젝트'입니다.

올해 초에 진행된 UX 아카데미 10기 교육 기간 동안 정규과정의 수업뿐만 아니라 별도의 조별 모임을 통해 과제와 프로젝트를 진행하며 만들어 낸 신선한 아이디어를 Rightbrain lab을 통해 공개합니다.

라이트브레인 아카데미 수강생들이 어떤 과정을 통해 아이디에이션하고 또 인사이트와 컨셉을 도출했는지 궁금하시다면 지금 바로 슬라이드쉐어로 내용을 확인하세요.

-


UX 아카데미 ‘라이트브레인 U –

미래의 UXer들을 위한 교육으로 UX전문가로서 성장할 수 있는 발판이 되는 교육입니다. UX에 대한 기초지식이 있는 학생과 직장인들을 대상으로 하며 정규 과정은 보통 15회 강의로 구성됩니다. UX 개념, 필드 리서치, 모델링, 서비스 디자인, 프로토타이핑과 같은 구성으로 UX디자인의 주요 프로세스를 모두 경험하고 최종 결과물을 발표하는 것을 목표로 합니다. 2019년 상반기 배출된 8기부터 아카데미 정글과 함께 UX Academy를 개설하여 보다 전문적이며, 밀도 있는 교육을 UX에 관심있는 분들에게 제공하고 있습니다.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

[Rightbrain UX Academy] Netflix UX/UI개선

  1. 1. Netflix UX/UI 개선 안홍비 정소연 고한경 이한나
  2. 2. TEAM MEMBERS 안홍비 pinkloe7094@gmail.com 정소연 sjeong3206@gmail.com 고한경 hko920920@gmail.com 이한나 hanna.lee_17@freemed.or.kr 01UX Academy
  3. 3. CONTENTS 02UX Academy 01 UX Challenge 02 Field Research 경험요소 파악 Issue 도출 설문 조사 심층 인터뷰 Overview 03 UX Modeling Key Finding Insight 도출 UX 가치/전략 Ideation 04 Prototype Scenario User Flow Prototype
  4. 4. ! ? 03UX Academy Overview Netflix의 사용 맥락과 이용동기는 무엇일까? Netflix를 이용하는 고객들의 Pain Points, 숨겨진 Needs는 무엇일까? 그러한 문제들은 어떻게 개선될 수 있을까? 조사 결과 대부분의 사용자는 Netflix의 큐레이션을 그다지 신뢰하지도, 이용하지도 않으며 추천의 폭이 좁고 기준을 알 수 없는 점, 소통 요소가 없는 점에 답답함을 느꼈다. 사용자에게 최적화된 탐색의 효율화. 지금까지와는 다른 새로운 큐레이션의 방향성. 단순한 콘텐츠 시청을 넘어선 즐거움의 영역.
  5. 5. 01 UX Challenge 경험요소 파악 Issue 도출
  6. 6. 05UX Academy 사용자 경험요소 탐색 신뢰성 - 카테고리마다 콘텐츠가 중복되어 나타남 - 콘텐츠가 추천되는 기준을 알 수 없음 사용성 - 보고싶지 않은 콘텐츠의 삭제 불가 - 카테고리 개수가 너무 많고, 순서 변경 불가 사용성 - 제작진 링크 텍스트와 버튼의 구분이 불가능 - 옴니버스 콘텐츠도 최신화 아닌 1화부터 제공 - 조회수, 좋아요수 등의 평가 지표 부재 사용성 - 특정 회차 공유 불가능 - 평가, 공유의 맥락과 기능의 위치가 상이함 조회 보조 활동
  7. 7. 06UX Academy Issue 도출 이슈 탐색 - 탐색 과정에서 추천 결과에 대한 신뢰도를 증가시키는 방법은? - 홈 화면에 노출되는 카테고리의 개수는 적당한가? - 홈 화면의 콘텐츠는 사용자의 취향과 일치한다는 느낌을 주는가? - 홈 화면의 콘텐츠는 사용자가 원할 때마다 최적화할 수 있는가? - 카테고리마다 콘텐츠가 중복되는 현상을 해결할 수 있는 방법은? 조회 - 현재의 디자인에서 가독성을 더욱 높일 수 있는 방법은? - 조회 페이지에 나타나는 정보에 사용자가 공감할 수 있는가? 보조 활동 - 평가, 공유 기능을 사용 맥락에 맞게 개선할 수 있는 방법은? - 평가, 공유 기능의 활용도를 높일 수 있는 방법은? 조사 포인트 탐색 1. 메인 페이지에 표시되는 정보의 적절성 - 정보의 양, 필요성, 중요도, 갤러리 UI 방식 2. 카테고리의 적절성과 콘텐츠 중복 문제 - 카테고리별 활용도, 개수, 중복 노출이 신뢰도에 미치는 영향 3. 큐레이션의 적절성 조회 1. 조회 페이지에 나타나는 정보의 적절성 - 정보의 양, 질, 가독성, 텍스트와 버튼의 구분 유무 보조 활동 1. 평가, 공유 기능의 적절성 - 기능 활용도, 사용 맥락, 타 서비스에서의 이용 행태
  8. 8. 02 Field Research 설문조사 심층 인터뷰
  9. 9. 08UX Academy 설문 조사 참여 인원 107명 플랫폼 구글 온라인 참여자 정보 OTT 서비스 배경 정보 섹션 01 섹션 02 넷플릭스 이용 행태에 관한 설문 섹션 03 넷플릭스 시청에 관한 설문
  10. 10. 09UX Academy 인터뷰 - 참여 인원 : 8명 순서 시간 내용 인터뷰 설명 라포 형성 인터뷰 Wrap Up 및 마무리 2분 5분 32분 1분 인터뷰 동의서 & 사전 설문지 작성 및 인터뷰 목적 설명, 녹취에 대한 동의 구하기 라포 형성을 위한 질문 사용자가 직접 인터뷰어에게 자신이 넷플릭스를 사용하는 방법과 경로, 행동에 대한 설명을 하도록 함 (태스크 수행, 카드 소팅, Think Aloud) 감사 인사 및 마무리
  11. 11. 03 UX Modeling Key Finding Insight 도출 UX 가치/전략 Ideation
  12. 12. UX Academy 11 Key Finding Affinity Diagram 필드 리서치 결과를 163개의 어피니티 노트로 추출 163개의 노트 39개의 1차 헤더 유사한 노트를 묶어 Key Finding 도출 10개의 메인 헤더 1차 헤더를 한번 더 묶어 Insights 도출
  13. 13. 12UX Academy Satisfied Excitement Performance Kano Model Need Not Fulfilled Need Fulfilled Basic Dissatisfied UX 가치/전략
  14. 14. 13UX Academy Basic Kano Model Satisfied Need Not Fulfilled Need Fulfilled Dissatisfied Key Findings Headers Value 사용자에게 다양하고 풍부한 느낌을 제공함과 동시에 혼란요소를 제거하여 '접근성'을 개선하는 것이 만족도 향상에 필수적이다. 활용도가 높은 기능이나 정보에 대한 '접근성'이 떨어질수록 만족도가 저하되므로, 이에 대한 개선이 필요하다. 다양하고 풍부한 콘텐츠를 제공한다는 느낌을 주는 것은 중요하다. 그러나 동시에 '혼란스러움'을 최소화할 수 있어야 하며, '콘텐츠 중복 현상'은 풍부하다는 느낌을 감소시키므로 개선이 필요하다. 앱 내 탐색을 거치지 않고, 원하는 콘텐츠를 찾아 바로 시청하려는 사용자 유형이 있다. 이들에게는 홈 화면에서 필요한 정보를 빠르게 직관적으로, 정확하게 파악해내는 것이 중요하다. 홈 화면의 랜딩 페이지를 광고로 가득 채우는 것은 사용자의 반감을 살 수 있고, 접근성이 떨어진다는 느낌을 줄 수 있다. 퀄리티 높은 콘텐츠를 다양하게 제공한다는 느낌을 자아내는 감성적 요소(UI)가 만족도에 영향을 준다. 사용자는 홈 화면에서 풍부한 정보를 바라기보다, 빠르고 직관적으로 판단할 수 있기를 원한다. 콘텐츠에 대한 모든 정보를 포스터로 대체하는 것은 '정보 부족'과 '혼란'을 야기할 수 있다. 시청하려는 콘텐츠를 미리 정해놓고 앱에 접속하는 유형의 사용자는 앱 내 탐색 활동을 즐기지 않는다. 비교적 둔감한 사용자에게 콘텐츠 중복 현상은 그다지 영향을 끼치지 않는다. 비교적 예민한 사용자에게 콘텐츠 중복 현상은 서비스 퀄리티가 낮다는 인상을 제공한다. 사용자는 현재 홈 화면에 배치된 콘텐츠(썸네일)의 수가 '많다'고 느끼며, 이에 대해 '혼란스럽다'와 '풍부하다'의 느낌이 공존한다. 가독성을 위해서는 홈 화면에 표시된 정보 사이의 배치간격을 넓히는 것이 필요하다. 사용자는 자신과 관련이 깊거나 (찜한, 시청중인, 취향저격), 인기가 많은(지금 뜨는, 인기콘텐츠) 작품을 큐레이션 받고 싶어한다. 활용도가 높은 카테고리는 상위배치하고, 낮은 카테고리는 하위배치하거나 제거할 수 있도록 하여 접근성을 높여야 한다. UX 가치/전략
  15. 15. 14UX Academy Kano Model Satisfied Need Not Fulfilled Need Fulfilled Dissatisfied Performance Key Findings Headers Value 완벽한 일치율을 향한 큐레이션이 아닌 다양한 콘텐츠를 폭넓게 접할 수 있는 큐레이션으로. 이와 더불어 사용자가 추천 기준을 알 수 있도록 하는 요소를 추가해야 한다. 사용자의 진정한 니즈와 넷플릭스의 한계를 종합적으로 고려해봤을 때, '완벽한 일치율'을 고수하는 것보다 '더욱 다양하고 풍부한 콘텐츠 소개'로 나아가는 것이 현명할 수 있다. 추천 시스템이 어떤 기준으로 작동되는가에 대한 이해도를 높이는 것은 만족도와 직결될 수 있다. 이를 위한 직관적이면서도 설명력있는 디자인이 필요하다. 큐레이션(일치율) 기능을 이용하지 않는 사용자가 있으며, 왜 이용하지 않는가에 대한 파악이 필요하다. (낮은 신뢰도, 상이한 목적 등) 사용자에게 완전히 fit하는 추천을 해줄 수 없다면 한계를 파악하여 개선하거나 지금까지와는 다른 방향성을 모색해봐야한다. 사용자의 진정한 니즈는 '완벽하게 일치하는' 큐레이션보다, 내가 좋아할만한 콘텐츠를 다양하게 소개받는 정도일 수 있다. 사용자에게 추천 기준을 공개 (다만, 자연스러운 방식으로)하는 것이 오히려 만족도(신뢰감, 한계에 대한 이해심)를 높일 수도 있다. 취향 일치율의 활용도를 올리기 위해서는 부가적인 정보(또는 시각적 장치)를 추가하여 이해하기 쉽도록 만들어야 한다. 사용자는 추천 정확도를 판단하기 위해 '카테고리의 이름과 그 안에 포함된 콘텐츠들이 걸맞게 배치되어있는가'를 주목한다. UX 가치/전략
  16. 16. 15UX Academy Kano Model Satisfied Need Not Fulfilled Need Fulfilled Dissatisfied Excitement Key Findings Headers Value '관계'와 '소통'을 중심으로 사용자의 의사소통 욕구를 충족시킬 수 있는 요소를 추가함으로써 평가 및 공유 기능에 대한 새로운 '동기'를 만들어주어야 한다. 좋아요/싫어요 수를 공개하거나 다른 유저들의 평가 결과를 간접적으로나마 접할 수 있도록 함으로써, '표현욕구'와 '의사소통'에 대한 니즈를 해소함과 동시에 평가 기능을 이용할 '동기'를 만들어줄 수 있다. 넷플릭스에서 공유 기능의 활용도를 높이고자 한다면, 단순 '추천' 목적이 아닌 새로운 동기를 만들어주어야 한다. 넷플릭스 내에서 평가(좋아요/싫어요) 기능을 이용할 '동기'를 만들어주어야 한다. 공유 기능이 더 잘 인지되고, 기능에 대한 이해도를 높일 수 있는 방법의 모색이 필요하다. 공유 기능으로 전송되는 정보의 양적, 질적 개선이 필요하다. (특히 흥미 요소 추가 필요) 광고성 정보 등에 대한 경험으로 링크를 불신하고 거부감을 갖는 사용자가 존재한다. 공유 상황에서 중요한 요소는 주고받는 대상과의 '소통'이다. 관련 요소 추가의 고려가 필요하다. (cf. 카카오 선물하기 카드 메세지) 공유를 주고받는 대상과의 '관계'는 실제 시청으로 이어질지의 여부에 중요하게 작용한다. 새로운 콘텐츠에 대한 관심을 갖게되는 경로는, 앱 내부가 아닌 외부인 경우가 많다. 대부분 '짧거나', '하나뿐인' 영상을 제공하는 유튜브에서는 공유를 활발히 이용하지만, '길고', '편재하는' 작품이 대다수인 넷플릭스에서는 이용하지 않는다. 유튜브와 달리 넷플릭스 작품의 공유 상황에서는, 제목을 '말'로 전하는 것이 더 편하기 때문에 단순한 '추천'의 목적은 공유 기능 이용의 동기가 되지 못한다. 사용자의 평가 여부가 큐레이션의 정확도를 높일 수 있다는 사실은 '동기'가 되기에 부족하다. 사용자가 평가 버튼을 누르는 '맥락'을 고려하여 개선점을 찾을 필요가 있다. 콘텐츠에 대한 다른 유저들의 의견을 파악하거나, 자신의 의견을 표현하고 싶어하는 니즈가 존재한다. 평가 기능이 더 잘 인지되고, 기능에 대한 이해도를 높일 수 있는 방법의 모색이 필요하다. 공유시 전송되는 정보에 '흥미'와 '신뢰감'을 줄 수 있는 요소를 추가해야 한다. 이 때, 주고받는 대상과의 '관계'와 '소통'이 중요한 key가 될 수 있다. UX 가치/전략
  17. 17. Value 01 사용자에게 다양하고 풍부한 느낌을 제공함과 동시에 혼란요소를 제거하여 접근성을 개선 하는 것이 만족도 향상에 필수적이다. 16UX Academy VALUE 약간 미흡 매우 미흡 활용도가 높은 기능이나 정보에 대한 접근성을 향상시킨다. 적정 약간 우수 매우 우수 필요한 정보를 빠르게, 직관적으로 파악할 수 있도록 구성한다. 정보 사이의 간격을 조정함으로써 가독성을 향상시킨다. 카테고리마다 콘텐츠 중복을 최소화할 수 있도록 개선한다. Ideation
  18. 18. Value 02 VALUE 약간 미흡 매우 미흡 완벽한 일치율을 향한 큐레이션이 아닌 다양한 콘텐츠를 폭넓게 접할 수 있는 큐레이션으로. 이와 더불어 사용자가 추천 기준을 알 수 있도록 하는 요소를 추가해야 한다. 사용자가 좋아할 만한 콘텐츠를 좀 더 다양하고 풍부하게 접할 수 있도록 큐레이션 한다. 17UX Academy 적정 약간 우수 매우 우수 추천 시스템이 어떻게 작동되는가에 대한 기본적인 정보(기준)을 사용자가 쉽게 이해할 수 있도록 직관적이면서도 설명력 있는 디자인이 필요하다 Ideation
  19. 19. Value 03 VALUE 약간 미흡 매우 미흡 사용자는 시청 결정 상황에서 제작진 관련 정보를 중요시한다. 관련 콘텐츠 및 기능을 발전시킴으로써 만족도 향상을 기대해볼 수 있다. 사용자가 시청(결정) 상황에서 중요시 하는 ‘제작진’ 정보에 프로필 사진, 필모그래피 등이 제공될 수 있도록 한다. 18UX Academy 적정 약간 우수 매우 우수 조회 페이지 내에서 텍스트와 버튼이 명확하게 구분 될 수 있도록 한다. Ideation
  20. 20. Value 04 VALUE 약간 미흡 매우 미흡 ‘관계’와 ‘소통’을 중심으로 사용자의 의사소통 욕구를 충족시킬 수 있는 요소를 추가함으로써 평가 및 공유 기능에 대한 새로운 ‘동기’를 만들어 주어야 한다. 다른 유저들의 평가 결과를 공개함으로써 사용자의 ‘표현욕구’ 와 ‘의사소통’에 대한 니즈를 일정 수준 충족시킨다. UX Ideation 17UX Academy 적정 약간 우수 매우 우수 공유시 전송되는 정보에 ‘흥미’와 ‘신뢰감’을 줄 수 있는 요소를 제공한다. 이때, 주고 받는 대상과의 ‘관계’와 ‘소통’통을 핵심적으로 고려해야 한다. Value 04 VALUE 약간 미흡 매우 미흡 ‘관계’와 ‘소통’을 중심으로 사용자의 의사소통 욕구를 충족시킬 수 있는 요소를 추가함으로써 평가 및 공유 기능에 대한 새로운 ‘동기’를 만들어 주어야 한다. 다른 유저들의 평가 결과를 공개함으로써 사용자의 ‘표현욕구’ 와 ‘의사소통’에 대한 니즈를 일정 수준 충족시킨다. Ideation 19UX Academy 적정 약간 우수 매우 우수 공유시 전송되는 정보에 ‘흥미’와 ‘신뢰감’을 줄 수 있는 요소를 제공한다. 이때, 주고 받는 대상과의 ‘관계’와 ‘소통’통을 핵심적으로 고려해야 한다.
  21. 21. 20UX Academy 사용자에게 다양하고 풍부한 느낌을 제공함과 동시에 혼란요소를 제거하여 ‘접근성’을 개선해야 한다. 서로 중복되는 콘텐츠가 적었으면 좋겠다. 필요한 정보를 홈에서 빠르게 파악하고 싶다. 콘텐츠 간 구분이 잘 되지 않는다. 콘텐츠가 표시되는 방식이 나에게 최적화되었으면 좋겠다. 광고 배너가 너무 큰 영역을 차지함 콘텐츠 자체는 풍부하게 느껴짐 3번 이상 콘텐츠가 겹칠 경우 큐레이션에 대한 의심이 생김 이미 알고있는 콘텐츠를 시청하는 경우가 대부분임 홈 화면에서 장르의 구분이 잘 되지 않음 (드라마, 영화) 콘텐츠를 한 눈에 볼 수 있는 정렬방식 필요 전체적인 간격이 좁아서 가독성이 떨어짐 활용도가 높은 카테고리를 윗 순서로 올리고고 싶다. 관심있는 정보만 확인하는 경향 랜딩 페이지에 표시되는 광고 영역을 50% 이내로 조정 사용자가 특정 콘텐츠를 삭제할 수 있는 기능 추가 포스터 썸네일과 함께 작품의 (평균)러닝타임 제공 전체적으로 정보 사이 간격 넓히기 홈 화면 카테고리에 아코디언 정렬 방식 추가 사용자가 카테고리의 순서를 조정할 수 있도록 함 Ideation
  22. 22. 21UX Academy 완벽한 일치율을 향한 큐레이션이 아닌 다양한 콘텐츠를 폭넓게 접할 수 있는 큐레이션으로. 이와 더불어 사용자에게 추천 기준을 알 수 있도록 하는 요소를 추가한다. 나에게 추천된 기준을 알고싶다. 다양한 콘텐츠를 풍부하게 접하고 싶다. 넷플릭스 큐레이션은 한계가 있다고 느껴진다. 추천 결과에 대한 체감 정확도가 낮음 카테고리별 콘텐츠 배치 기준 취향 일치율에 대한 설명 평과 결과의 반영 여부 추천의 폭이 좁게 느껴진다. 취향에 맞는 콘텐츠만 소비하고 싶진 않다. 보유 콘텐츠 수의 부족 카테고리마다 큐레이션이 적용된 기준(정보)을 해시태그 아이콘 형식으로 나열 (해당 카테고리에 콘텐츠들이 배치된 이유를 설명) 사용자가 평가 버튼을 누르면 큐레이션에 적용될 기준(정보)을 제공 - 해시태그 아이콘 pull to refresh 방식 추가 + 현재의 취향 일치율순 배열 방식이 아닌 새로고침을 할 때마다 콘텐츠 배열 순서가 달라지도록 한다. 사용자가 홈 화면에서 특정 콘텐츠를 삭제하면 그 자리에 새로운 콘텐츠를 제공 Ideation
  23. 23. 22UX Academy 사용자는 시청 결정 상황에서 제작진 관련 정보를 중요시한다. 관련 콘텐츠 및 기능을 발전시킴으로써 만족도 향상을 기대해볼 수 있다. 제작진에 대한 간단한 정보를 앱 내에서 얻고싶다. 콘텐츠 시청 전에 핵심내용을 더 잘 파악할 수 있었으면 좋겠다. 텍스트와 버튼이 잘 구분되지 않는다. 배우별 콘텐츠 리스트 링크의 존재를 몰랐음 작품, 감독, 배우의 수상 이력에 관심이 간다. 평과 결과의 반영 여부 전체 줄거리나 회차별 줄거리는 잘 읽지 않는다. 보유 콘텐츠 수의 부족 *제작진 정보 페이지 추가 - 프로필 사진 - 이름 - 수상 이력(트로피 아이콘) - 넷플릭스 내 참여 작품 리스트업 조회 페이지에서 포스터 썸네일 대신 예고편(미리보기) 영상 제공 - 사용자가 원할 시 플레이할 수 있도록 사용자가 버튼으로 인식할 수 있는 디자인 요소 추가 특정 감독이나 배우의 팬인 경우 트로피 아이콘 추가 수상 관련 큐레이션 제공 사용자가 평가 버튼을 누르면 큐레이션에 적용될 기준(정보)을 제공 - 해시태그 아이콘 Ideation
  24. 24. 23UX Academy ‘관계’와 ‘소통’을 중심으로 평가 및 공유 기능에 대한 새로운 ‘동기’를 만들어주어야 한다. 공유 기능의 존재에 대해 몰랐거나 사용할 동기가 없다. 공유받은 정보의 내용이 불충분하고 흥미롭지 않다. 콘텐츠에 대해 다른 사람들과 의견을 나누고 싶다. 평가 기능을 자주 이용하지 않게 된다. 평가 결과가 큐레이션에 반영될 것이라 기대 안함 공유 기능이 있는지도 몰랐음 언제 사용해야할지 모르겠음 회차별로도 공유 기능이 필요함 공유를 주고받는 상대와의 관계가 중요 감정을 표현하기 위해 평가 기능을 사용함 유튜버의 리뷰, 댓글, 좋아요를 참고함 평가 기능의 위치가 동기 발생 맥락과 맞지 않음 기능의 존재를 몰랐거나 이해하지 못함 평가 시 해시태그 아이콘 기능 (큐레이션 part) 시청이 끝난 후에도 공유를 누를 수 있도록 플레이어 화면에 아이콘 추가 포스터 썸네일과 함께 작품의 (평균)러닝타임 제공 해당 콘텐츠에 좋아요가 눌린 수치를 숫자 또는 퍼센테이지로 표현, 해당 국가 한정 재생(view) 수치 제공 평가 아이콘에서 뎁스를 추가하지 않고 바로 ‘좋아요/싫어요’ 함께 표시 ‘클립 공유’ 기능을 추가하여 사용자가 재미있는 장면을 발견했을 때, 클릭한 장면을 전후로 5초씩 총 10초짜리의 클립을 공유할 수 있도록 한다. 광고처럼 느껴져 거부감 발생 시청 중, 시청 후에도 평가할 수 있도록 아이콘 추가 Ideation
  25. 25. 04 Prototype Scenario User Flow Prototype
  26. 26. 25UX Academy Scenario #6 시청#5 아코디언 메뉴#4 콘텐츠 삭제 기능 #3 탐색_카테고리 카테고리 사이의 간격을 넓혀 가독성을 향상시킨다. #2 탐색_첫 화면 메인 페이지에 표시되는 광고 영역을 줄이고, 사용자의 활용도나 선호도가 가장 높은 카테고리를 바로 노출시켜 접근성을 높인다. 아하! 한 카테고리의 콘텐츠를 한번에 다 볼 수 있네! #1 접근 Netflix 앱 접근 및 탐색 시작 효율적인 탐색 경험 제공 & 만족도 향상.사용자에게 콘텐츠를 탐색할 수 있는 배열 방식의 선택권을 줌으로써 사용성을 향상시킨다. 사용자가 더이상 보고싶지 않은 콘텐츠는 직접 삭제할 수 있도록 함으로써 사용성과 신뢰성을 개선한다. samsang Netflix에 뭐가 있나 한번 들어가 봐야겠다. 광고 영역이 줄어든 대신 내가 시청하던 콘텐츠가 바로 보이는구나! 훨씬 편하다~ 전체적인 간격도 넓어져서 보기가 훨씬 편해졌어. 이 작품은 나랑 정말 안맞는 것 같은데.. 삭제해야겠다! 롱탭을 해서 삭제하면 피드에서 더이상 보지 않을 수 있구나! 이 버튼은 뭐지? 눌러봐야겠다. 아하! 한 카테고리의 콘텐츠를 한번에 다 볼 수 있네! 펼치고 접는 것이 자유로워! 평소보다 보고싶은 콘텐츠를 더 빨리 찾을 수 있었어! Netflix 인기 콘텐츠 Netflix 인기 콘텐츠 다시보기 콘텐츠 한국 드라마 & 버라이어티 다시보기 콘텐츠 한국 드라마 & 버라이어티 Netflix 인기 콘텐츠
  27. 27. 26UX Academy #6 클립 확인 & 시청하기 이 장면 진짜 웃기네 ㅋㅋ 무슨작품이지? 집가는동안 봐야겠다 ㅎㅎ 시청하기 찜하기 모던 패밀리 시즌 10 에피소드 9 27:05~27:15 공유받은 클립에 해당하는 작품의 정보를 함께 제공하고, 시청 후에 ‘클립 다시보기’, ‘작품 시청하기’, ‘찜하기’ 등의 옵션을 제공함으로써 시청을 유도한다. #4 시청 후 이 작품은 정말 재밌었다ㅎㅎ 어, 뭐가 바로 뜨네? 좋아요 눌러야지! 좋아요 숫자랑 큐레이션이 바로 바뀌는구나? Credit Director Anderson Main actor Leonard Dicaprio Sub actor Vivian Westwood 1293 432 공유 +1 +1 사용자가 시청을 마치자마자 바로 만족도를 표현 할 수 있도록 안내문구 및 버튼을 제공한다. 사용자가 평가한 내용은 즉각 큐레이션에 반영한다. #3 클립 공유 기능 새로운 공유기능이 생겼구나! 이 장면이랑 해시태그 몇 가지 추가해서 친구에게 보내야지 ㅎㅎ 클립공유좋아요 5초 5초 클립을 만들어 보세요! 재미있게 보셨나요? 평가를 하시면 더 많이 추천해 드릴게요! 사용자가 직접 10초 이내의 클립을 간단히 설정하여 해시태그 추가와 함께 공유할 수 있도록 한다. (특정 장면을 기점으로 앞뒤 1~5초씩 설정 가능) #5 공유 받기 어? 이게 뭐지? 친구가 넷플릭스 추천을 했구나 한번 확인해 볼까? sams ang 서울역 공유를 받는 사용자에게 푸시 알림을 제공하고, 클릭하면 앱을 즉각 실행시켜 공유된 정보(클립)을 바로 시청할 수 있도록 한다. #2 시청 중_소통 욕구 이 장면 정말 웃기다 ㅋㅋㅋ 친구한테 보여주고 싶은데? 시청 중 사용자가 인상적인 장면을 발견하고, 지인와 소통하고싶은 욕구가 생긴다. #1 탐색 samsang 흠, 요즘 넷플릭스에서 재미있는 콘텐츠는 뭐가 있지? 좋아요 수와 조회수 등 사용자가 콘텐츠를 탐색할 때 판단할 수 있는 객관적인 지표를 제공한다. 이건 조회수랑 좋아요가 높으니까 재미있겠지? Scenario
  28. 28. 27UX Academy #4 콘텐츠 순환 기능 #2 평가_키워드 기능 콘텐츠 조회시 관련 키워드로 구성된 태그가 추가되며 롱탭을 누를 시 강화가 되어 향후 탐색시 큐레이션 콘텐츠에 대한 추천기준을 직관적으로 보여준다. #1 시청 후 사용자는 만족도가 높은 콘텐츠를 소비하였을 때 비슷한 느낌의 또다른 콘텐츠를 찾고자 하는 욕구가 발생한다. samsang 좀비 사극 후.. 이번 시즌은 진짜 대박이었어. 빨리 다음 시즌도 나왔으면 좋겠다! 흠, 이제 또 뭘 보지? 방금 본 작품이랑 비슷하면서도 재미있는 콘텐츠를 또 찾았으면 좋겠는데. 앱을 새로고침 하거나, 마음에 안드는 콘텐츠를 삭제할 때마다 계속 새로운 콘텐츠가 채워지는구나! 다양한 작품을 폭넓게 추천받을 수 있어서 참 좋은 것 같아! 앱을 새로고침하면 카테고리마다 노출되는 콘텐츠의 순서가 바뀌며, 특정 콘텐츠를 삭제하면 새로운 콘텐츠가 그 자리를 채우면서 전체적으로 순환 효과를 가져온다. 미스터리 스릴러 사회비판 조선시대 정치 오호? 작품에 대한 태그가 생겼고, 롱탭으로 태그강화를 할 수 있구나? 이것들이 앞으로 나에게 추천되는 기준이 되는 건가보다. #3 추천_키워드 기능 사용자는 카테고리마다 적용된 키워드를 확인함으로써 자신에게 추천되는 기준을 파악할 수 있고 태그 클릭시 관련 작품들을 한눈에 볼 수 있다. Anong님의 취향저격 컨텐츠 N N 강화된 키워드들을 중심으로 나에게 추천이 되는구나! 태그를 한번 클릭하면 해당되는 작품들을 한번에 볼 수 있어 편리하다! 좀비 사극 미스터리 스릴러 사회비판 조선시대 정치 미스터리 Scenario
  29. 29. 시청하기 28UX Academy #3 제작진 정보_관심인물 추가 관심인물에 해당 인물을 추가하면 참여작이 업데이트 될 때 알림을 받아볼 수 있다. 또한 트로피 아이콘을 통해 수상이력을 한 눈에 볼 수 있다. N #4 푸시 알림 관심인물을 추가해놓으면 해당 인물의 신작이나 수상 소식, 넷플릭스에 새롭게 추가된 참여작들에 대한 푸시알림을 받아볼 수 있다. 푸시 알림 ! 봉준호 감독의 새로운 작품을 확인해 보세요! 2021 기생충: 드라마버전 시청하기 ! 배우 디카프리오가 출연한 새로운 작품을 확인해 보세요! 2021 지구온난화: 세계의변화 ! ! .... .... N ..... 관심인물 추가 #2 제작진 정보_필모그래피 필모그래피 목록에서 작품을 바로 조회할 수 있다. 프로필 사진을 통해 이름만으로 파악하기 어려운 인물을 더욱 쉽게 파악할 수 있다. N 봉준호 영화감독 2020 기생충 2017 옥자 2013 설국열차 ..... #1 봉감독 작품을 찾아서 권위있는 시상식에서 수상한 봉준호 감독을 본 사용자는 문득 해당 감독의 다른 작품 이력이 궁금해진다. Academy 봉준호감독 오스카 트로피 관심인물 추가 봉준호 감독 이번 오스카 수상 완전 대박이잖아...!? 이참에 봉감독님 다른 작품은 뭐가 있나 한번 찾아볼까? 오! 넷플릭스에서 감독 필모그래피를 볼 수 있네? 아직 못본 작품이 이렇게 많았구나 프로필 사진이 있으니까 이름만 봐서는 모르는 사람들도 잘 알아보겠어! 좋아하는 감독이나 배우들을 추가해놓으면, 일일이 찾아보지 않아도 참여작들의 알림을 받을 수 있어서 참 편하다! N ..... 관심인물 추가 감독 뿐 아니라 작가나 출연진들도 볼 수 있네! 이 배우가 상을 이렇게나 많이 받았던가? 수상 작품 꼭 봐야겠다. 레오나르도 디카프리오 영화배우 2019 원스어폰어 타임 인 할리우드 2015 레버넌트 2013 울프 오브 월스트리트 관심인물로 추가하면 새로운 작품이 나왔을 때 알림을 받을 수 있구나! Scenario
  30. 30. User Flow 29UX Academy Task : ‘큐레이션 태그’를 활용하여 나에게 맞는 컨텐츠를 쉽게 찾는다. Goal : 원하는 컨텐츠를 찾아 시청. UI Behavior Decision 앱 아이콘 컨텐츠 상세페이지 (조회) 큐레이션 태그 시청화면 (플레이어) 프로필 선택 큐레이션 태그 메인화면 앱 실행 스크롤 & 카테고리 검색 찜 태그 강화 평가 앱 새로고침 앱 종료 태그 목록 보기 태그 강화선택 보려고 결정한 컨텐츠가 있는가? 원하는 컨텐츠를 찾았는가? 탐색을 더 원하는가? 새로고침 하겠는가? 원하는 컨텐츠를 찾았는가? 탐색을 더 원하는가? 검색 카테고리 탐색 선택 재생 시청종료 장르탭 탐색 앱 종료 시청 하겠는가? 창 닫기
  31. 31. Task : ‘클립공유’기능과 ‘태그’기능을 활용해 다른 유저들과 소통한다. Goal : 다른 유저들과 공유 주고받기. UI Behavior Decision 30UX Academy 앱 아이콘 컨텐츠 상세페이지 (조회) 시청화면 (플레이어) 공유클립 재생 일반 공유내용 조회 공유 푸시알림 클립 편집화면 프로필 선택 메인화면 앱 실행 평가 공유탐색 앱 종료 선택 선택 태그 추가 시청종료 시청 하겠는가? 컨텐츠를 공유 하겠는가? 창 닫기 태그 추가 클립 생성 공유 전송 앱 실행 앱 종료 원하는 컨텐츠를 찾았는가? 탐색을 더 원하는가? 클립공유 하겠는가? 재생 컨텐츠를 조회 하겠는가? Receiver User Flow
  32. 32. 31UX Academy Prototype 1. 광고 영역 축소 2. 큐레이션 태그 3. 아코디언 메뉴 4. 간격 조정
  33. 33. 32UX Academy 기본 홈 화면 콘텐츠 삭제 기능 아코디언 메뉴 롱탭 탭 Prototype
  34. 34. 33UX Academy 태그 강화 롱탭 탭 기본 홈 화면 노출 순서 변화 Prototype
  35. 35. 34UX Academy 태그 리스트 태그 리스트 확장 기본 홈 화면 탭 Prototype
  36. 36. 35UX Academy 더 보기 카테고리 수정 화면 항목 삭제 탭 탭 Prototype
  37. 37. 36UX Academy 롱탭 카테고리 수정 화면 항목 순서 변경 변경된 화면 Prototype
  38. 38. 37UX Academy 1. 예고편 재생 2. 조회수, 평가수 3. 평가 뎁스 축소 3. 큐레이션 태그 Prototype
  39. 39. 38UX Academy 조회 화면 태그 강화 좋아요 롱탭 탭 탭 Prototype
  40. 40. 39UX Academy 1. 평가, 공유 2. 회차, 자막 및 음성, 다음 화 Prototype
  41. 41. 40UX Academy 탭 탭 Prototype
  42. 42. 41UX Academy Prototype
  43. 43. 42UX Academy Prototype
  44. 44. 43UX Academy Prototype
  45. 45. 44UX Academy 탭 Prototype
  46. 46. 45UX Academy Prototype

라이트브레인 2020 UX 아카데미 10기 Open Project입니다. 이번에 소개해 드릴 결과물은 'Netflix - UX/UI 개선 프로젝트'입니다. 올해 초에 진행된 UX 아카데미 10기 교육 기간 동안 정규과정의 수업뿐만 아니라 별도의 조별 모임을 통해 과제와 프로젝트를 진행하며 만들어 낸 신선한 아이디어를 Rightbrain lab을 통해 공개합니다. 라이트브레인 아카데미 수강생들이 어떤 과정을 통해 아이디에이션하고 또 인사이트와 컨셉을 도출했는지 궁금하시다면 지금 바로 슬라이드쉐어로 내용을 확인하세요. - UX 아카데미 ‘라이트브레인 U – 미래의 UXer들을 위한 교육으로 UX전문가로서 성장할 수 있는 발판이 되는 교육입니다. UX에 대한 기초지식이 있는 학생과 직장인들을 대상으로 하며 정규 과정은 보통 15회 강의로 구성됩니다. UX 개념, 필드 리서치, 모델링, 서비스 디자인, 프로토타이핑과 같은 구성으로 UX디자인의 주요 프로세스를 모두 경험하고 최종 결과물을 발표하는 것을 목표로 합니다. 2019년 상반기 배출된 8기부터 아카데미 정글과 함께 UX Academy를 개설하여 보다 전문적이며, 밀도 있는 교육을 UX에 관심있는 분들에게 제공하고 있습니다.

Views

Total views

15,380

On Slideshare

0

From embeds

0

Number of embeds

14,367

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×