0130_[이론] UX 기획 및 리서치 1

1. UX/UI 개념 이해

UX 디자인은 유저의 관점에서 유저의 문제를 해결하는 것에 집중하고,

UI 디자인은 시각 언어의 규칙을 만드는 것에 집중한다.

 

 

---

2. UX/UI 디자인 프로세스

1) 더블 다이아몬드 모형

 

다이아몬드 1 : 해결해야 할 문제 찾기

발견(Discover)단계

- 무엇이 문제인지를 발견하고 이해하는 단계

- 유저 리서치를 진행하며, 이 과정에서 문제가 여러 개 발견될 수도 있다.

- 대표적인 활동: 유저 리서치, 데스크 리서치, 필드리서치

 

정의(Define) 단계

- 집중할 문제가 무엇인지 정의하는 단계

- 유저 리서치 결과물을 분석하고 정리하며, 이 과정에서 어떤 문제에 집중할 지 논리를 정립한다.

- 대표적인 활동: 어피니티 다이어그램, 유저 페르소나 작성

 

다이어몬드 2: 해결책 찾기

발전(Develop) 단계

- 문제 해결을 위한 아이데이션을 진행하는 단계

- 문제 해결할 수 있는 아이디어를 발산하되, 제한을 두기보다 다양한 방향을 열어두고 고민하는 것이 중요

- 대표적인 활동: 정보구조도, 와이어프레임 등

 

전달 단계(Deliver) 단계

- 디자인을 구현하여 유저에게 제공하는 단계

- 프로토타입 제작 후 사용성 테스트를 해보면서 개선을 거듭

- 대표적인 활동: 최종 프로토타입, 사용성 테스트 등

 

[더블 다이어몬드 모형의 4가지 핵심 원칙]

 

 

---

 

3. Lean UX와 MVP

1) Lean UX 프로세스

유저 피드백을 데이터로 측정하고 반복적으로 디자인과 기능을 개선하는 과정을 거쳐 더 나은 유저 경험을 제공하는 프로세스

 

[Lean UX가 널리 활용되는 이유]

- 클라우드 발전으로 실시간 협업이 활발해졌다.

- 분석 툴의 발전으로 데이터를 통해 임팩트를 측정하기 용이해졋다.

- 치열한 시장 경쟁에서 살아남기 적합하다.

 

2) MVP

최소한의 리소스로 앞으로 더 많은 자원을 투자할 가치가 있을지 판단할 수 있다.

 

3) 케이스 스터디 : 에어비앤비, 아마존

에어비엔비와 아마존 두 기업의 MVP 실험은 초기 가설을 검증하고 유저 피드백을 수집하여 서비스를 발전시키는 데 중요한 역할을 했으며, 현재의 성공적인 비즈니스 모델 기반이 되었다.

 

- 에어비앤비

 

[MVP 1]

가설: 다양한 연령층의 유저들은 낯선 사람의 집에서 숙박하기 위해 지불할 의향이 있을 것이다.

가설 검증 방법: 특정 테크 컨퍼러스 참가자들을 대상으로 인당 80달러씩 지불할 의향이 있는지 파악해보기

MVP 스펙: 서비스 소개 페이지(숙박 시 에어 매트리스 3개, 무료 와이파이, 아침 식사 제공)

MVP 검증 결과: 3명의 지불 의사를 통해 수요를 파악할 수 있었음

 

[MVP 2]

가설: 유저들은 자신의 집에 낯선 사람이 머무는 대가로 돈을 지불하는 것을 허용할 것이다.

가설 검증 방법: 대형 행사가 있는 곳 주변의 호스트가 자신의 공간을 플랫폼에 등록하면, 유저들이 실제로 공간을 예약하는지 파악해보기

MVP 스펙: 위치, 날짜, 가격 필터링을 통해 호스트의 공간을 검색하고 예약을 요청할 수 있는 기능

MVP 검증 겨로가: 샌프란시스코에서 열리는 모빌리티 테크 컨퍼런스 행사장소 5마일 이내에서 최소 10명 이상의 지불 의사(1박 80달러)를 파악할 수 있었음

 

