UX 기획 및 리서치 강의 4주차 숙제 및 내용 정리

4-1 내용 정리

1. 문제 정의 : 유저 리서치를 통해 도출한 제품의 현재 문제점을 특정하는 단계

• 해결해야 할 문제가 무엇인지 정의, 문제의 크기를 정량화된 수치로 파악
• 왜 문제로 정의했는지 충분한 근거 수집
  
  • 유저 경험 관점
  • 비즈니스 관점
• 문제 발생 원인에 대한 근거 데이터 파악
  
  • 유저 행동 데이터, 심층 인터뷰 결과, 사용성 테스트 등 여러가지 종합하여 힌트 찾기

 

 

2. 가설 수립 : 특전 문제에 대한 가정을 명확하게 정의하고 검증 가능한 형태로 제시하는 단계

• 가설 설정
  • 작은 문제부터 큰 문제까지 모두 가설을 통해 검증할 수 있다.
    • But, 문제를 하나의 아이디어로 한 번에 해결하는 것은 어렵다.
    • Then, 스텝 바이 스텝 가설을 쪼개서 설정하는 것이 필요할 수도 있다.
  • 가설에 포함 되어야 하는 것
    • 개선을 시도하고자 하는 부분에 초점을 맞추어야 한다.
    • a. 어떤 변경을 통해 b. 어떤 결과를 얻고자 하는지 포함!
• 가설 검증
  • 어떻게 검증할지 검증 방법 선정 (예를 들어 a/b 테스트)
  • 올바른 모니터링 지표 설정
    • 성공 지표 : 가설을 검증할 수 있는 지표
    • 가드레일 지표 : 조직 전체에서 중요하게 고려하는 지표, 해당 실험으로 부정적인 영향을 받을 수 있는 지표
    • 예시) 성공 지표 : 이탈률 / 가드레일 지표 : 구매 전환율, 소요 시간, 단계 완료율
    • (가드레일 지표(guardrail metrics)란, 조직이 무엇을 변화시키지 않으려 하는지 식별하기 위해 꼭 필요한 지표라고 할 수 있다. 이름에 가드레일이 들어가는 이유 또한 이와 맞닿아 있다.)

 

2-1. 좋은 가설의 요건

• 목표 지향
  • 특정 목표를 달성하기 위한 것
  • 목표 설정 = 유저 경험 개선, 유저가 가진 문제 해결과 관련 있어야 한다.
• 구체성과 명확성
  • 불확실한 용어 X, 추상적인 문구 X
  • 누가 봐도 구체적인 결과물을 예측할 수 있게 한 문장 단위로 작성
• 측정 가능성
  
  • 지표를 통해 성공과 실패를 측정할 수 있어야 한다.

 

3. 원페이저(1 Pager) : 정의한 문제와 가설을 중심으로 실험의 방향성과 목적을 한 눈에 파악할 수 있도록 정리하는 단계

• 한 페이지 내에 주요한 정보들이 담긴다.
• 이 단계에서부터 다양한 이해관계자들과 논의가 시작된다.
• 논의를 진행해나가며 계속 수정 및 보완된다. -> 더 다양한 정보를 담게 된다.
• 회사에서 중요하게 생각하는 가치에 따라 원페이저에 담기는 내용, 명칭이 조금씩 다를 수 있다.

 

 

4-2 내용 정리

1. 유저 시나리오 : 제품 또는 서비스에 대한 유저 경험을 스토리텔링으로 기술하는 방법

• 디자인 초기 단계에서 유저에 대한 공감을 바탕으로 유저 중심의 솔루선을 찾을 때 활용한다.
• 유저 페르소나와 결합하여 작성하면 유저의 동기와 목표를 감성적으로 이해하는데 도움 된다.
• 유저 시나리오 구성 요소 (4가지가 필수 구성 요소는 아니다.)
  • 유저 : 유저 페르소나
  • 목표 : 무엇을 달성하려고 하나?
  • 동기 : 왜 달성하려고 하나?
  • 외부 요소 : 어떤 것에 영향을 받나? (사용 상황, 사용 장소, 사용 시간 등)

 

버티컬 커머스 : 특정 카테고리를 중심적으로 다루는 온라인 쇼핑 전문몰

• 예시) 무신사는 패션 전문 버티컬 커머스

 

