[기초/이론] 사용자 여정 지도, 테스크 플로우, 스토리 맵

이 글은 제로베이스 UIUX 강의를 참고하여 정리한 글입니다. 오타나, 잘못된 내용이 있으면 언제든지 알려주세요! 감사합니다.😊

사용자 여정 지도 (User Journey Map)

User Journey Map: 사용자가 과업을 수행하는 동안 하는 행동, 느끼는 감정 그리고, 상호작용하는 접점을 시간순서로 정의한 것. → 시간이 지나고 나면 기억이 나지 않을 수 있기 때문에 시각적으로 기록해두는 것.

 

User Journey Map을 통해 알 수 있는 것

• 사용 동기 (Motivations)
• 시작 점 (User Approach)
• 행동 (Action)
• 감정 (Emotions)
• 도구 (What they use for)
• 시간 (Time and Sequence)

 

사용자 여정 지도의 활용

• 팀원 및 이해관계자들(Stakeholders)의 공통된 이해를 돕는다.
• 디자인 의사결정의 주요 기준이 된다.
• 기회 요인(Opportunity)과 문제점(Problem)을 도찰할 수 있고 특히 선후관계를 파악할 수 있다.
• 사용자가 우리 제품을 어떻게 수용하고 있는지 쉽게 파악할 수 있다.
• 타 부서와의 협업에 매우 유용한 자료가 된다.

 

사용자 여정 지도의 중요성

무엇보다 사용자를 공감(Empathy) 하기 위한 중요한 도구가 된다.
깊은 공감을 통해 디자인 의사결정 과정에서 보다 사용자 중심의 방향으로 나아갈 수 있다.

 

프로젝트 진행 과정에서 우리가 자주 접하는 실수

• 우리가 누구보다 우리 사용자를 잘 이해하고 있다 → 너무 높은 자신감
• 우리 사용자는 이렇게 생각할 거야 → 나를 기준으로 해석 → 확증편향에 빠짐
• 사용자 조사 결과를 객관적으로 해석하지 못함

이때 User Journey Map은 그 간격을 좁혀 우리를 다시 사용자 위치로 끌어 당기는 역할을 한다. 그래서 디자인 Thinking 프로세스의 공감과 디파인과정에서 User Journey Map을 사용하는 것이다. 즉, 사용자와 나와의 격차을 줄여주는 것이다.

 

사용자 여정 지도의 basic structure

사용자 여정 지도 만들기: Step 1 - 범위 Scope 정하기

• 여정 지도를 작성하는 목적과 범위를 정한다
• 여정의 범위: 제품 전체 또는 특정 기능 또는 세부 Task가 될 수 있다.
• 여정 지도의 디테일 수준 level of detail을 정한다.

 

사용자 여정 지도 만들기: Step 2 - 퍼소나 Persona 정하기

• 여정 지도는 공통 여정 지도와 퍼소나별 여정 지도로 구분 된다.
• 여정 지도 제작 시점에 퍼소나가 아직 정의되지 않았다면 생략될 수 있다.
• 퍼소나가 정의되어 있더라도 제작 목적에 따라 공통 여정 지도만 제작할 수 있다. 예) 여정 지도를 통해 일반덕인 사용 행태를 표현하고자 할 경우 (사용자별 특성 X)
• 반대로, 특정 기능에 대해 사용자 별로 다른 사용 행태가 예상되는 경우 각각의 여정 지도를 제작하여 비교 분석 할 수 있다. 예) 홈쇼핑 구매 과정에 대한 20대 사용자와 60대 사용자의 행태 비교

 

사용자 여정 지도 만들기: Step 3 - 기준 항목 정의

• 여정 지도에서 단계별로 표시할 정보를 정의한다.
• 기본적으로 아래 항목이 사용된다.
  • 단계 Phase
  • 감정 Emotion
  • 문제점 Problem
  • 과업 Task
  • 기능 Functions
  • 기회요인 Opportunity
• 필요에 따라 다양한 항목을 추가할 수 있다.
  • Touch point
  • 장소
  • 공동 작업자

 

사용자 여정 지도 만들기: Step 4 - 프레임에 정보 채워넣기

• 만들어진 틀 안에 해당하는 정보를 채워 넣는다.
• 이때 시스템 중심이 아닌 사용자 중심으로 해야하는데 즉, [A를 완료하기 위해 B, C한다]가 아니라 [사용자라면 A를 완료하기 위해 무엇을 의도하고 행동할까]의 관점을 유지해야 한다.
• 이때 예상되는(또는 사용자 조사로 밝혀진) 사용자의 ‘다른 선택’이나 ‘오해misunderstanding’또는 ‘실수human error’로 인해 연이어 발생되는 브랜치 플로우Branch flow를 정의한다.

 

사용자 여정 지도 만들기: Step 5 - 리뷰하기

• 프로젝트 참여자들과 함께 작성된 여정 지도를 리뷰한다. 사용자 조사결과가 바르게 반영되었는지, 특정 사고방식이 개입하여 편향적으로 작성되지 않았는지 그리고, 발생 가능한 다양한 유즈케이스가 잘 고려되었는지 확인한다.

 