- 아마존

[MVP]

가설: 온라인에서 모든 종류의 제품을 판매하는 세계 최대의 상점을 만들 수 있을 것이다.

가설 검증 방법: 20가지 상품군 중 책에 초점을 맞추어 유저가 책을 주문하면 제프 베조스가 직접 책을 구매하여 우편으로 보냄

MVP 스펙: 책 주문을 할 수 있는 웹 페이지

MVP 검증 결과:  2개월 내에 주간 매출 2만 달러를 달성하며 성장 가능성을 파악함

 

4. 데이터 드리븐 UX 트렌드

1) 데이터 드리븐 UX 등장 배경과 중요성

데이터 드리븐 UX를 통해 빠르게 변화하는 시장에서 효율적으로 제품 개선할 수 있다.

 

 

2) 데이터 드리븐 UX에서 활용되는 지표 예시

주요 지표는 프로덕트별, 도메인별 특성을 고려하여 다르게 설정된다

[유저 관여도 관점(Engagement)]

- 얼마나 많이 이용하는가? - DAU, WAU, MAU

- 얼마나 자주 이용하는가? - DAU/MAU, DAU/MAU

 

[유저 재방문 관점(Retention)]

- 특정한 특성의 유저들이 재방문하는가? - 코호트 리텐션

- N일째 된 유저들이 재방문하는가? - Day N 리텐션

 

[유저 획득 관점(Acquisition)]

- 얼마나 보는가? - 페이지 뷰 수, 클릭 뷰 수

- 얼마나 획득되는가? - 전환율, 이탈율

3) 케이스 스터디: 여기어때, 코드 아카데미

- 여기어때

 

[문제 정의]

문제 발견: 쿠폰 받기 UI에서 유저들이 혜택을 놓치는 문제가 있었다. 특히 상품 구매 시 가격 차이에 혼란을 겪는 유저가 다수 확인되었다.

원인 찾기: 쿠폰의 디자인이 명확하지 않아 유저들이 혜택을 인식하는 데 어려움을 겪고 있었으며, 이로 인해 가격 차이에 대한 혼란이 발생했다. 일부 쿠폰은 다른 것들과 시각적으로 일관성이 부족했다.

 

[가설 수립]

유저가 혜택을 명확하게 파악하고 더 높은 확률로 쿠폰을 받는다면, 이는 결제 전환율 증가로 이어질 것이다.

 

[해결 방법]

- 쿠폰 UI 일관성 문제 해결 

: 다양한 디자인의 쿠폰을 통일하고, 디자인 시스템의 일관성을 유지하여 유저에게 일관된 경험 제공

- 쿠폰 혜택 정보 강조

: 혜택과 행동 문구를 나눠 노출하여 유저가 빠르게 이해하고 쿠폰을 받을 수 있도록 함

- 텍스트와 꾸밈 요소 최소화

: 간결하면서 명확한 정보 제공을 위해 텍스트와 꾸밈 요소를 최소화하여 유저에게 직관적으로 전달

 

[검증 과정]

A/B 테스트를 통해 다양한 디자인 솔루션을 실험하고, 클릭률을 비교하여 어떤 디자인 높은 효과를 가져오는지 확인한다.

 

[결과]

- 쿠폰 받기 UI 개선 후 클릭한 유저 비율이 17% 상승

- 유저들이 개선된 UI를 통해 쿠폰을 받는 확률이 높아지고, 이는 결제 전환율에도 긍정적인 영향을 미칠 것으로 기대됨

 

- 코드 아카데미

[문제 정의]

문제 발견: 유저들이 현재 체크아웃 페이지에서 가장 혜택이 큰 요금제를 쉽게 식별할 수 없어, 가격 할인의 최적화된 선택을 하지 못하고 있다.

원인 찾기: 체크아웃 페이지의 디자인이나 레이아웃 등이 가격 할인 혜택을 명확히 비교하고 강조하는 데 실패하고 있어, 유저가 최대 혜택을 얻을 수 있는 요금제를 찾기 어렵다.

 