2. 고객 여정 지도 (Customer Journey Map) : 제품 또는 서비스를 유저가 이용하는 흐름을 시각화하여 분석하는 방법

• 사용자 여정 지도 = 고객 여정 지도 = 저니 맵
• 타임라인에 따른 유저의 여정을 시각적으로 표현하여 특정 시점에서의 경험을 파악하고 개선점을 찾을 때 활용한다.
• 전체 유저 경험을 시각화하여 한눈에 조망할 수 있다.

 

2-1. 고객 여정 지도의 구성 요소

• Zone A : 관점
  • 1. 유저 페르소나 : 여정을 체험하는 유저
    • 예시) 운동을 자주하는 20대 취준생
  • 2. 유저 시나리오 : 여정 지도가 다루는 상황 묘사, 유저의 목표와 기대치 연결
    • 예시) 취준을 준비하는 바쁜 와중에도 운동을 하고싶어해요. 공부량이 많아 헬스장에 갈 시간이 없어요. 집에서 쉽게 할 수 있는 20~30분 소요시간의 중고강도 홈트를 기대하고 있어요.
• Zone B : 경험
  • 3. 여정 단계 : 타임라인 기반으로 분류
    • 프로그램 선정 단계, 운동 단계, 운동일지 작성 단계
  • 4. 행동 : 유저가 특정 단계에서 취하는 행동
    • 앱을 열어 프로그램 난이도를 파악하고 프로그램을 선정해요.
    • 핸드폰 화면을 보며 프로그램에 맞춰 운동을 따라해요.
    • 운동을 끝내고 앱을 통해 일지를 작성해요.
  • 5. 생각 : 유저의 생각, 질문, 동기, 정보에 대한 니즈
    • 프로그램을 선정할 때 프로그램 난이도와 목적을 파악하기 쉽게 분류 되어있으면 좋겠다고 생각해요.
    • 운동을 할때 지루하지 않게 동기부여가 되는 멘트가 나왔으면 좋겠다는 생각을 해요.
    • 운동을 할때 헷갈리지 않게 숫자를 세어주거나 카운트를 해주는 소리와 음성이 나오면 좋겠다는 생각을 해요.
    • 운동을 할때 지루하지 않게 신나는 노래가 나오면 좋겠다는 생각을 해요.
  • 6. 감정 : 단계에 걸쳐 단일 선으로 표현
    • 프로그램을 선정할 때 난이도가 너무 어려워서 부상을 당할까봐 걱정해요.
    • 일지를 쓸때 오늘 운동이 재밌었다 생각해요.
•  Zone C : 인사이트 (선택사항)
  • 7. 기회 : 유저의 경험을 어떻게 최적화할 수 있는지에 대한 인사이트
    • 프로그램의 난이도와 목적을 보기 쉽고 이해하기 쉽게 보여주면 프로그램 선정에 짧은 시간이 소요될거에요.
    • 운동을 할때 귀여운 캐릭터가 응원하는 장면을 넣으면 유저가 힘이 날것같아요.
  • 8. 담당 팀이나 부서 : 해당 인사이트를 적용해볼 수 있는 협업자 코멘트
    • UX 리서치 팀에서 유저들에게 보기 쉽고 이해하기 쉬운 프로그램 UI가 무엇인지 A/B 테스트를 진행시켜요.
    • UI 디자인 팀에서 귀여운 캐릭터를 만들어 활용해요.

 

2-2. 고객 여정 지도 시각화 방법

• 목적 설정
  • 어떤 유저의 여정을 시각화할 것인지 명확한 목적 설정
• 유저 페르소나 정의
  • 어떤 유저를 대상으로 할 것인지 결정
  • (유저 페르소나별로 각각의 유저 저니맵이 나올 수 있다)
  • 유저가 여정을 통해 이루고자 하는 목표와 가지고 있는 기대 작성
• 여정 단계 분류
  • 유저가 시간의 흐름의 따라 언제 어떤 행동을 하는지 분류
• 터치 포인트 파악
  • 터치 포인트(유저가 제품 또는 서비스와 상호작용을 하는 지점)를 파악
  • 유저가 터치 포인트에서 어떤 페인 포인트를 가지고 있는지 파악
  • 페인 포인트에서 어떤 감정을 느끼고, 어떤 생각을 하는지 작성
• 기회 파악
  • 유저의 타임라인별 문제를 파악하고 개선점 찾기

 

 

