Be Joyful!
코드스테이츠 PMB 10기 | 해본다 UX 개선. 그려본다 프로토타입. 기다려라 쿠팡이츠. 본문
배달 처돌이매니아가 직접 도전한다!
쿠팡이츠 UX 개선을 위한 페이퍼 프로토타입 그려보기
지난 과제를 통해 아래와 같이 쿠팡이츠의 나쁜 UX를 선정하고, 개선 우선순위를 아래와 같이 설정한 바 있습니다.
(Pre) 쿠팡이츠 UX/UI 개선 우선순위
1순위. 장바구니에 담은 금액을 확인하기 불편함
사용자의 행동적인 요소를 고려했을 때, 장바구니 총액을 상단에 배치한 것은 상당히 비효율적이라고 판단됩니다. 사용자는 메뉴 선택 시, 배치된 순서에 따라 상단 메인 메뉴-옵션-사이드-음료 순으로 선택하게 됩니다.
이때 중간중간 예산을 고려하여 장바구니 총액을 확인하고자 하는 니즈가 발생하지만, 총액이 상단에 위치한 경우 맨 위로 다시 올라가야 하는 번거로움이 발생합니다.
하여, 사용자의 구매 여정을 고려하여 하단에 총액을 노출하는 것이 적합하다고 판단하며, 개선이 가장 용이한 부분이라고 생각하여 1순위로 설정했습니다.
2순위. 옵션 메뉴 변경 불가능
해당 문제(?)는 경쟁사인 배달의 민족과 요기요에서도 동일하게 발생하고 있습니다. 사용성이 매우 좋지 않고 실제로 이용하면서 가장 불편했던 부분이지만, 모든 업체가 동일한 UX를 고수하고 있는 관계로 UX 개선에 어려움이 있는지 먼저 파악하는 것이 우선이라고 생각하여 2순위로 설정했습니다.
3순위. 결제 수단의 다양성 부족
결제 수단이 부족한 것은 자칫 고객 이탈로 이어질 수 있는 부분이기 때문에 중요성은 높다고 판단했으나, 결제 수단을 다양화하지 않는 것은 다분히 의도적인 목적이라고 판단하여 3순위로 배치하였습니다.
쿠팡이라는 거대한 기업이 간편 결제를 도입할 기술이 없거나, 능력이 없는 것은 아닐 것이므로, 쿠페이 이용률을 향상하기 위한 의도적인 전략이라는 판단 하에 우선순위에서 배제하였습니다.
오늘은 위 내용 중 가장 손쉽게 적용할 수 있는 1순위 개선안을 페이퍼 프로토타입으로 그려보고자 합니다. 2순위와 3순위의 경우 구현하기에 기술적/전략적 문제가 있다고 판단하여 이번 개선안에서는 제외하였습니다.
그리고 이후 저는 쿠팡이츠를 다시 한 번 사용하며 개선 희망사항을 추가로 발견할 수 있었는데요. 그리하여 다음과 같은 총 세 가지 UX 개선안을 페이퍼 프로토타입으로 그려보도록 하겠습니다.
쿠팡이츠 최종 UX/UI 개선점
- 장바구니에 담은 금액을 확인하기 불편하다.
- 카테고리를 한눈에 보기가 어렵다.
- 내가 원하는 메뉴의 리뷰만 보고 싶다.
카트 총액을 실시간으로 반영하기 |
아래와 같이 현재 쿠팡이츠는 카트에 담긴 메뉴의 가격이 상단에 노출되고 있습니다. 하여, 옵션 메뉴를 추가하게 되면 실시간으로 반영되는 총액을 확인할 수가 없어 주문 단계에서 아주 불편한 경험을 할 수 있습니다.
위 이미지의 사례처럼 기본 메뉴인 마라탕을 선택하고 화면을 아래로 이동하여 옵션 메뉴를 선택하게 되면, 총액이 보이지 않아 최종적으로 카트에 담긴 금액이 얼마인지 알 수 없습니다.
하여 위와 같이 메뉴를 하나 선택할 때마다 추가된 가격이 하단 고정바에 업데이트 되도록 개선안을 그려보았습니다. 마라탕처럼 옵션 메뉴를 다양하게 추가하는 메뉴의 경우, 다음과 같이 총액을 실시간으로 확인할 수 있다면 고객이 의사결정하는 데 도움이 될 수 있습니다.
카테고리를 한눈에 볼 수 있도록 개선하기 |
<기존>
기존 홈화면에서 볼 수 있는 카테고리는 한눈에 보기 어렵고, 계속해서 화면을 넘겨야만 모든 카테고리를 확인할 수 있어 원하는 카테고리를 찾는 데 어려움이 있었습니다.
이를 개선하기 위하여 카테고리를 일부만 노출하고 우측에 '더보기' 기능을 추가했습니다. 그리고 이 버튼을 클릭하면 앱 하단부에 있는 <검색> 메뉴로 연결되어 전체 카테고리를 볼 수 있도록 프로세스를 구성했습니다. 기존에 존재하는 기능의 경로를 다양화함으로써 고객이 모든 기능을 활용할 수 있도록 구성하고자 했습니다.
보고 싶은 리뷰만 골라서 볼 수 있도록 개선하기 |
많은 사람들이 배달 음식을 주문할 때 리뷰를 참고하곤 하는데요. 쿠팡이츠뿐만 아니라 모든 경쟁 배달사에서도 가게별 리뷰는 제공하지만, 해당 가게에서 내가 원하는 메뉴의 리뷰만 골라서 볼 수는 없습니다.
위 사진을 보면 입문용 마린이 마라탕이라는 메뉴의 후기가 보입니다. 하지만 제가 먹고싶은 메뉴는 쫀득쫀득 분모자 마라탕이기 때문에, 해당 메뉴의 리뷰를 찾기 위해서는 원하는 후기가 나올때까지 끊임없이 스크롤을 내리는 방법밖에는 없습니다.
이러한 문제를 개선하기 위하여 메뉴별로 후기를 필터링 할 수 있는 기능을 추가했습니다. 주문 단계에 있던 카테고리 데이터를 그대로 활용하여 후기 열람을 원하는 메뉴를 선택할 수 있도록 합니다. 그리고 리뷰 확인 버튼을 누르면 주문한 메뉴에 해당 메뉴가 포함된 후기만 필터링 될 수 있도록 하는 기능입니다.
이로써 원하는 메뉴의 후기를 찾기 위해 시간을 허비하는 일을 방지하여, 고객의 빠른 의사결정을 도울 수 있습니다.
오늘은 지난 과제에서 살펴본 쿠팡이츠의 UX 개선점들을 페이퍼 프로토타입으로 직접 그려보는 시간을 가져보았습니다. 이러한 자료만으로 뚝딱 앱이 개선될 수 있다면 너무나 편하고 좋겠지만 그렇지는 않습니다.
프로토타입은 서비스 기획의 최종 결과물이 아닌, 효율적인 작업을 위한 소통의 도구에 가깝기 때문입니다. 이는 개발 전과 기획의 단계에서 우리가 미처 생각지 못한 부분이나 실제 사용자의 플로우를 파악함으로써, 개발 단계에서 발생할 수 있는 리스크를 방지하는 데 활용될 수 있습니다. 또한, 이 과정에서 서로간의 원활한 피드백을 통해 개발에 착수하기 전 수정/보완의 단계를 거치며 서비스 기획 내용을 검증할 할 수 있습니다.
마무리
단순히 머리로 구상한 아이디어를 구체화하고, 이를 모두가 알기 쉽게 그려내는 것이 마냥 쉬운 일이 아님을 깨달았습니다. 프로토타입은 궁극적으로 개발 전 단계에서 시간, 비용, 인적 자원 등의 리소스를 최소화하기 위하여 사용되는 것이니 만큼, 이 단계에서 과한 리소스를 투입하지 않도록 주의하며 신속하고 효율적으로 작업하는 연습을 해야겠다는 생각을 했습니다. 퐈샤!
'PMB 10 Daily - 매일매일 성장기록' 카테고리의 다른 글
| 코드스테이츠 PMB 10기 | 주린이의 마음을 설레게 한 '토스증권'의 그로스해킹 전략 (2) | 2022.02.17 |
|---|---|
| 코드스테이츠 PMB 10기 | Figma로 그려보는 '오늘회'의 꿀조합 후기 - 뭐니뭐니 해도 음식은 조합이지 (0) | 2022.02.15 |
| 코드스테이츠 PMB 10기 | 국내 최초 속옷 구독 시대를 연 '인더웨어' - 유저의 심리를 잘 파악하고 있을까? (0) | 2022.02.12 |
| 코드스테이츠 PMB 10기 | 쿠팡이츠, 니가 그렇게 빨라? (0) | 2022.02.11 |
| 코드스테이츠 PMB 10기 | 간편식 플랫폼 <윙잇>의 KPI는? (0) | 2022.02.07 |
