[W4D3] LG U+ 멤버스 무료영화 혜택 UI 페이퍼 프로토타입

 

[W4D1] LG U+ 멤버스의 UI/UX 분석 (feat. 공짜로 줘도 못 받아 먹는 혜택)

 

📌 W4D1에 LG U+ 멤버스의 UX에 대해서 분석 했었다.

 

분석내용 중 LG U+ 멤버스의 아쉬운 UX를 선정했고 개선 방법을 작성했었다. 오늘은 이 개선 방법을 실무에서 담당자들 간의 효율적인 커뮤니케이션을 위한 프로토타입으로 만들어 보고자 한다.

 

가장 아쉬운 UX인 '복잡한 혜택 수령 방법'에 대한 UX개선 페이퍼 프로토타입을 제작해 화면(UI)을 개선해보겠다. 

 

---

페이퍼 프로토타입 타입이란

 

페이퍼 프로토타이핑 (프로토타입) : 네이버 블로그 (naver.com)

프로토타입은 웹 디자인, 소프트웨어 프로그래밍, 전자 제품 및 UX/UI 디자인 분야에서 사용되는 용어이다. 개발 팀이 인수하기 전에 제품을 테스트해보고 결함을 확인하는 데 사용된다. 이런 단계는 제품을 디자인할 때 매우 중요한 단계이다.

 

페이퍼 프로토타입은 가장 간단한 유형이다. 우선 종이로 제작한다음 다음 디자이너가 부가적인 설명을 한다. 이는 머릿속의 개념을 즉시 이미지화 하는데에 좋고 고객이 제품을 빠르게 확인할 수 있어서 좋다.

 

페이퍼 프로토타입의 장단점

장점	단점
제작 속도가 빠르고 저렴하다. 창작 제한이 없다. 자동 기록 방식이다.	고객과 디자이너가 서로 다른 생각을 할 수도 있다. 정확하지 않은 피드백을 받을 수 있다. 상호 작용이 제한적이다.

 

---

W4D1의 분석 내용

아쉬운 UX 1위 복잡한 혜택 수령 방법 

 

📌 먼저 "연간 3회 온라인 무료 예매권을 이용한 영화 예매"를 목적으로 UX Reserch로 조사한 유저플로우를 보면

LG U+ 멤버스 앱 실행 ▻ 홈 ▻ 영화예매 버튼 클릭 ▻ 바코드 클릭 ▻ 온라인 예매 기능 및 안내 부재로 예매 실패 ▻ CGV 앱 실행 ▻ CGV 영화 예매 ▻ 영화 선택 ▻ 영화예매권 검색 ▻ 바코드 입력 ▻ 오류 ▻ 네이버 지식인 검색 ▻ 문제해결

 

 

 

 

영화 예매 버튼이 홈 화면에 노출되어 있어 사용자들이 찾는데 불편함이 없다. 여기까지 사용자는 굉장히 좋은 UX를 경험했다.

 

그러나 실질적인 목적인 고객의 JTBD인 '할인 혜택을 받고 영화를 예매하기'를 위해 이동하는 페이지에서 위와 같은 Pain Point를 겪는다. 처음에 이렇게 시도 후 실패한다면 고객 UX에 치명적일 것이고 결국 혜택을 포기하고 고객이 이탈하는 상황까지 온다.

 

특히 2030세대 남자들의 Bounce Rate가 가장 높은 것으로 나타났다. 최악의 경우 "자기야. 영화 시간 다 되가는데 아직 멀었어?" 라는 말을 듣기라도 한다면 완전히 이 서비스의 NPS는 곤두박질 칠 것이다.

 

 

복잡한 혜택 수령 방법의 개선

 

유저플로우 화면에서 '바코드' 가 나오는 UI이다. 낭비되는 인터페이스가 많은 것을 볼 수 있다. 해결해야 할 문제가 많은데 공간을 활용하지 않은 것이 안타깝다. 여기에 세 가지 기능을 추가함으로서 문제를 개선할 수 있다.

• 🎥 온라인 예매 페이지
  CGV 온라인 예매 연결 페이지
  
  
• 🚧 안내 문구 및 안내 페이지 연결
  "이 바코드는 현장 결제시 이용되는 바코드입니다. 온라인 예매에 대한 설명이 궁금하실 경우 아래 링크를 이용해 주세요."라는 안내문구 및 안내페이지 연결 버튼
  
  
• 🔽 나만의 콕 변경하기 페이지 이동 버튼
  "고객님은 현재 '나만의 콕'이 여행으로 선택되어 있습니다. 영화 혜택을 누리시려면 '나만의 콕'을 여행에서 영화로 변경해주셔야합니다. 변경하러 가기 버튼

---

LG U+ 멤버스 UI 개선을 위한 페이퍼 프로토타입

 

LG U+멤버스의 홈화면에서 멤버십 CGV 무료예매 버튼을 클릭했을 때 나오는 바코드 UI에 추가적인 기능을 제작해 UX를 개선한다.

바코드 UI

---

 

1. 텍스트박스

온라인 예매 전반에 대한 안내 문구 표시 [바코드는 현장 결제를 위한 바코드 입니다. 온라인 예매를 원하실 경우 안내를 확인해주세요]

2. 링크

CGV 온라인 예매 링크 기능

3. 나만의 콕

지금 현재 유저가 설정한 나만의 콕을 확인할 수 있는 네비게이터 기능

나만의 콕 변경하기 : 버튼 기능(프로덕트 내 링크연결)

 

 

☝ 작성한 페이퍼 프로토타입을 이용해 디자이너와 효율적인 커뮤니케이션을 할 수 있다. 부가설명을 통해 해당 UX개선안의 목적을 전달하고 피드백을 받는다. 고객은 개선된 UX를 통해 온라인 예매를 전보다 쉽게 이용할 수 있고 이를 통해  MAU와 CRR을 개선할 수 있을 것이다.

 

---

 

<이미지 및 자료 출처>

기획 의도를 충실히 담은 ‘요구 사항 정의서’ 작성법

페이퍼 프로토타이핑 (프로토타입)

 

프로토타입 뜻이 뭐고 디자인 절차? [쉽게 설명]