3. 유저 스토리(User Story) : 특정 기능을 실제 개발 구현 가능한 작은 단위로 기술하는 방법

• 주로 애자일(Agile) 방법론에서 사용된다.
• 특히 엔지니어가 개발 작업 시 기능을 이해하고 구현하는데 유용하게 활용된다.
• 실무에서는 협업을 할때 유저 시나리오나 유저 저니맵보다 빈번하게 활용한다.
• 한 유저 스토리에 대한 구현 기준은 여러 개가 될 수도 있다.
  • 성공 케이스만 있는것이 아니라 실패 케이스도 다룰 수 있다.

 

3-1. 유저 스토리의 구성 요소 

• As s(user) : 유저
• I want(goal) : 유저가 원하는 기능 또는 행동
• So that(benefit) : 이를 통해 유저가 얻을 수 있는 이득
• 예시) 장바구니 기능 화면 / 로그인한 유저는 나중에 담긴 상품들을 확인하고 구매하기 위해서 장바구니에 상품을 추가할 수 있다는 유저 스토리
  • As a : 로그인한 유저
  • I want : 장바구니에 상품을 추가
  • So that : 나중에 담긴 상품들을 확인하고 구매하기 위해서

 

3-2. 심화) 걸킨 문법을 활용하여 테스트 케이스에 활용하기 좋은 구조로 유저 스토리를 구체화 할 수 있다.

• 걸킨 문법(Gherkin Syntax)은 유저의 행동에 중점을 맞추어 개발하는 행동 주도 개발(Behavior-Driven Development) 환경에서 널리 활용되는 특수한 문법
• As a, I want, So that만으로는 기능 구현 여부를 명확하게 판단하기 어려워서 테스트 케이스를 구체적으로 정의하기 위한 용도로 활용한다.
  • Given(주어진 상황) : 유저에게 주어진 상황
  • When (조건 및 행동) : 유저의 특정 액션 또는 이벤트
  • Then(결과) : 특정 결과나 상태 
  • And, Or : 유저의 추가 액션이 있을 경우 사용

 

 

4-3 내용 정리

1. 유저 플로우 (User Flow) : 유저가 제품이나 서비스를 이용하는 과정을 유저의 행동 및 화면 간의 이동에 초점을 맞추어 시각화하는 단계

• 유저가 최종 목표에 도달하기까지 서비스 내에서 어떤 경로로 이동하고 어떤 행동을 하는지 구체화하는 도구로 활용
• '해피 패스'에 매몰되지 않고 다양한 경로를 고려해 볼 수 있다는 장점!
  • 해피 패스(Happy Path) : 유저가 제품이나 서비스에서 원하는 목적지까지 아무런 문제를 겪지 않고 도달했을 때의 경로
• 유저 플로우와 와이어프레임은 상호보완적인 도구로 활용된다. 작업에 정해진 순서 X
• 유저 플로우 구성 요소
  • 원형 : 시작/ 끝
  • 사각형 : 동작/ 프로세스 -> 유저의 입력이나 액션을 표현
  • 마름모 : 조건 -> 특정한 조건이나 결정 지점을 표현하기 위해 사용, 유저의 행동이나 시스템의 상태에 따라 플로우가 여러가지로 나뉠 수 있다
  • 화살표 : 플로우의 방향 -> 한 상태나 단계에서 다음 상태나 단계로의 흐름을 표현
• 화면, 유저, 액션, 시스템 액션, 모달의 경우 색상으로 구분하면 이해를 높일 수 있다.
  • 화면 : 유저와 시스템의 상호작용이 발생하는 공간
  • 유저 액션 : 유저가 화면에서 수행하는 행동 또는 입력
  • 시스템 액션 : 유저의 행동에 의한 응답으로 시스템이 수행하는 동작
  • 모달 : 특정 상황이나 유저의 행동에 대한 부가 정보나 선택지 제공

 

 

2. 와이어프레임 (Wireframe) : 화면의 레이아웃과 플로우를 단순한 선과 도형으로 설계하는 과정