[가설 수립]

유용한 가격 옵션을 우선하고, 절약 내용을 달러로 강조하면 연간 요금제의 채택률을 향상시킬 것이다.

 

[해결 방법]

 

- 플랜 카드 재정렬

: 더 매력적이 요금제를 우선적으로 노출

- 100의 법칙을 활용한 절약 내용 강조

: 연간 요금제의 절약 내용을 백분율이 아닌 달러로 절약 내용을 표시함.

*100의 법칙이란? 유저가 100달러 이상의 금액을 백분율과 동일한 가치가 있다고 인식하는 인지 심리학 원리

 

[검증 과정]

A/B 테스트를 통해 요금제별 전환 비율을 비교하여 어떤 디자인이 높은 효과를 가져오는지 확인한다.

 

[결과]

연간 결제 플랜 전환 비율 28% 상승

전반적인 페이지 전환율 개선

---

5. 실무 UX/UI 용어

1) 디자인 관련 용어

- 시각적 계층 구조

: 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것

- 와이어프레임

: 화면의 인터페이스를 단순한 선과 도형으로 표현한 것

 

- 프로토타입

: 제품이나 서비스 초기 버전으로, 아이디어를 시각적으로 보여주고 테스트하는 모델

- 정보 구조도

: 제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것, 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정

- 피델리티

: 디자인 또는 프로토타입의 디테일 및 정확성 수준으로, Lo-fi는 낮은 피델리티, Hi-fi는 높은 피델리티를 가짐

- CTA(Call To Action)

: 사용자에게 원하는 동작을 취하도록 유도하기 위해 설계된 디자인 요소나 텍스트

- 모크업(Mockup)

: 정적인 형태로 디자인된 인터페이스나 레이아웃을 보여주는 이미지나 모형

2) 인지 심리 관련 용어

 

2) 인지 심리 관련 용어

- 인지 부하(Cognitive Load)

: 정보를 이해하고 처리하는 데 필요한 정신적 노력의 양

- 멘탈 모델(Mental Model)

: 유저가 시스템이나 서비스를 어떻게 이해하고 예측하는지를 나타내는 개념

- 어포던스(Affordance)

: 디자인요소가 유저에게 어떤 동작을 할 수 있는 단서나 힌트를 제공하는 원리

- 게슈탈트 원리(Gestalt Principles)

: 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론, 
: 유사성, 근접성, 연속성, 폐쇄성 등이 해당됨

- 힉의 법칙

: 선택할 수 있는 옵션 수가 늘어날수록 결정 시간이 증가하는 원리

- 피츠의 법칙

: 대상까지의 거리와 크기에 따라 상호작용 시간이 달라지는 원리

 

- 제이콥의 법칙 

: 유저가 과거 경험을 토대로 익숙한 디자인 패턴을 기대하는 원리

 

3) 개발 관련 용어

- 서버

: 정보와 서비스를 제공하는 소프트웨어로, 웹사이트나 앱의 데이터를 저장하고 제공함

- 클라이언트

: 서버로부터 정보를 요청하고 받아오는 디바이스로 소프트웨어로, 웹 브라우저나 모바일 앱과 같은 유저가 상호작용하는 부분을 가리킴

- 접근성

: 모든 유저 포괄적으로 장애가 있는 유저를 포함하여, 웹사이트나 앱을 이용할 수 있도록 디자인하고 개발하는 것을 의마

- API

: 서로 다른 소프트웨어 간의 상호작용을 도와주는 인터페이스로, 데이터를 교환하거나 서비스를 활용할 수 있도록 프로그램 규칙과 도구의 집합

-CMS

: 웹사이트 또는 앱의 콘텐츠를 쉽게 관리하고 업데이트하는 도구 또는 플랫폼

-오픈소스

: 소프트웨어 또는 프로젝트가 무료로 공개되며, 누구나 소스 코드를 확인하고 수정할 수 있는 개발 방식

- 디버깅

: 소프트웨어 오류를 찾고 수정하는 프로세스로, 프로그램이 예상대로 동작하지 않을 때 문제를 식별하고 해결하기 위해 사용하는 과정

 

