배달의 민족이 11년 만에 첫 화면을 바꿨대
UX 디자인 개선(이 될) 사례[코드스테이츠PMB 7기]
"배달의 민족이, 첫 화면 구성을 전면 탈바꿈했다."
각종 인터넷 기사에도 오를 정도의 핫한 이슈로 다루어지고 있다. 나 역시 IT 서비스 관련한 공부를 하고 있는 학생으로서, 배달 시장을 개척, 활성화하며 1위를 거머쥐고 있는 배달의 민족이 첫 화면을 대체 "어떻게", 그리고 "왜" 바꾸었을지 궁금하다. 과연 어떤 변화가 있는지 알아보자.
과제 선정 기준은 UX 개선 사례인데, 사실 개선 사례라고 할 수 있을지는 아직 잘 모르겠다. 그러나 IT 서비스계의 선두주자 배달의 민족이 첫 화면을 전면 변경하는 것은 긴 논의와 고민을 거쳐 내린 결정이라고 생각했다. 따라서 그러한 사고를 유추해보는 것 자체로 의미가 있다고 느껴져 주제로 선택해보았다.
** 코드스테이츠 프로덕트 매니저 부트캠프 7기를 수강하며, 과제로 작성하였습니다.
혹시나 정보의 오류, 의견의 비약이 있다면, 미리 정중히 사과드리겠습니다.
게시물과 관련하여 의견이 있으시다면, 자유롭게 남겨주시거나 연락 주시길 환영합니다.
배달의 민족, 전체적으로 어떻게 바뀌었나?
배달의 민족 앱 첫 화면의 전체적인 변화전체적인 서비스 첫 화면이 눈에 띄게 변하였다.
- 한눈에 봐도 구조가 눈에 쉽게 보인다.
- 버튼 간, 구역 간의 구분이 확실해졌다.
- 글자, 일러스트, 버튼(카드) 크기가 모두 커졌다.
- 플랫(Flat)한 느낌이 나며, 질감이 매끄럽고 경계가 간결하다.
왜 이렇게 바꾸었을까?
배민의 고객이 기존 화면에서 느꼈을 어떤 고충을 해결하기 위해 새로 구성한 화면일까를 역발상 하니,
아래 2가지 고충이 떠올랐다.
1. "배민의 고객은 글씨와 그림이 잘 안 보여서, 원하는 버튼을 탐색하느라 피곤하고 답답함을 겪었다."
☞ 카피의 크기, 일러스트의 크기, 버튼의 크기가 모두 커져서 원하는 버튼을 찾는 데 필요한 시간과 노력이 대폭 감소한다.
2. "배민의 신규 고객은 어떤 것이 버튼인지 구분이 안되어서, 내가 어떻게 주문해야 하는지 당혹스러웠다."
☞ 첫 방문 시, 눈에 잘 들어오는 구조로 인해 긍정적인 인상으로 서비스를 시작한다.
☞ 버튼에 경계가 있고, > 표시가 생겨서 이 버튼을 통해 화면이 전환됨을 직관적으로 알 수 있다.
배달의 민족, 상단 고정 바는 어떻게 바뀌었나?
배달의 민족 첫 화면의 상단 GNB 변화상단 GNB(Global Navigation Bar)는 눈에 띄게 민트색으로 색상을 바꾸었다.
또한, 기능 상 4가지 변화가 보였다.
① 알림: 좌 → 우 이동
② 검색: 우 → 하단 이동 & 창 생성, 확대 & 카피 추가 & 기존 (배달, 포장/방문) 배너 삭제
'검색'은 스크롤을 내리면 위로 사라지므로 엄밀히 말해 GNB의 구성 요소라고 볼 수 없지만, 첫 화면 구성 상 같이 묶어서 알아보았다.
③ 서비스 전체보기: 중앙 메인 → 좌측 상단 이동 & 창 삭제, 버튼 생성, 축소
④ 마이 페이지: 우측 하단 → 우측 상단 이동
왜 이렇게 바꾸었을까?
1. "배민의 고객은 비비큐 치킨을 시키고 싶은데 검색창이 안 보여서, 검색 버튼을 찾기 위해 한참을 들여다봐야 해서 불편했다."
☞ 검색창을 추가하고, 카피로 '찾는 맛집 이름이 뭐예요?'라고 하며 검색 기능을 보다 활성화했다.
☞ 상단 배너의 전체 색상을 민트색으로 하고, 그 안에 하얀 검색창을 두어 시각적인 대비 효과를 통해 검색 기능을 보다 활성화했다.
2. "배민의 고객은 배민의 음식 카테고리, 서비스 카테고리가 혼재되어 있어서, 배민의 서비스 구조를 이해하기 어려웠다."
☞ 서비스 전체보기 창을 좌측 상단에 추가하였다. 혼재되어 있던 서비스 카테고리 하에, 음식 카테고리를 두었다. 고객은 배민의 서비스 구조를 보다 잘 이해할 수 있었다.
배달의 민족, 메인 화면은 어떻게 바뀌었나?
기존 메인에서는 대부분의 요소가 삭제되었다.
① 프로모션 배너: 삭제
② 카테고리: 주요 서비스는 버튼(카드)으로 생성 & 나머지는 삭제
더불어, 기존 메인은 버튼 클릭 후의 두 번째 전환 화면으로 단계가 늦춰졌다.
변화된 화면에서 '배달' 버튼을 클릭하면, 기존의 메인 화면으로 전환되었다.
바뀐 메인에서 스크롤을 내려보니 2가지 변화가 더 보였다.
① 프로모션 배너: 기존 메인 상단에 13개의 배너 중, 3개만.
② 최근에 주문했어요: 최근 6개월 간 이용한 최대 30곳의 가게 / B마트 최근 상품 내역 중 주문 가능한 상품 확인 가능.
왜 이렇게 바꾸었을까?
1. "배민의 고객은 급하게 B마트를 이용하려는데 첫 화면에 B마트가 안 보였고, 어디 있는지 탐색하느라 어려움을 겪었다."
2. "배민의 고객은 고생하는 동생에게 배민 상품권을 선물하려는데 선물하기가 안 보였고, 어디 있는지 탐색하느라 어려움을 겪었다."
☞ 배달 외에 주요 서비스인 쇼핑라이브, 선물하기, B마트, 전국 별미 버튼의 크기를 키워 들어오자마자 탐색 없이 찾을 수 있도록 했다. 배달 외 다른 서비스에 익숙하지 않지만, 사용하려던 고객이 보다 쉽게 서비스를 이용할 수 있다.
3. "배민의 고객은 맛있었던 탕수육을 재주문하려는데 주문 내역을 찾지 못해, 비슷한 다른 가게에서 주문했고 만족스럽지 못했다."
☞ 스크롤 약간만 내렸을 때, 최근 주문 내역 블록을 만들었다. 고객은 내가 최근에 시켰고, 만족스러웠던 가게를 쉽게 찾을 수 있다.
사실 나는 배민의 기존 첫 화면이 usable하지 않다고 생각했었다.
1. B마트를 주문하려다가 대체 어딨는지 헤맸고,
2. 작은 일러스트가 잘 구분되지 않았었고,
3. 음식 카테고리가 B마트, 전국 별미, 쇼핑라이브 등의 서비스와 함께 있는 게 어색했다. (욱여넣은 느낌.)
그럼에도 배달의 민족이 있어야만 배달 음식을 다양하고 쉽게 먹을 수 없으니 기꺼이 적응해서 사용하였다.
배달의 민족은 첫 화면에서 크게 4가지를 변경한 것으로 보인다.
1. 검색 활성화
2. 경계 활성화, 디자인 단순화, 버튼 확대
3. 서비스 선택 후, 음식 카테고리 선택으로 서비스를 구분
4. 재주문 활성화
그중에서도 3번이 가장 큰 변화였다. 이 변화의 장점과 단점을 보면,
- 장점: 서비스를 잘 구분한 카테고라이징이 되었고, 배달 외 서비스 이용자 경로가 비교적 확실해졌다는 점.
- 단점: 이로 인해 음식 주문이라는 메인 서비스는 하나의 depth가 추가되었다는 점.
과연 배달의 민족의 11년 만의 첫 화면 개혁은 성공적으로 끝날 수 있을까?
스타벅스 앱도 처음 화면을 전체적으로 바꾸고, 색상과 사용성 문제가 제기되었지만, 다들 적응해서 잘 쓰고 있다. 배달의 민족도 적응 기간이 필요하겠지만, 결국 유저들은 몇 번의 사용 후에 익숙해질 것이라고 생각한다. 스타벅스와의 차이점은, 쿠팡이츠라는 배달에 올인한 성장 중인 경쟁사가 있다는 것 아닐지. 그렇지만 배달 외에 다른 서비스를 함께 선두로 내세우며 '푸드 슈퍼 앱'이 되려는 배달의 민족은, 역시 쿠팡이츠와의 차별화를 보여주고 있는 것이 보인다. 푸드 슈퍼 앱이 되기 위한 배민의 UXUI 변화는 성공적이길 기대한다.