• 로우 피델리티(Lo-fi)로 작업되어 작업자들이 부담 없이 아이디어에 자유롭게 참여 가능
• 그래픽 요소 및 기술적인 세부사항을 배제하고 신속하게 결과물을 생성한다.
• 작업자 간 커뮤니케이션을 위한 초기 비주얼을 제공할 수 있다.
• 변경되는 요구 사항에 대응하여 빠르게 구조를 검토하고 수정하기 용이하다.
• 논의의 초점이 레이아웃과 플로우에 집중되도록 최소한의 색과 디자인을 사용한다. (회색도 사용)
• 와이어프레임 + 화면 이동에 대한 정보 = 와이어 플로우 (근데 현업에서는 구분없이 와이어프레임이라고 함)
• 손으로 그린 와이어프레임
  • 신속하게 제작, 손쉽게 수정
  • 회의 중 간단하게 종이나 보드에 함께 스케치 가능
  • 아이디어를 즉각적으로 공유하고 토론하기 용이
  • 손으로 그리는 과정 중에 아이디어 발산하기 좋은것이 특징!
• 디자인 툴로 작업한 와이어프레임
  • 손으로 그린것보다 비교적 정확하고 일관된 와이어프레임 생성 가능
  • 링크를 공유하여 피드백을 받기 용이
  • 물리적으로 같은 공간에 있지 않아도 실시간으로 함께 작업 가능

 

3. 정보 구조도 (Information Architecture) : 제품이나 서비스를 구성하는 요소들의 구조를 도식화 하는 것

• 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾아 작업을 완료할 수 있도록 돕는 과정
• 유저가 자신의 현재 위치와 다음 장소와 가기 위해 무엇을 해야하는지 인지할 수 있도록 설계할때 활용한다.
• 적절하게 설계된 효과적인 정보 구조도 -> 유저의 접근성 향상
• 부적절하게 설계된 정보 구조도 -> 유저의 이탈과 오류 발생
• 상위와 하위 개념을 효과적으로 그룹핑하고 올바른 라벨링을 하는 것이 중요!

 

• 정보 구조도의 기반이 되는 구성 요소
  • Organization(조직 및 구성 시스템) : 정보를 체계적으로 정리하고 구성하기
    • 예시) 웹사이트 메뉴 계층 구조, 콘텐츠 그룹화(넷플릭스), 상위 및 하위 카테고리화
  • Labeling(라벨링 시스템) : 정보를 명확하고 이해하기 쉽게 표현하기
    • 예시) 메뉴 항목의 명칭, 버튼 레이블, 카테고리명
  • Navigation(네비게이션 시스템) : 유저가 정보를 찾고 이동함
    • 예시) 웹사이트의 메뉴 바, 네비게이션 바
  • Searching(검색 시스템) : 유저가 원하는 정보를 검색하여 찾기
    • 예시) 웹사이트의 검색 기능, 검색 결과 페이지, 필터 및 정렬 옵션

 

• 정보 구조도 예시
  • 반드시 지켜야 하는 형태는 존재하지 않다.
  • 프로젝트 성격과 상황에 따라 맞춰서 적용하는 것을 추천!

 

Organization 예시

 

 

Labeling 예시

 

 

Navigation 예시

 

 

Searching 예시

 

 

 

4-4 내용 정리

1. 화면 설계서

• 프로젝트의 복잡도가 높고, 이해관계자가 많을 경우 원활한 히스토리 파악 및 유지 보수를 위해 화면 설계서를 작성한다.
• 화면 설계서 = 와이어프레임 + 기능 상세 정의 : 화면에 존재하는 각 요소를 분리하여 설명한다.
• 회사나 프로젝트의 성격에 따라 화면 설계서를 작성하기도 하고 안하기도 한다.
• 회사에 따라 화면 설계서를 작성하는 직군이 다르다.

 

 

2. QA(Quality Assurance)문서 : 기능 배포 전에 기능을 테스트하는 과정

• 테크니컬 QA
  • 의도대로 기능이 잘 동작하는지 초점을 맞춰 이루어진다.
  • 보통 테스트 케이스를 작성하고 요구 사항을 충족하는지 확인한다.

• 디자인 QA
  • 의도대로 디자인이 잘 구현되었는지에 초점을 맞춰 이루어진다.
  • AS-IS(구현된 화면)와 TO-BE(의도한 화면)을 명확하게 전달하는 것이 중요하다.

 

 

숙제

요구사항

1. 유저 페르소나와 유저 시나리오를 참조하기

2. 카카오톡 선물하기 서비스를 통해 친구에게 생일 선물을 보내는 30대 직장인 유저의 고객 여정 지도를 그리기