사용자 여정 지도의 활용

 

사용자 여정 지도의 장점

• 한마음 한 뜻: 팀원 모두가 일치된 사용자 모델을 이해
• 문제점의 구체화: 문제점을 다각도로 분석하여 문제의 원인과 해결방안 모색에 도움을 줌

 

문제점의 구체화

→ 정보가 올바르지 않아 자꾸 초기화 된다면 점점 사용자의 기분이 나빠진다….

→ 초기화 하기 전에 사용자에게 한 번 더 물어본다.

→ 사용자가 무엇이 잘못됐는지 인지한다.

 

사용자 조사 결과와 여정지도를 비교하여 기존에 파악된 문제점의 상세한 원인과 그 해결방안을 모색하는 자료로 활용 될 수 있다.

 

물리적 시간의 표현

사용자 여정 지도상에는 연결되는 스텝으로 표현되어 있으나 실제로는 각 스텝이 다른 시간을 가질 수 있다. 이때 소요시간이 긴 스텝은 정보량이 많거나, 테스크가 많아서 일 수 있으므로 개선을 위한 기회 요인이 될 수 있다.

 

전략적 사고

• 기존의 프로세스를 단축하거나 비즈니스적으로 효과적인 방안을 모색한다.
• 예시) 화원가입율이 낮음 → 조사결과
  회원가입 과정에 불필요하게 많은 입력이 요구됨 → 원인 파악
  추가정보는 이후 이벤트 발생 시 입력하도록 플로우 개선 → 개선방안 도출
  더 많은 회원가입을 유도한다 → 기대효과

 

사용자별 특이점

동일한 테스크에 대해 여러 맵을 겹쳐서 특정 경우에 나타나는 행태(문제)와 공통적으로 발생되는 요인을 찾는다. 이때 문제의 중요도(priority)도 함께 정의될 수 있다.

 

리서치 주안점 도출

추가 리서치가 필요한 부분을 발견하고 추후 리서치 실행에 필요한 POV(point of view)도 함께 정의한다.

 

What if

기존 사용자 여정을 바탕으로 ‘만약 이 기능이 있다면?’, ‘만약 여기서 바로 이동할 수 있다면?’과 같이 가상의 시나리오를 정의하고 그 효과를 예측한다.

 

Make a consensus!

프로젝트 팀내에서 일관된 생각을 공유하는 것은 생각보다 어렵다. 오랜 시간 회의 끝에 ‘그래! 우리 제품의 컨셉은 이거야!’라고 하더라도 각자 자리로 돌아갔을 때 머릿속에서 떠오르는 컨셉은 제각각 일 수 있기 때문이다. 때문에 사용자 여정지도와 같은 시각적 자료가 매우 중요하다.

 

아이디어 워크숍에서의 사용

여정지도를 사용하여 Context를 효과적으로 공유할 수 있다.

아이디어 워크숍에는 다양한 사람들이 참여하게 되는데 이중에는 이전까지 프로젝트에 전혀 참여하지 않았던 사람도 포함된다. 효과적인 워크숍진행을 위해 이들을 빠른시간 내에 프로젝트의 목적과 범위를 이해시켜야 하는데 이때 여정지도는 매우 효과적인 재료material가 될 수 있다.

 

테스크 플로우 (Task Flow)

테스크 플로우란? Task: 과업 Flow: 흐름

• 과업수행의 흐름: 사용자가 제품 또는 서비스를 사용하여 과업을 달성할 때 까지의 일련의 과정

Task Flow는 User journey map과 비슷하지만 Task Flow가 좀 더 작은 개념에 속한다.

예) User journey map에서 넷플릭스 자막언어 변경이라는 행동이 있다면 Task Flow에서는 자막언어 변경에 대한 자세한 행동에 대해서 작성한다.

 

즉, Task Flow는 사용자가 과업을 완료하기 위한 행동의 연속 이다.

• 사용자가 해야하는 과업(Task)을 정의
• 퍼소나에 따라 동일한 테스크가 여러개로 정의 될 수 있음.
• 시나리오를 기반으로 가능한 모든 파생 루트를 표시함
• 대략적인 콘텐츠/기능 설명을 포함할 수 있음 (주요기능, 필수입력 항목 등)
• UJM에서 하위 분류 된 플로우

 

테스크 플로우를 정의하면 좋은 점!

• UI를 가장 (빨리, 저렴하게) 현실적으로 바라보는 방법! 런칭되면 사용자들은 이렇게 쓰게 될거야! (괜찮을까?)
• 시스템 개발 관점과 사용자 관점을 모두 포괄할 수 있다. 특히 시스템(서비스 제공자)과 사용자의 요구사항이 다를 경우에 각각 표시하고 타협점을 모색하는 시작 점이 될 수 있다.
• 발생할 수 있는 문제점을 미리 발견하고 대응할 수 있다.
• 각 단계별로 어떤 정보/기능이 필요한지 확인할 수 있다.
• 발생 가능한 모든 경우의 수를 확인할 수 있다.
  (사용자는 옵션 A를 선택하거나 B를 선택할 수 있다. 가만… 둘 다 선택하면 어떡해??)

 