---

6. HW. 숙제
데이터 기반으로 UX를 개선한 사례 3가지 조사

1) 사례 조사 템플릿

 

문제 정의 : 문제를 어떻게 발견했고, 원인은 무엇이었나요?

가설 수립: 어떤 가설을 세웠나요?

해결 방법: 문제를 어떻게 해결했나요?

검증 과정: 가설을 검증하기 위해 어떤 방법을 활용했고, 어떤 지표를 모니터링 했나요?

결과: 어떤 임팩트가 있었나요?

 

[사례 1]

여기 어때

https://medium.com/gccompany/30%EB%B2%88-%EC%8B%A4%ED%97%98-%EB%81%9D%EC%97%90-%EC%84%B1%EA%B3%B5%ED%95%9C-%EC%97%AC%EA%B8%B0%EC%96%B4%EB%95%8C-%EC%83%81%ED%92%88-%EC%B9%B4%EB%93%9C-ui-%EA%B0%9C%EC%84%A0%EA%B8%B0-1c30ab8f0dfc

30번 실험 끝에 성공한 여기어때 상품 카드 UX 개선기

문제 정의: 

사용자가 셀러카드에서 숙소 비교에 필요한 주요 정보를 빠르게 파악하기 어렵다

(각 컴포넌트 별로 최대한 UX 관점과 UI 관점으로 문제점을 써 내려감으로써 발견)

 

가설 수립:

사용자에게 불필요한 정보는 제거하고, 필요한 정보만 강조하면 사용자 구매 경험에 긍정적인 영향을 미쳐 구매전환율과 매출 상승에 도움이 된다라는 인사이트로, 상품 리스트에서 제휴점의 주요 정보를 빠르게 인지할 수 있게 전달하여 고객이 원하는 숙소를 쉽게(effortlessly) 판단할 수 있게 한다. 할인율을 제거해 본 카드가 다른 요소들에 비해 상대적으로 클릭률이 덜 하락했음을 확인할 수 있었어요. 할인율을 제거하는 것이 사용자가 최종가격에 집중할 수 있는 방법 중 하나라고 판단

 

검증 과정: 

필요한 정보 검증은 UX Research로

구체적으로는 UT 내용에 의하면 리서치팀은 사용자의 구매 여정중 사진, 최종가, 리뷰 3가지 정보 요소들을 가장 관심 있게 찾았으며 앞으로 해당 요소들을 집중해서 발전시켜 볼 것을 제안

 

결과:

구매전환율과 매출이 상당한 수치 상승, 여기어때 Product 총괄의 Biggest Impact상을 수상

 

--

[사례 2]

https://medium.com/gccompany/%EC%8B%A4%ED%8C%A8%EB%8A%94-%EC%93%B0%EC%A7%80%EB%A7%8C-%EC%98%A4%ED%9E%88%EB%A0%A4-%EC%A2%8B%EC%95%84%EC%9A%94-48cfd7399e75

실패는 쓰지만 오히려 좋아요

문제 정의:
해외 숙소 탭(Tab)이 있음에도 불구하고 사용자의 절반이 국내 숙소 탭(Tab)에서 해외 키워드를 입력한다.

 

가설 수립:

사용자는 국내/해외 구분 업싱 통합된 검색 결과를 얻고 싶어 하며, 일관된 검색 경험을 하고 싶어한다.

국내 숙소 검색 시 사용자가 검색 조건(검색어, 일정, 인원)을 누락 없이 입력하도록 개선한다면, 원하는 조건에 맞는 상품과 가격을 확인 후 빠르게 의사 결정을 내려 구매로 이어질 것이다. 

 

검증 과정: 

3번의 UT 진행

 

결과:

사용자의 러닝 커브를 고려하더라도 구매전환율이 유의미하게 하락하는 추세를 보임

 

실패 원인 분석

사용자가 검색 과정에서 예측하지 못한 플로우에 당황.

서비스의 사용자 특성과 멘탈모델을 뾰족하게 고려하지 못함