안녕하세요, 꾸우._. 입니다. 이번주에는 지난 과제들에서 선정한 MVP에 대한 UX 개선 및 개발해보도록 하겠습니다.
📌 시작 전 워밍업
현재 하고 있는 패스오더 외에 다른 프로덕트의 UX에 대해 분석해보고, 개선안을 정리해보겠습니다.
여기서 제가 선정한 프로덕트는 제가 약 6개월 가량 실사용해본 음원 스트리밍 플랫폼인 'FLO' 입니다.
💡 FLO의 좋은 UX
FLO에서는 본인의 선호하는 음악 장르, 아티스트 등 음악 취향을 설정할 수 있는 기능이 제공되는데, 이런 사용자의 설정과 사용자가 최근에 들은 음원을 바탕으로 여러 기능을 제공합니다.
- [홈] 탭의 '좋아할 만한 아티스트 MIX'
- FLO를 켜면 제일 먼저 나오는 메인 페이지에서 최상단 영역에 위치한 기능입니다.
- 배너 형태로 구성되며 인디케이터 구성은 아래와 같습니다.
- FLO 차트 (사용자 취향 MIX)
- 나만 듣는 테마리스트
- 좋아할 만한 아티스트 MIX
- 좋아할 만한 아티스트 MIX
- 좋아할 만한 아티스트 MIX
- 음악 고르기 귀찮다면 FLO가 골라드려요 (빠른 재생)
- 사용자가 설정한 음악 취향이 반영된 실시간 음원 차트를 비롯하여 랜덤한 테마 리스트와 좋아할 만한 아티스트의 음원들을 랜덤으로 믹스한 플레이리스트, 그리고 사용자가 플레이리스트를 만들거나 고르기 귀찮을 때 플로에서 랜덤으로 플레이리스트를 만들어 빠른 재생하는 것까지 제공합니다.
- [홈] 탭의 '좋아할 만한 최신 앨범'
- 또한 사용자의 선호 음악 데이터를 바탕으로 최근 발매된 앨범들 중 사용자가 설정한 선호 장르 및 아티스트 위주의 앨범들을 선별하여 별도의 리스트로 제공합니다.
위의 두 기능들을 보고 사용자의 취향을 최대한 존중하고 반영하고자 하여 사용자 맞춤형이라는 점을 통해 사용 경험을 긍정적으로 극대화시키고자 한 것 같다는 생각이 들었습니다.
💡 FLO의 아쉬운 UX
다만, 이런 플로를 사용해보면서 다소 아쉬운 부분도 존재했었는데요. 그 부분은 다음과 같습니다.
- [홈] 탭의 여러 가지 플레이리스트
- 오늘 발매 음악부터 FLO 에디터 추천, 오늘의 테마리스트 등 다양한 플레이리스트를 제공합니다.
- 그러나 이 플레이리스트들은 실제로 잘 사용하지 않았고, 오히려 너무 많은 플레이리스트가 제공 되어 FLO의 메인 화면은 너무 정신없고 난잡하게 느껴졌습니다.
- [둘러보기] 탭의 FLO 차트
- 다른 음원 플랫폼과 다르게 FLO의 경우 음원 차트를 아예 별도의 메뉴탭으로 분리시켜 차트, 장르·테마, 오디오, 영상, 크리에이터 등의 하위 탭을 제공하고 있었는데, 차트의 경우 다른 음원 플랫폼처럼 메인 페이지에 제공하는 것이 아니었기 때문에 찾기 어렵다는 문제점이 있었습니다.
💡 내가 생각한 FLO의 UX 개선
제가 FLO를 개선하고자 한 요소는 메인 페이지에 대한 사용자의 '흐름' 개선을 위한 배치 변경입니다.
- [홈] 여러 가지 플레이리스트 → FLO 차트 배치
- [둘러보기] FLO 차트 → 여러 가지 플레이리스트
여러 가지 플레이리스트와 [둘러보기] 탭에 있는 장르·테마가 플레이리스트 제공에 있어 다소 겹치거나 비슷한 부분이 있다고 느꼈습니다. 그래서 좋아할 만한 아티스트 믹스, 최신 앨범을 제외한 나머지 추천 플레이리스트들은 [둘러보기] 탭에서 볼 수 있도록 따로 빼는 것이 좋겠다고 생각했습니다.
보통 음원 플랫폼 활용 시 사용자들이 제일 많이 확인하는 것은 최신 앨범, 그리고 현재 시각 기준으로 집계된 음원 차트입니다. 그래서 [둘러보기] 탭에 있던 FLO 차트와 해외 차트 등을 [메인]으로 옮겨와 자주 사용하는 기능들은 한 페이지 안에서 확인하고, 필요에 따라 플로에서 보여주는 다양한 플레이리스트를 사용할 수 있게끔 하는 것이 UX개선에 필요하다고 생각해 개선안으로 선택했습니다.
📌 패스오더 핵심 기능 정의하기
이제 본론으로 돌아가 2주차에 선정했던 MVP를 바탕으로 패스오더의 PRD (Product Requirements Documents, 제품 요구사항 정의서)를 작성해보겠습니다.
보다 쉬운 이해를 위해 2, 3주차 과제글을 참고하시길 권장드립니다:)
[코드스테이츠 PMB 18기] W2. 고객의 눈으로 바라본 패스오더의 솔루션과 나의 개선안
안녕하세요, 꾸우._. 입니다. 이번주에는 '패스오더' 에 대해 고객의 관점에서 느꼈을 문제 상황에 대해 분석하고, 개선안을 정립하여 MVP에 맞춰 정리해보겠습니다. 설명에 앞서 추후 과제 진행
jkkou.tistory.com
[코드스테이츠 PMB 18기] W3. 패스오더의 BMC와 OKR 만들어보기
안녕하세요, 꾸우._. 입니다. 이번주에는 지난주 패스오더 MVP 선정에 이어 BMC (Business Model Canvas, 비즈니스 모델 캔버스)를 통한 비즈니스 모델 분석과 그에 따른 OKR(Objective Key Results, 목표 및 결과
jkkou.tistory.com
💡 내가 생각했던 MVP 아이디어
제가 2, 3주차 과제를 진행하면서 필요하다 느꼈던 MVP는 총 4가지였습니다.
- 내 포인트, 스탬프 등 적립 영역을 확인하기 위한 프로필 영역
- 사용자가 자주 먹는 메뉴
- 사용자가 자주 가는 매장
- 각 카페 매장별 접수된 주문 건수 조회
💡 기능 정의하기
선정한 MVP에 대한 리스트를 작성 후, 가장 최우선이 되어야 할 MVP를 선정했습니다.
- 리스트 업
- 프로필 영역
- 목적 : 내 포인트, 스탬프 등의 적립 내역과 알림 확인이 메인페이지에서 배너 사이에 묻혀 발견하기 어려웠던 문제점을 개선하기 위함
- 세부 요소
- 사용자 정보
- 사용자의 주문 내역
- 사용자의 매장별 적립 내역
- 자주 먹는 메뉴
- 목적 : 사용자가 자주 먹거나 선호하는 메뉴를 한 눈에 파악하고, 바로 주문·결제를 할 수 있도록 하기 위함
- 세부 요소
- 사용자 정보
- 사용자의 주문 내역
- 자주 가는 매장
- 매장 정보
- 매장별 메뉴 주문 횟수
- 자주 가는 매장
- 목적 : 사용자가 주로 방문하는 매장을 한 눈에 파악할 수 있도록 하여 선호하는 매장을 일일이 찾을 필요 없이 바로 주문·결제를 할 수 있도록 하기 위함
- 세부 요소
- 매장 정보
- 사용자 정보
- 사용자의 주문 내역
- 사용자의 매장별 주문 횟수
- 사용자의 매장별 적립 내역
- 각 카페 매장별 접수된 주문 건수 조회
- 목적 : 원하는 수령 시간을 설정하고 주문 후 방문해도 해당 매장에 주문이 밀렸을 경우 대기 시간이 발생하는 문제점에 대한 개선
- 세부 요소
- 매장 정보
- 수령 가능 시간
- 패스오더를 통해 접수된 매장별 주문 건수
- 프로필 영역
- 기능 정의 및 필요한 콘텐츠
- 프로필 영역
- 내 포인트/스탬프 적립 내역, 내 알림을 확인할 수 있는 기능입니다.
- 프로필 박스 형태로 컴포넌트를 나누어 명확하게 구분짓습니다.
- 자주 먹는 메뉴
- 사용자의 주문 내역을 기반으로 하여 동일한 메뉴 주문 횟수에 따라 메뉴를 정렬하여 리스트를 제공하는 기능입니다.
- 메뉴 리스트의 더보기 버튼을 통해 상세하게 확인할 수 있습니다.
- 재주문 버튼을 제공하여 원활하게 주문·결제를 진행할 수 있도록 합니다.
- 자주 가는 매장
- 사용자의 주문 횟수 및 주문 내역을 기반으로 하여 주문 횟수 순으로 방문한 매장들을 정렬하여 리스트로 제공하는 기능입니다.
- 기존의 매장 리스트들과 같이 가로 슬라이더 형태의 리스트로 제공합니다.
- 각 카페 매장별 접수된 주문 건수 조회
- 매장 리스트 제공 시 각 매장에서 접수된 메뉴 주문 건수를 조회할 수 있도록 하는 기능입니다.
- 매장명 아래에 있는 매장과의 거리 값 옆에 ‘현재 n건’ 문구를 기재하여 매장 리스트를 확인할 때 함께 볼 수 있도록 제공합니다.
- 프로필 영역
- 내가 생각한 MVP 우선순위
- 1순위 : 매장별 접수된 주문 건수 조회
- 2순위 : 자주 먹는 메뉴
- 3순위 : 프로필 영역
- 4순위 : 자주 가는 매장
실사용한 경험을 바탕으로 흐름을 분석하고, 그에 따라 가장 불편하게 느꼈던 부분에 대한 개선을 우선적으로 시행하고자 했습니다.
📌 패스오더 PRD 구성하기
위에서 1순위로 선정한 MVP인 '매장별 접수된 주문 건수 조회' 기능을 실서비스에 구현해 배포한다는 생각으로 아래 요소를 정리해보았습니다.
💡 요약 및 배경 (Summary and Background)
- 패스오더에서 기존에 주문·결제 진행 시 방문 수령 시간을 설정하고 매장을 방문해도 해당 매장에 주문이 밀려있거나, 갑작스럽게 여러 건의 주문이 접수된 경우 원하는 시간에 수령하기 어렵고, 오히려 매장에서 대기해야 하는 상황이 종종 발생합니다.
- 이는 출퇴근 시 직장인이 사용할 경우 출퇴근 시간에 지각할 수도 있다는 사용자의 불안감을 유발하며, 사용자가 주문 취소를 하고 그냥 가야 할 상황까지 초래할 수 있습니다.
이 부분은 3개월 간 실사용했던 저 역시도 종종 발생했던 경험이었으며, 다른 사용자의 후기를 찾아보며 단순히 개인의 문제가 아닌 서비스를 사용함에 있어 많은 패스오더 사용자들에게 충분히 발생할 수 있는 상황이라고 생각했습니다.
💡 주요 사용자 (Target Users)
- 앞선 사례를 통해 해당 기능에 대한 주요 사용자는 매일 아침 출퇴근 시간마다 커피로 하루를 시작하려는 직장인들로 선정했습니다.
💡 핵심 사용자 여정 (Critical User Journeys (CUJs))
해당 기능이 도입 되었을 때의 UX를 흐름대로 정리해보았습니다.
- 패스오더 어플을 실행한다.
- 사용자의 가까이에 있는 매장 리스트를 확인한다.
- '현재 {주문}건' 이라는 문구를 통해 각 매장별로 현재 접수된 주문 건수를 확인한다.
- 접수된 주문 건수가 없거나, 1~2건 이하인 매장을 선택한다.
- 주문 시 매장에 도착할 시간을 예상하여 수령 시간을 설정 후 결제한다.
- 매장 방문 시 음료가 준비되어 있다.
- 사용자는 음료를 바로 받아들고 다시 출근길에 오른다.
이처럼 기존에 제공되고 있는 매장 리스트의 형태에서 '현재 {주문}건' 이라는 문구를 통해 사용자에게 이 매장에 접수된 주문 건수가 어느 정도인지를 보여줌으로써 사용자가 원하는 시간에 수령할 수 있을지 스스로 판단하여 출퇴근 시간에 지장 없이 원하는 음료를 사갈 수 있도록 합니다.
💡 기능적 요구사항 (Functional requirements)
해당 기능의 상세 기획안입니다.
- 매장 리스트에 문구 추가
- 현재 제공되는 매장 정보 : '매장명', '{n}분 후 수령', '{사용자의 위치와 매장 간 거리}m' 등
- 여기서 '현재 {주문}건' 이라는 문구를 추가한다.
- 매장 정보 데이터 추가
- 접수된 주문 건수 정보는 매장 점주가 진행 중인 주문 건수를 기록한다.
- 해당 매장에 접수된 주문 건수를 카운트하여 변수 {주문}에 넣어준다.
- '현재 {주문}건'이라는 문구를 매장 사진 위에 아이콘의 형태로 기재한다.
- 매장 리스트 조회 시 보여지는 '{사용자의 위치와 매장 간 거리}m' 옆에 해당 문구를 제공함으로써 사용자가 리스트 조회 시 한 눈에 보고 파악할 수 있도록 한다.
💡 지원 문서 (Supporting documents)
- 백엔드 : API 정의서
- 매장에 주문이 접수될 때 주문 건수 추가
- HTTP Method : POST
- URI : /store-server/order/add
- Request
- Header : jwt (사용자 정보)
- Body : 메뉴 이름, 주문한 음료 갯수 등
- Response
- Header : -
- Body : 주문 정보, 현재 접수된 주문 건수 등
- 접수된 주문 건수 조회
- HTTP Method : GET
- URI : /store-server/order/get
- Request
- Header : 매장 정보 (jwt)
- Body : -
- Response
- Header : -
- Body : 접수된 주문 리스트, 주문 정보 등
- 처리된 주문 건수 완료 처리
- HTTP Method : PUT
- URI : /store-server/order/complete
- Request
- Header : -
- Body : 사용자 정보, 주문 정보, 현재 접수된 주문 건수 등
- Response
- Header : -
- Body : 현재 접수된 주문 건수 (남은 주문 건수) 등
- 완료된 주문 리스트에서 삭제
- HTTP Method : DELETE
- URI : /store-server/order/get
- Request
- Header : -
- Body : 주문 정보, 현재 접수된 주문 정보 리스트 등
- Response
- Header : -
- Body : 아직 완료 처리 되지 않은 주문 정보 리스트 등
- 매장에 주문이 접수될 때 주문 건수 추가
- 프론트엔드 : 화면정의서 또는 와이어프레임
- 보여지는 매장 리스트에서 간략하게 보여지는 매장 정보 영역에 '현재 n건' 문구 추가 후 배치
- 여기서 문구의 글씨체 굵기, 색상 등을 조절
- 백엔드와 API 연결 상태 로컬 서버에서 테스팅
- 배포 전 기존 버전에서 모달창 팝업을 통해 해당 기능 추가에 대한 공지
- 보여지는 매장 리스트에서 간략하게 보여지는 매장 정보 영역에 '현재 n건' 문구 추가 후 배치
💡 배포 계획 (Go-to-market)
배포의 경우, 현재 기존에 제공되고 있는 프로덕트이기 때문에 업데이트 버전을 사용자에게 제공한다는 느낌으로 작성해보았습니다. 사실이 아닌 서비스 분석 및 개선에 따른 개인의 견해이니 가볍게 봐주시면 되겠습니다.
- 버전 : 2.33.3 (현재 2.33.2)
- 출시 일정 : 2023. 05. 11 (목)
- 고려 사항
- 업데이트 전 프론트엔드 측에서 모달창 팝업을 통해 사용자에게 기능 추가에 대한 것을 알리며, 상세한 내용은 공지사항 페이지로 넘어가서 볼 수 있도록 한다.
- 기능 업데이트 전 매장 점주들에게 매장 정보 제공과 관련된 약관, 정책 등을 확인한다.
- 정보 제공 사항에 매장의 주문 건수와 관련된 정보가 없는 경우, 약관 변경을 진행하고 매장 점주들에게 공지사항 또는 이메일로 알린다.
- 매장 측 시스템에서도 해당 기능이 반영된다는 것을 공지사항을 통해 알린다.
📌 MVP 화면의 와이어프레임과 스토리보드
해당 기능을 추가한 와이어프레임을 통해 먼저 뼈대를 잡은 후, 흐름에 따른 스토리보드를 작성해보았습니다.
💡 와이어프레임
보여지는 매장 리스트에서 매장 사진과 매장명, 예상 수령 가능 시간, 거리 등이 표시되고 있는 영역에서 거리 옆에 '현재 {주문}건'을 넣어 접수된 주문 건수에 대한 정보를 사용자에게 추가로 제공함으로써 현재 각 매장에서 얼마나 주문이 접수되어 있고, 밀린 주문이 있는지 등을 파악할 수 있습니다.
또 매장을 선택했을 때 나타나는 매장 정보 페이지에서 기존에 있던 가게 사진 썸네일 위에 있던 할인, 적립, 수령 가능 시간 등의 정보 아이콘들에 '현재 {주문}건' 이라는 문구의 아이콘을 추가로 더해 해당 매장의 접수된 주문 건수에 대해 직관적으로 보일 수 있도록 합니다.
💡 스토리보드
위에서 보여드린 와이어프레임들을 사용자의 흐름을 바탕으로 작성한 스토리보드입니다. 기존 프로덕트에 '현재 접수된 주문 건수 조회' 기능에 의한 UX개선을 목적으로 진행하여 기존 프로덕트와의 차이점을 크게 체감하지 못할 수 있습니다.
(그래서 제가 선정한 MVP를 어디에서, 어떻게 제공할 것인지에 대해 스토리보드에 강조 표시를 해두었습니다.)
📌 정리
이번주에 배운 와이어프레임과 기존에 알고 있던 프로토타입, 스토리보드, 화면 설계서 등의 개념에 대해 구분이 되질 않았는데 이번주 학습과 과제물 작성을 통해 몸소 체감하고, 내재화할 수 있었던 시간이었습니다. 이번주에 배운 것들을 바탕으로 기존에 경험했던 프로젝트들에 대해 역설계 및 수정을 해보면서 만들어 놓은 포트폴리오들을 다시 검토해봐야겠습니다.
적극적인 피드백은 언제나 환영입니다:)