테스크 플로우의 3요소

 

테스크 플로우를 그리기 위한 플로우차트 컴포넌트

 

테스크 플로우 만들기

Task Flow는 UI를 설계하기 전에 반드시 해야하는 과정이다. 그럼 이를 작성하기 앞서서 무엇을 먼저 준비해야할까?

1. 목적 Goal: 신규 개발을 위해 기존 UI 분석을 위해
2. 시나리오 정의 Scope and Use-case: 누가 사용하는가 어떤 목적으로 사용하는가 언제, 어디서, 무엇으로 사용하는가
3. 디테일 수준 Level of Detail: 작성 목적에 따라 디테일 수준을 정한다.
4. 작성 방법 Tool: 작성과 수정/공유가 용이한 방법을 고려한다.

 

테스크 플로우 만들기 : Step 1. Task의 목표 정하기

시작과 끝

테스크의 시작의 기준과 끝은 경우에 따라 늘 달라 질 수 있기 때문에 이번 플로우에서 정의할 범위의 시작과 끝의 기준(조건)을 정합니다.

 

 

테스크 플로우 만들기 : Step 2. 사용자의 모든 행동을 기술하기

사용자가 과업을 수행하기 위해 하는 모든 행동

정보를 탐색하고, 버튼을 누르는 등 사용자가 과업을 완료하기 위해 하는 모든 행동을 작성합니다.

작성할 ‘행동’ 범위

디자인 목적에 따라 테스크 플로우에 사용자의 ‘행동’의 범위를 정합니다.

아래와 같이 시스템 외부적으로 이루어지는 인터랙션은 경우에 따라 [필수]가 될 수 도 [옵션]이 될 수 도 있습니다.

테스크 플로우 만들기 : Step 3. 의사결정 요인 추가하기

분기 decision point

사용자의 의도 또는 시스템의 목적에 따라 테스크 플로우가 나누어지는 시점을 추가합니다.

이 과정을 통해 플로우를 더욱 현실적으로 만들 수 있습니다.

테스크 플로우 만들기 : Step 4. 리마커블remarkable 포인트 추가하기

Pain point 또는 Opportunity

좋거나/나쁜 발견점을 추가합니다. 여러사람이 함께 보는 문서이기 때문에 각자 추가하다보면 풍성해 지겠죠.

테스크 플로우 만들기 : Step 5. 브랜치branch 플로우 정의

만약… What if

필연적이 아닐지라도, 발생할 가능성이 있거나, 단순히 다양한 가능성을 검토해보기 위한 목적으로 ‘만약’이라는 가정하에 다양한 브랜치 플로우를 작성해봅시다.

• 만약 레시피를 못찾았다면?
• 만약 대신할 재료를 구매하려 한다면?

 

Appendix: User Flow

유저 플로우는 테스크 플로우와 유사한 형태를 갖지만, 테스크의 시작점이 반드시 시스템이 아닐 수도 있다는 것이 가장 큰 차이 점이다. 가령, [쇼핑앱]에서 [신발구입]에 대한 테스크 플로우는 애플리케이션의 랜딩페이지에서 시작하겠으나, 유저플로우의 경우 ‘포털서비스에서 검색하기’ 또는 ‘인스타그램에서 태그 검색하기’등 시스템 외부가 될 수 있다.

• 위 같은 특성 때문에 User Flow는 시작과 끝점이 애매모호 할 수 있다.
• User Flow는 사용자의 과업수행 관련 모든 가능성을 확산할 수 있다. (주제에서 벗어나지 않게 조심해야함

 

스토리 맵 User Story map

스토리맵

• 애자일 방법론과 비슷하다.
• 사용자의 작은 이야기들을 바탕에 깔고 그것을 조합해나가면서 사용자에 내재된, 사용자의 공통적인 동기를 이해해 나가려는 것

 

Backbone 만들기

기본재료 만들기다. 편향된 생각을 하지 않고 사용자의 관한 모든 것을 가져오는게 핵심이다.

 

이야기 만들기 Tell a story

하나의 물건을 구매하기 위해 하는 이야기(행동)을 작성한다.

 

관점 나누기 Share view point

개인의 해석이 깊게 개입할 수도 있기 때문에 여러 관점으로 보고 해석하는 것이 중요하다.

 

더 풍성하게! Add more as understanding grows

여러 사람이 스토리를 쓰다보면 겹치는 때가 있을 것이다. 겹치는 것들은 하나의 이야기로 만들고 다른 것들은 세분화해서 작성하면 더욱 풍성해질 것이다.

 

액티비티 기준으로 그룹핑 Group tasks by activity

• 작성된 것을 같은 주제로 그룹핑 해주면 보는 사람은 더욱 이해하기가 쉬워질 것이다.
• 어피니티 다이어그램과 유사하다.

 

우선순위 슬라이스 Start slicing

중요도가 높은 것과 낮은 것을 계층화 해줍니다. (중요도-사용자가 자주 하는 행동인가?)

→ 위 과정을 거친다면 이런 모양이 만들어질 것이다.

 

MVP

우리 제품의 가치를 보여줄 최소한의 것