강의 오랜만 ✍🏻

📌 UX/UI 개념 이해

 

▪️UX(User experience, 사용자 경험)

유저가 제춤이나 서비스와 상호작용하는 과정에서 얻는 모든 경험

* UX는 디지털 뿐만 아니라 오프라인에서의 경험 또한 포괄하는 개념으로, 모든 감각을 활용하는 다양한 경험

▪️UI(User interface, 사용자 인터페이스)

유저가 최종적으로 제품이나 서비스를 사용할 때 맞닿는 시각적 구성 요소

* UI가 UX에 포함되는 개념 중 하나라고 보는 시각도 존재

 

📌 UX/UI 디자인 프로세스

▪️더블 다이아몬드 모형

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

🔻 발견(Discover) 

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

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

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

🔻  정의(Define)

- 집중할 문제가 무엇인지 정의하는 단계
- 유저 리서치 결과물을 분석하고 정리하며, 이 과정에서 어떤 문제에 집중할지 논리 정립

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

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

🔻 디자인 씽킹과 더블 다이몬드 모형 모두 UX/UI 디자인 프로세스에 속함. 상황에 맞는 적절한 프로세스를 선택 활용

 

▪️더블 다이아몬드 모형의 4가지 핵심 원칙

문제 해결자들이 유저를 우선으로 고려하며, 시각적이고 포용적인 소통을 기반으로 협력과 공동 작업을 진행하고, 이터레이션을 통해 반복적으로 개선할 것을 강조

 

▪️더블 다이아몬드 모형에 대한 오해와 한계점

더블 다이아몬드 모형 또한 하나의 방법론으로 목적이 아닌 수단이라는 점을 잊지 말아야함.

더블 다이아몬드 모형에 대한 오해

- 선형적인 프로세스라는 오해

- 고정된 단계라는 오해

더블 다이아몬드 모형의 한계

- 모든 디자인 프로세스를 설명하지는 못함

- 복잡한 프로젝트나 대규모 서비스에서는 한계가 존재

 

📌 Lean UX와 MVP

▪️Lean UX 프로세스

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

Lean UX 프로세스가 널리 활용되는 이유

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

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

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

 

▪️MVP

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

예시 이미지 설명)

✖️

바퀴 만들기 + 부품 만들기 -> 자동차 완성

✔️

MVP1 : 바퀴에 판을 덧댄 이동 수단 ➡️ 유저 피드백

MVP2 : 손잡이를 더한 이동 수단 ➡️ 유저 피드백

MVP3 : 바퀴 크기를 키운 이동 수단 ➡️ 유저 피드백

MVP4 : 모터를 단 이동 수단 ➡️ 유저 피드백

MVP5 : 문을 여닫을 수 있는 이동 수단

 

▪️케이스 스터디 : 에어비앤비, 아마존

 

 에어비앤비

MVP1 :

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

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

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

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

MVP2 :

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

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

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

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

❗ 아마존

MVP

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

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

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

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

 

📌 데이터 드리븐 UX 트렌드

 

▪️데이터 드리븐 UX 등장 배경과 중요성

🔻데이터 드리븐 UX 등장 배경

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

 

🔻데이터 드리븐 UX 중요성

디자이너 관점

- 유저 데이터의 해석을 바탕으로 디자인 산출물에 대한 논리적인 근거를 제공할 수 있다.

커뮤니케이션 관점

- 데이터는 타 조직과 원활한 의사소통을돕는 공용어 역할을 한다.

비즈니스 관점

- 디자인 산출물이나 비즈니스에 얼마나 기여하는지 파악할 수 있다.

 

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

유저 관여도 관점(Engagement)

- 얼마나 많이 이용하는가 ? _ DAU(Daily Active User), WAU, MAU

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

유저 재방문 과점(Retention)

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

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

유저 획득 관점(Acquisition)

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

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

 

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

❗여기어때

문제정의

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

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

가설수립

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

해결방법

이미지 출처 : 여기어때 기술 블로그

- 쿠폰 UI 일관성 문제 해결

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

- 쿠폰 혜택 정보 강조

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

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

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

검증과정

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

결과

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

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

이미지 출처 : 여기어때 기술 블로그

❗코드아카데미

문제정의

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

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

가설수립

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

해결방법

이미지 출처 : Speero

- 플랜카드 재정렬 : 더 매력적인 요금제를 우선적으로 노출함

- 100의 법칙을 활용한 절약 내용 강조 : 연간 요금제의 절약 내용을 백분율이 아닌 달러로 절약 내용을 표시

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

검증과정

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

결과

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

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

이미지 출처 : Speero

 

📌 실무 UX/UI 용어

▪️디자인 관련 용어

시각적 계층 구조

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

와이어프레임

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

와이어프레임 예시

프로토타입

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

정보 구조도

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

정보구조도 예시

피델리티

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

CTA

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

CTA 예시

모크업

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