배달의 민족, 마플과 트리플, 마이리얼 트립!
왜, 그렇게 했을까?
사용자의 입장에서 앱을 즐기다가도, 이런건 나중에 꼭 우리 앱에도 적용해봐야지!, 이렇게 활용할 수도 있구나- 라는 기획자의 시각은 어쩔 수 없이 튀어나오는 것 같습니다 � 이번에는 조금 텀이 있었지만, 오랜만에 다시 ‘기획자의 모바일 앱 뜯어보기’를 이어가보려고 합니다.
1. 배달의 민족, 테이크아웃 리스트뷰의 변화
배달의 민족의 메인 화면은 ‘음식들의 구분’으로 구성되어 있습니다. 치킨, 한식, 중식 등으로 말이죠. 다만 이 메뉴들을 모두 ‘배달 주문’에 초점이 맞춰져 있었기에 테이크 아웃을 하기엔 불편하다는 의견들이 많았습니다. 그렇게 배달의 민족에 ‘테이크 아웃’ 메뉴가 추가 되었는데요! 테이크 아웃을 할 수 있는 음식점들을 내 위치에 따라 확인할 수 있다는 점은 좋았으나, 또 한 가지 불편했던 점은 ‘지도’를 중심으로 주변 음식점들을 확인하기 어렵다는 점! 그런데 얼마 전, 이 부분에 대한 업데이트가 진행되었습니다.
이미지를 보면 왼쪽이 변경 전 테이크아웃 카테고리 리스트의 모습이며, 오른쪽 2개의 이미지가 변경 후 모습인데요! 기존에는 단순 리스트가 디폴트였는데, 지도에 따른 뷰가 디폴트로 설정된 모습입니다. 목록은 하단으로 이동!
테이크아웃, 즉 포장에 있어서 중요한 것은 ‘동선’이라고 생각하는데요. 회사라면 잠깐 나갔다 들어와야 하기에 단순 거리가 중요하고, 회사에서 집에 가는 길이라면 내가 평소에 다니는 길 주변에 위치하고 있는지가 중요합니다. 이런 측면에서 기존 뷰는 리스트에서 특정 음식점을 선택하고, 위치 정보를 따로 확인해야 하는 불편함이 있었던 거죠. (그마저도 배달을 이유로 음식점의 위치를 제대로 알려주지 않음)
또 하나 재미있는 점은, 지도 위에 표기된 음식점들이 대표 ‘아이콘’으로 표기 되었다는 점입니다. 패스트푸드라면 햄버거로, 치킨집이라면 치킨으로, 한식은 밥 등등등! 지도만 보더라도 내가 원하는 ‘종류’를 쉽게 확인할 수 있네요. 아쉬운 점도 여전히 존재합니다. 지도에서 목록 리스트를 끌어올리면 지도 전체를 가려서 함께 보기가 불편합니다. 일부만 리스트 뷰로 활용했다면 지도와 함께 리스트를 볼 수 있었을텐데!
2. 마이 리얼 트립 – 주요 메뉴에 따른 ‘랜딩’화면 개선
마이리얼트립은 제가 국내 여행 관련 서비스 중 위시빈과 함께 가장 오랫동안 써온 서비스 중 하나입니다. 현지를 잘 아는 사람과 함께 하는 시간 단위의 투어가 매력적으로 다가왔기 때문인데요. 최근에는 ‘도시’와 ‘국가’를 중심으로 더 다양한 기능과 서비스를 계속해서 업데이트 하고 있는 상황입니다. 예를 들면 해외 숙박을 예약할 수 있는 것처럼 말이죠. 이런 마이리얼트립이 얼마 전 재미있는 업데이트를 진행했는데요. 대표적으로 ‘도시/국가’별 페이지가 개선되었습니다.
홈 화면의 역할은? 제가 담당하고 있는 서비스에서도 오랫동안 유지해온 홈 화면에 대한 변화를 준비, 업데이트를 앞두고 있는데요. 가장 많이 고민했던 부분은 앱을 인지하는 순간부터 설치까지 ‘일련의 흐름’에서 신규 사용자들이 기대할 ‘사용 목적’이었습니다. 이러한 사용 목적은 자연스레 기대와 설렘으로 이어지며, 이를 1차적으로 만족시켜줄 수 있는 공간이 바로 앱 실행 시 처음으로 보게 될 랜딩화면이라고 할 수 있습니다. 예를 들어 나는 색다른 여행을 즐기고 싶어. 라는 기대를 안고 앱을 실행했을 때, 우리는 랜딩화면 구성을 어떻게 했을 때 이들의 기대를 충족시켜 줄 수 있을까에 대한 고민과 답이 있어야 한다는 것이죠.
기존의 마이리얼트립 앱 실행 시 랜딩화면에 주목할 필요가 있습니다. 기존에도 홈 화면 내 원하는 여행지에 대한 검색이 가능했지만, 하단 탭 메뉴 중 하나였던 투어/티켓 홈에 더 힘이 쏠려 있었는데요. 이번 개편으로 인해 ‘홈’화면에서 다양한 여행지 확인 및 검색은 물론 나와 연관 있는 상품들을 확인할 수 있는 구성으로 변화가 있었습니다.
여행의 중심에는 ‘목적지’가 존재하며, 그 목적지에 다다르기까지 우리가 준비해야 할 것들이 있는데요. 파리로 여행을 떠나고 싶다, 라는 생각까지는 기본적으로 갖고 시작한다는 가정하에 마이 리얼 트립에서 중요하게 여길 수 밖에 없는 것은 그 도시에서 할 수 있는 다양한 프로그램을 제공해주는 것이 아니었을까 싶습니다. 문제는 이 과정에서 마이 리얼 트립의 ‘본질’이 흐트러지면 안된다는 점이죠. 이들의 출발 점은 패키지와 같은 획일적인 여행이 아니라, 마이 리얼 트립을 통해서만 가능한 색다른 여행 프로그램이었으니까요. 이 부분이 업데이트 된 홈화면에 잘 녹아들었는지를 확인할 수 있었던 것이 검색창과 인기 도시, 국가 하단의 주요 카테고리 구성의 첫 번째가 ‘투어/티켓’이라는 점이었습니다.
이런 맥락은 도시, 국가별 홈 화면에서도 그대로 드러납니다. (아래 이미지) 도시에서 할 수 있는, 다양한 프로그램을 더 쉽게 탐색할 수 있도록 초점을 맞추고 있기 때문입니다. 기존에는 도시에서 할 수 있는 프로그램의 ‘전체 리스트’가 가장 먼저 눈에 들어왔는데, 이제는 뭘 할 수 있지? 라는 질문에 대한 선택지를 다양하게 확인할 수 있게 되었으니 말이죠. 역시 가이드 투어는 가장 앞단에 배치되어 있고요. 조금 더 여유있어진 모습.
–
3. 마플 그리고 트리플의 센스 있는 버튼 활용
텍스트 보다는 이미지가 눈에 들어오고, 이미지 보다는 자동으로 리스트 상 재생되는 영상이 더 눈에 띄는! 컨텐츠의 타입만 놓고 보면 위와 같은 구분을 제어할 수 있지만, 모든 화면이나 상황에 있는 그대로 활용할 수 없기에! 우리에겐 또 다른 선택지가 필요한 경우가 존재합니다. 예를 들면 행동을 이끌어내는 ‘버튼’처럼 말이죠.
위 왼쪽 이미지는 ‘Marpple’이라는, 폰케이스와 티셔츠 등의 아이템을 개인이 취향껏 꾸며 구매할 수 있는 서비스입니다. 재미있는 점은, 대다수의 커머스 하단에 적용된 구매, 장바구니 버튼이 조금 다르다는 점인데요! 하단 왼쪽 구매하기 버튼에 적용된 텍스트 주위로 편집의 느낌이 강하게 적용되어 있습니다. 단순한 구매가 아니라, 이 상품은 내가 편집 또는 무언가 관여할 수 있겠구나. 라는 느낌을 주고 있기도 하죠.
오른쪽 이미지는 ‘트리플’ 이라는 서비스로 작년부터 계속 눈에 띄는 스타트업이자 서비스입니다. 여행지에 대한 다채로운 정보를 한 눈에 확인해볼 수 있으며, 연관 컨텐츠*(여행기 등)도 볼 수 있습니다. 특정 여행지에 대한 소개글을 확인하던 중, 내용 중간중간 삽입된 버튼들이 눈에 들어왔습니다. 항공권 알아보기, 호텔 더 보러가기 등의 버튼으로, 여러 내용들을 압축해서 보여줄 때 자주 활용하는 방법이기도 합니다. 별도의 컬러를 지정한 것도 아니고, 버튼 디자인 자체가 달랐던 것도 아닌데 왜 눈에 확 들어왔을까, 텍스트와 함께 사용된 이모지 덕분이었습니다. 비행기 티켓 오른쪽에는 비행기를, 호텔 오른쪽으로는 호텔 이모지를! *(이메일 주소에 이모지를 넣었을 때 오픈율이 평균적으로 상승했다는 실험과 비슷한 맥락)
각 서비스에는 중요한 전환의 과정들이 존재할텐데요. *(회원가입 전환율과 같은) 우리가 설계한대로 사용자들이 움직여준다면 더 바랄 것도 없지만, 사이사이 위 두 사례와 같은 노력과 실험이 이어지지 않는다면 전환율이 점차 높아지거나 원하는 목적을 달성하기는 어렵지 않을까요?
이전 글
(5) 이렇게 매력적인 ‘패턴’을 무료로 사용할 수 있다고? ‘Paaatterns’
(4) 올레TV 모바일, 카카오톡, 그리고 틱톡의 베타테스터까지
(3) 왜, 그렇게 했을까? – 엔팍과 네이버지도, 카이트와 스카이스캐너 그리고!
(2) 다양한 상황에 맞는 문서 포맷을 한 눈에 확인해볼 수 있는 ‘FYI’
(1) 웹, 모바일용 차트 템플릿을 무료로 사용할 수 있는 ‘CHARTS FOR SKETCH’
한성규님의 ‘지금 써보러 갑니다‘에 게재된 글을 모비인사이드가 한번 더 소개합니다.
