UX디자이너와 소통 전에
Figma공부하세요.
PM이라면,[코드스테이츠PMB 6기]
Good UX, Bad UX 올리브영의 조회수가 생각보다 높아서, 요즘 UX디자인에 관심이 많은 사람이 많다는 생각이 들었다. 나는 PM으로서 디자이너, 개발자분들과 협업할 때 어버버버 하지 않기 위해 오늘은 Figma라는 디자인 툴을 사용해서 포스타입의 APP서비스를 디자인하고, UX개선과 A/B테스트 계획까지 다뤄보겠다.
포스타입_POSTYPE
국내 최대 독립 창작 콘텐츠 플랫폼
포스타입은 2015년 콘텐츠 거래와 후원이 가능한 블로그 서비스로 시작해서, 지금은 매달 400만명 이상이 방문하고, 창작자 1.4만명 이상이 수익을 올리는 창작자와 팬의 네트워크로 성장했습니다.
포스타입을 통해서 창작자들을 본인 작품을 꾸준히 팬들에게 노출시킬 수 있고, 작품을 유료화하거나 정기 구독 및 후원하기 기능을 통해 수익을 창출할 수 있습니다.
사용자 입장에서는 웹툰부터 시작해서 에세이, 시, 디자인, 일러스트, 사진 등등 다양한 콘텐츠를 포스 타입 단 하나의 플랫폼에서 모두 즐길 수 있습니다.
User Story
어떤 고객이 포스타입을 사용할까요? 포스타입 같은 경우에는 고객이 이용자와 창작자를 모두 포함하는 개념입니다. 그래서 이번 User Story에서는 두가지 경우 모두를 살펴봤습니다. User Story를 작성하는 이유는 서비스의 기능을 추가하거나 삭제하기 전에 우리 제품의 정확한 사용자를 정의하고 그들이 우리 제품을 이용하는 이유와 불편함을 느끼는 요소를 정리하기 위해서 입니다. 정확한 UserStory가 정해지지 않은 채로 제품 개발을 진행하게 되면 대단한 기술 멋진 UX,UI가 있더라도 아무도 사용하지 않는 제품이 될 수 있기 때문에 꼭 진행해야하는 단계입니다.
포스 타입에는 다양한 콘텐츠를 한 번에 볼 수 있다던데, 궁금하다!
나의 작품을 통해 수익을 얻을 수 없을까?
내가 좋아하는 작가님도 포스 타입에 계실까? 아프리카 방송처럼 후원해보고 싶다...!
IOS에서 포인트가 없을 때 후원하기나 구매하기에서 바로 충전할 수 없나? 불편하네..
창작자
수익구조를 만들기 어려운 창작자들은
본인의 창작물로 수익을 얻기 위해
포스타입을 사용할 것이다.
이용자
다양한 컨텐츠를 소비하는 고객들은
다양한 장르의 작품을 하나의 플랫폼에서 보기 위해서
포스타입을 사용할 것이다.
Lo-Fi
User Story를 해결하기 위한 핵심 기능과 Flow를 파악하고, 화면 흐름을 종이에 간단히 그려 봅니다.
포스 타입에서 사용자가 작가를 후원하고, 작품을 구매하는 과정을 선정해서 APP에서는 어떻게 실행 되는지 살펴보고, Lo-Fi 단계의 wireframe을 작성하고, Figma를 사용해서 Hi-Fi 수준까지 wireframe을 디벨럽 해보려고 합니다.
개선이 필요한 불편한 UX는 사용자가 포인트 부족화면에서 포인트 충전을 바로 실행 할 수 없다는 것을 발견하여서, 사용자가 IOS APP에서 포스타입을 사용할 때, 후원 구매 화면에서 바로 포인트 충전 화면으로 넘어갈 수 있는 CTA를 하나 추가하려고 합니다.
Figma를 활용해서 디자인 전 Lo-Fi 수준의 와이어프레임
Lo-Fi는 wireframe을 제대로 작성하기 전에 필요 기능과 흐름을 간편하게 설정하고 공유하기 위해 간단하게 스케치하는 수준의 Wireframe을 얘기합니다.
High-Fi
피그마를 이용해서 포스타입 어플에서 유저가 작품을 선택하고 후원 혹은 작품을 구매하는 과정을 디자인해봤습니다. 피그마를 처음 다루는 거라 몇 장 그리는데도 많은 시간을 들이게 됐는데, 앞으로 프로젝트를 진행할 때 서비스의 프로토타입을 제작하는 데 있어서 꼭 필요한 기술이라고 생각하고 많이 연습해야겠습니다.
처음으로 완성해본 고객 결재 테스크 UX Flow wireframe... 학기 말 시험이랑 여러 가지 행사가 겹쳐서 PM과제 업로드가 엄청 늦었는데, 그런 와중에도 피그마는 재밌게 실습했습니다. 작년 학교에서 진행한 팀 프로젝트에서는 어도비 XD를 사용해서 블록체인 기반의 티켓팅 서비스 프로토타입을 제작해 봤는데, XD는 너무 헤비한 느낌이 있어서 초보자가 다루기 힘든 점이 많았었는데요. 하지만 이번에 처음으로 사용해 본 피그마는 협업에도 XD보다 더 용의 하고 전체적으로 가볍게 다룰 수 있어서 사용하기에 깔끔했습니다. 왜 요즘 업계에서 피그마가 많이 사용되고 주목받는지 알게 됐습니다.
애자일하고 린하게 프로젝트를 진행할 때는 Figma가 와따입니다.
기존의 Flow에서 UX를 개선할 상황을 정의 및 분석해 보고, 이를 바탕으로 어떻게 화면을 개선할 수 있는지에 대해 자유롭게 작성해 봅니다.
UX 개선 및 A/B테스트
As is
왼쪽: 수정전
내가 돈을 쓰고 싶다는데, 충전하려면 결제 진행 페이지를 이탈해서, 충전버튼을 찾아서 따로 포인트를 충전해야하는 번거로움이 있었다.
To be
오른쪽: 수정후
결제를 진행하려는 이용자의 포인트가 부족할 경우 해당 페이지에서 바로 포인트 충전 화면으로 이동할 수 있는 CTA를 추가했다.
포스타입 어플을 사용하면서 처음에 직관적으로 어려웠던 부분은 포인트 충전이었다. 보통 후원 버튼을 누르고, 결재를 진행하려고 할 때 포인트가 부족하면 바로 충전할 수 있는 페이지로 이어지는 CTA가 존재할 법도 한데, 포스타입에서는 그런 CTA가 보이지 않았어요. 어디에 다른 기능이 있는지 모르겠지만 유저 입장에서는 결재를 하려고 설정에서 포인트 충전 버튼까지 접근해야 하는 접근성이 너무 불편했습니다.
그래서 내가 생각한 UX 디자인 개선안은 포인트 충전을 포인트 부족을 인식한 즉시 진행할 수 있도록 화면에 포인트 충전 페이지로 이어지는 CTA를 추가했습니다. 포인트 충전 프레임에 마이크로 카피는 포스타입 웹서비스에서 포인트 충전 페이지로 유도할 때 사용하는 카피와 동일한 카피를 사용했습니다.
A/B테스트 계획
가설: 포스타입 어플에서 후원 및 결재 페이지에 포인트 충전 CTA를 추가하면
후원 및 결재량이 증가할 것이다.
모수 / 샘플: 포스타입 전체 이용자 / APP업데이트 출시 이후 이용자 2,000명
검증 기간: APP업데이트 출시 후 30일
변인: A페이지 이용 고객, B페이지 이용 고객, 클릭률, 전환율
지표: 추론적 통계 기법을 바탕으로 Person 유의도 0.05 이하로 95%의 신뢰구간에서 유의미 한지 파악
프로토타임 진행 영상
참고자료
과제 후 느낀 점
완전 하얀 백지에서 시작할 때는 이걸 언제 다하냐 생각했는데, 하나하나 내가 사용하는 어플이랑 비슷하게 만들어지는 모습을 보면서 더 똑같이 만들고 싶다는 욕심도 조금 생겼던 것 같다. 어플의 클릭과 전환 또한 표현할 수 있어서(어플과 웹 모두 가능) 나중에 서비스를 기획하고 개발하기 전에 디자이너와 개발자분들과 소통할 때 요긴하게 사용할 수 있을 것 같다.
이번 포스팅을 준비하면서 디자이너와 협업하는 연습을 했다면, 다음 포스팅은 개발자와 소통하는 PM 편을 준비해야겠다.
