라이트브레인 UX 아카데미 20기 Open Project 로 이번에 소개해 드릴 결과물은 배달앱 무한경쟁 시대 차별화가 필요한 ‘쿠팡이츠 – UX/UI 개선 프로젝트’입니다.
지난 UX 아카데미 20기 교육 기간 동안 네이버지도조가 만들어 낸 신선한 아이디어를 Rightbrain lab을 통해 공개해 드립니다.라이트브레인 아카데미 수강생들이 어떤 과정을 통해 아이디에이션 하고 또 인사이트와 컨셉을 도출했는지 궁금하시다면 지금 바로 슬라이드쉐어로 내용을 확인하세요.
쿠팡이츠는 배달 시장에 비교적 늦게 진입한 데 비해 빠른 성장을 보이고 있습니다.
하지만 1,2위 기업과 여전히 현저한 점유율 차이를 보이고 있으며, 앞으로 빅데이터를 보유한 대기업의 신규 시장진입 또한 예고되고 있습니다. 따라서 쿠팡이츠만의 입지를 다지기 위한 UX/UI 개선을 고민해 보았습니다.
UX 아카데미 ‘라이트브레인 U –
미래의 UXer들을 위한 교육으로 UX전문가로서 성장할 수 있는 발판이 되는 교육입니다. UX에 대한 기초지식이 있는 학생과 직장인들을 대상으로 하며 정규 과정은 보통 15회 강의로 구성됩니다. UX 개념, 필드 리서치, 모델링, 서비스 디자인, 프로토타이핑과 같은 구성으로 UX디자인의 주요 프로세스를 모두 경험하고 최종 결과물을 발표하는 것을 목표로 합니다. 2019년 상반기 배출된 8기부터 아카데미 정글과 함께 UX Academy를 개설하여 보다 전문적이며, 밀도 있는 교육을 UX에 관심 있는 분들에게 제공하고 있습니다.
라이트브레인 UX 아카데미 22기 교육안내 – 바로가기
교육일정 : 2023.02.08 – 2023.04.10
교육시간 : 주 2회 (2개월)
교육장소 : 아카데미정글(강남 신사)
* 자세한 내용은 교육안내 페이지를 참고하세요.
8. 2 UX 분석
경험 파악
Red Routes
항상 이용됨
극소수 일부 다수
배달비 확인 주문, 카트, 결제
주문내역 반복 주문
고객센터 불만 접수
주문횟수 확인
포장 서비스
최하단 추천
1인분 카테고리
검색
카테고리별 보기
주소 등록
로그인
모든 사용자
자주 이용됨
가끔 사용됨
사용하지 않음
다수의 사용자
자주
경험 요소
에 의해
이용되는
들을
파악하고자 함
즐겨찾기
요청사항 작성
결제수단 편집
공지사항
배달 예상시간 확인
추천 사용
필터, 리뷰
주문내역 확인
9. 2 UX 분석
경험 파악
앱스토어 리뷰 조사
나에게 딱 맞는 음식을
추천받고 싶어요~!
꾸루삥뽕님
App store
이전에 카트에 담았던
가게 정보가 기억이
안 나요...
제발 카트 여러개로...
가자가자님
Google play
리뷰의 수가 많으면
원하는 내용을 찾기
힘드네요.
무한 스크롤중ㅠㅠ
아이고내팔자야님
App store
메뉴를 검색해서
가게에 들어가보니
제가 검색한 메뉴가
없네요?
제발고쳐줘님
App store
을 다 봐도
싶은게 없네요..
더 추천해주세요!
라님
le play
왜
다
숨
이
Ap
배달이 지연되었다고
하는데왜지연되었는
지궁금하네용..
홈화면이 너무
복잡해보여요!
뭘눌러야할지
모르겠네...
결제 버튼을잘못
눌렀는데결제가 무슨
0.1초만에 되네요;;
가게 전화번호는
대체어디있는거예요?
이 ‘매장/원산지정
라는것이
공지사항맞죠?
지금첨알았어요.
10. 목
적
이
슈
탐색 주활동 부활동
개인 맞춤형 추천
개인 맞춤형 추천
주문과 관련된 정보 가시성 향상
주문과 관련된 정보 가시성 향상
리뷰에 대한 변별력 향상 및 UI 개선
리뷰에 대한 변별력 향상 및 UI 개선
검색 정확도 향상
검색 정확도 향상
배달 관련 이슈 개선
카트 & 결제
배달 관련 이슈 개선
나만을 위한 부가서비스
나만을 위한 부가서비스
홈화면에서의 편리한 사용성 제공
홈화면에서의 편리한 사용성 제공
현재추천방식에만족하고있는가
주로선호하는추천테마는어떤주제인가
맞춤형추천을위해앱내에서설문조사를할용의가있는가?
주문을결정하는핵심요소는무엇인가
주문시가게에전화를하는목적이무엇이고,얼마나하는가
쿠팡이츠에리뷰이벤트가있다는것을알고있고,알고있다면얼마나참여하는가
주문후페이지에서요청사항을확인할수없어서불편했던적이있는가
공지사항의접근성이용이한가
매장/원산지정보페이지에서어떤정보를기대하는가?
메뉴결정시리뷰를얼마나신뢰하는가
가게별점을얼마나신뢰하는가
메뉴결정시리뷰에서어떤요소들을참고하는가
리뷰페이지의접근성이용이한가
리뷰페이지에서필요로하는기능이무엇인가?
어떤검색방법을자주사용하는가
검색후어떤정보를중점적으로확인하는가
가게를고를때 어떻게가격을비교하는가
필터링사용시중요하게생각하는요소가무엇인가
필터링사용시원하는결과에빠르게도달할수있었는가?
배달이지연되는사실을어떻게확인하는가
배달이지연됐을경우어떻게행동하고,어떠한대처를원하는가?
카트에서필요로하는정보는무엇인가
카트에서주로사용하는기능은무엇인가
사용자들은메뉴결정후결제까지의과정이매끄럽다고느끼는가
주문후페이지에서필요로하는정보는무엇인가?
주문패턴을시각화해서보여준다면사용자들은어떻게느낄것인가?
홈화면에서어떤정보를기대하는가
사용자멘탈모델에맞는홈화면구조는무엇인가
홈화면에서주로어떤경로로가게를찾는가
홈화면에서사용빈도가높은기능이무엇인가?
카트 & 결제
2 UX분석
이슈도출
12. 3 필드리서치
설문조사
과거 가게 기반 맛집
자주 주문한 맛집
인기 프랜차이즈
신규 맛집
쿠팡이츠에만 있는 맛집
없음
46.5%
26.8%
21.1%
5.6%
56.3%
33.8%
홈 화면에 제공되는 추천 테마 중 선호하는 테마를 모두 선택해주세요 제공되는 추천테마에 대해 어떻게 생각하시나요?
매우 불만족 불만족 보통 매우 만족함
만족함
5.6% 4.2%
0%
63.4%
25.8%
카테고리 선택 35.2%
32.4%
16.9%
5.6%
검색을 누른다
추천 가게 훑기
하단 탭에서 검색
홈에서 메뉴를 탐색할 때 가장 먼저 하는 행동은 무엇인가요?
쿠팡이츠 앱을 사용 중이거나 사용해 본 사용자 응답
71명
음식 주문시, 주문을 결정하는 핵심 요소를 모두 골라주세요.
음식가격 50.7%
최소주문 금액 46.5%
배달비 74.6%
배달예상시간 29.6%
리뷰및평점 73.2%
베스트메뉴 39.4%
쿠폰제공여부 18.3%
과거 주문 내역 7%
별점
작성날짜
리뷰작성자가 주문한메뉴
포토리뷰
사장님댓글
부정적인내용
긍정적인 내용
60.6%
21.1%
49.3%
64.8%
26.8%
56.3%
32.4%
리뷰를 볼때 어떤점을고려하시나요?
13. 3 필드리서치
설문조사 결과 분석
카테고리와 검색 기능의 사용성을
높일 수 있는 방안 필요
메뉴 탐색 시 와 가 높은 것으로 나타남
카테고리 검색 사용 빈도
사용자별 니즈에 맞는 정보를
빠르게 제공하는 방안 필요
주문결정 요소 리뷰 배달비
리뷰 다양한 점
로 를 중요시 여기는 것으로 나타났고,
를 볼 때는 들을 고려하는 것으로 나타남
와
사용자 데이터를 활용하여
추천 만족도를 높일 수 있는 방안 필요
현재 추천 테마들에 대한 전반적인 만족도가 높지 않았지만,
으로 나타남
사용자 데이터 기반의 추천 테마 선호도는 높은 것
14. 3 필드리서치
필드리서치 대상자 선정
20대
1인가구 1인가구 1인가구 1인가구
다인가구 다인가구 다인가구 다인가구
30대 40대 50대 이상
매일
한 번 이상
3~4일에
한 번
일주일에
한 번
한 달에
한 번
20~40대, 주 1회 이상
쿠팡이츠 사용 경험이 있는 유저를
타겟으로 선정
15. 3 필드리서치
필드리서치 진행 방식 정의
설문조사 응답자 12명을 대상으로 리서치 진행
인터뷰 기법 관찰조사 기법
Guided-Tour
Card Sorting What-if Word-Concept Association
5Whys
19. 3 필드리서치
키파인딩
Key Finding
User Voice
홈화면 홈화면
검색
추천
검색
추천
홈화면의 추천테마 내용을 자신의 기준으로 정리하기를 원함
가게에 들어가서 검색한 메뉴가 있는지 확인하는 과정을 번거롭게 느
검색한 메뉴의 가격 비교를 한 화면에서 하기를 원함
추천 기준을 명확하게 파악할 수 있기를 원
개인적 특성이나 주문패턴을 기반으로 자신에게 맞춰진 추천 테마가 제공되길 원함
자주 사용하지 않는 추천 내용이 있어서 탐색이 불편하고 복잡해보여요
자주 사용하는 추천테마를 최상단에서 빠르게 바로 보고 싶어요.
검색한 메뉴가 가게에 들어가보니 없던 경우가 있었어요
검색한 메뉴를 비교할 때, 가게를 들락날락하지 않고 한 곳에서 비교하고 싶어요.
“이츠추천 맛집”의 기준을 정확히모르겠어요. 설명이 필요해요
내가 자주 시켜먹는 음식들이 추천에 뜨거나, 나에게 꼭맞춰진 추천이 제공되면 좋겠어요.
20. 3 필드리서치
키파인딩
Key Finding
주문 핵심 요소 주문 핵심 요소
카트 & 결제 카트 & 결제
카트 & 결제 카트 & 결제
메뉴를 설명하는 태그가 더 돋보이길 원
주문 시 고려하는 금액적인 정보를 확인할 때 불편을 느낌
카트에 단일 가게의 메뉴만 담을 수 있어서 불편을 느
다양한 가게를 카트에 담아 비교하기를 원
결제 버튼 클릭시 갑작스럽게 결제되는 느낌을 받음
주문 후 요청사항을 다시 확인하고 싶어
요청 사항을 바꾸기 위해서 가게에 전화하는 경우가 많
배달 지연 시 지연 사실과 사유에 대해 자세히 안내받길 원함
베스트 메뉴가 눈에 잘 안 띄어요.
최소주문금액을 확인하기 위해 스크롤을 계속 위로 올리는 것이 귀찮아요
혼자 배달시키는 경우가 많아 최소주문금액, 주문 금액과 그에 따른 배달비를 자주 확인해요.
카트에 한 가게의 메뉴만 담을 수 있어서 불편해요
카트에 여러가게의 메뉴를 넣어서 메뉴를 비교하거나한 번에 주문하고 싶어요
결제 버튼을 눌렀을 때 바로 주문되는 것이 불편해요. 한 번더 확인을 하고 싶어요.
주문 후 페이지에서 가게/배달 요청사항을 볼수 있으면좋을 것 같아요
주문 후 요청사항이 누락되거나배달 지연이 심하면가게에 전화를 해요
배달 지연시 알림이 안 떠서 지연된사실을 놓칠때가 많아요.
UserVoice
21. 3 필드리서치
키파인딩
Key Finding
User Voice
리뷰 리뷰
공지사항
주문패턴 시각화
공지사항
주문패턴 시각화
다양한 기준으로 리뷰를 읽
필요한 정보가 있는 리뷰만 보기를 원
리뷰 페이지 접근성이 떨어짐
‘매장/원산지 정보’라는 현재의 레이블은 담겨진 내용을 포괄하기에 적합하지 않
주문시 자주 확인하는 정보(공지사항, 리뷰 이벤트, 매장 전화번호 등)를 찾기 어려
‘사장님의 한 마디’가 더 잘 보이는 곳에 위치하기를 원함
친근하면서 흥미로운 요소라고 느
데이터를 서로 연관지은 통계 자료가 제공되기를 원함
리뷰에서 맛, 음식 상태나 배달에 대한 내용을 봐요
내가 주문하고 싶은 메뉴에 대해서 작성된 리뷰를 찾아야 하는데, 이 과정이 번거로워요
리뷰 페이지가 어딨는지 찾기 힘들어요.
“매장/원산지 정보”안에 공지사항과 리뷰 이벤트, 매장 전화번호가 있는지 몰랐어요
사장님이 가게와메뉴에 대해서 알릴공간이 너무꽁꽁숨겨져있는 것같아요.
재미있고, 앱에 대한 친밀도가 올라갈것같아요
어떤메뉴를 어느 시간대/요일에 많이 먹었는지 통계 자료가 제공되면 좋을 것같아요.
23. 4 UX 모델링
인사이트
Insight
How Might We
홈화면 홈화면
검색
추천
검색
추천
홈화면에서 추천 테마 커스터마이징을 통해 사용자가 원하는 대로 순서를
배치할 수 있도록 한다.
검색 결과 페이지에서 가게 페이지 내의 메뉴 정보(메뉴명, 가격, 사진)를 바로 노출시켜
각 가게들의 메뉴들을 한눈에 비교할 수 있게 만든다.
“이츠 추천 맛집” 옆에 툴팁을 삽입하여 어떤 알고리즘으로 추천되는지 부연설명을 제공한다.
과거 사용자 데이터와 시공간적 정보를 활용해서 사용자가 선호할 만한 추천을 제공한다.
초개인화를 도입하여 자신의 개인정보(나이, 성별, 직업 등)를 입력해 취향 프로필을 등록하고,
그 프로필을 바탕으로 각각의 사용자들에게 맞는 추천을 해줄 수 있도록 한다.
어떻게 하면 사용자들이 홈화면의 추천테마 내용을 자신의 기준으로 정리하여
더빠르게 접근하게 할 수 있을까?
어떻게 사용자들이 검색한 메뉴를 가게마다 일일히들어가보지 않게 하여
메뉴명과 가격만 한눈에 비교하기쉽게 만들 수 있을까?
어떻게 모호한 추천 테마의 이름을 설명하여 사용자가 납득할 수 있도록 할 수 있을까
어떻게 새로운추천 방식을 도입하여 유저들에게 보다 폭넓은추천을 제공해 줄 수 있을까?
24. 4 UX 모델링
인사이트 Insight
How Might We
주문핵심요소 주문핵심요소
카트 & 결제
주문 후 & 배달
카트 & 결제
주문 후 & 배달
가게의 리뷰 최고 / 주문 많음 태그를 “Best 메뉴”로 단일화하고 플래그 색상을 변경한다.
장바구니 플로팅 버튼 상단에 최소주문금액과 배달비를 함께 표기한다.
카트에 여러 가게의 음식을 담을 수 있게 하여 메뉴를 비교하거나
한 번에 주문할 수 있도록 한다
카트와 결제 페이지를 구분하여 결제 전 주문사항에 대해 확인하는 단계를 준다.
주문 후 페이지에 자신이 선택한 옵션과 요청사항을 보여준다.
주문 후 옵션 변경/확인할 수 있도록 주문 후 페이지에 매장 전화번호를 배치한다.
배달이 지연될 때마다 푸시 알람을 통하여 지연 사실과 지연 사유를 알려준다.
어떻게 주문할 때 고려하는 핵심정보에 대한 가시성을 높여서
주문이 원활하게 이루어지도록 할 수 있을까?
어떻게 하면 서로 다른 가게의 메뉴들을 카트에서 쉽게 비교할 수 있게 도울 수 있을까
어떻게 하면 사용자가 갑작스럽게 결제된다는 느낌을 덜 받도록 할 수 있을까?
어떻게 사용자가 주문 후 많이 보이는 행동을 주문 후 페이지에 반영하여
사용자 편의성을 높일 수 있을까?
어떻게 사용자에게 배달지연 사유를 안내하여 사용자가 지연 시 느끼는 불쾌감을
줄일 수 있을까?
25. 4 UX 모델링
인사이트 Insight
How Might We
리뷰 리뷰
공지사항
주문패턴 시각화
공지사항
주문패턴 시각화
리뷰 탭에 레이블과 더보기 버튼을 추가한다.
리뷰에서 AI로 태그를 추출해, 주문한 메뉴나 리뷰의 특징별로 리뷰를 필터링할 수 있게 한다.
메뉴 상세 페이지에서 해당 메뉴의 리뷰를 바로 확인할 수 있도록 리뷰 페이지로 이동하는
버튼을 추가한다.
공지사항 (휴업 일정, 사장님의 한 마디 등)은 메뉴 리스트 위쪽으로 이동한다.
매장 정보 내 사용 빈도가 잦은 가게 전화번호는 밖으로 노출시킨다.
리뷰 이벤트 내용을 리뷰 페이지에서 바로 확인할 수 있도록 한다.
원산지 정보 또한 매장과 관련된 정보 중 하나이므로 ‘매장 정보'로 명칭을 변경한다.
사용 내역을 기반으로 한 뱃지 제도를 추가하여사용자에게 동기를 부여한다
날짜/시간별로 주문했던가게/메뉴/횟수들을 묶어표나 그래프형태로 표현해준다
시각화된 자료클릭시 관련된 가게를 추천해주고주문 페이지로도 이동할 수 있도록 한다.
어떻게 리뷰에 대한 접근성을 높여
사용자가 리뷰에서 보고자하는 내용을 빠르게 볼수 있도록 할까?
어떻게 하면공지사항과 그 안에 숨겨진정보들을 더 쉽게 확인할 수 있도록 하여
사용자들이 필요한 정보를 놓치지 않게 할 수 있을까?
어떻게 ‘매장/원산지 정보' 라는 레이블명을 바꿔
해당 ’매장 정보’페이지에 담긴내용을 직관적으로 파악하게 할 수 있을까?
어떻게 하면사용자들이 주문패턴시각화 서비스를 재밌고친근하게 느끼는 것뿐만아니라,
추후주문할 때더 적극적으로 이용할 수 있도록 할 수 있을까?
26. 4 UX 모델링
카노 모델
‘정보구조 재정의’로 시인성을 높여
사용자가 정보를 쉽게 파악할 수 있게 하고
정보의 활용성을 높인다.
가치
Basic 가치/전략
인사
이트
기존 용어에 대한 ‘혼란스러움’을 줄여서
사용자가 용어를 쉽게 이해할 수 있도록
돕는다.
공지사항(휴업 일정, 사장님의 한 마디
등)은 메뉴 리스트 위쪽으로 이동한다
리뷰 탭에 레이블과 더보기 버튼을 추가
한다
매장 정보 내 사용 빈도가 잦은
가게 전화번호는 밖으로 노출시킨다
카트 플로팅 버튼 상단에 최소주문금액
과 배달비를 함께 표기한다
배달이 지연될 때마다 푸시 알람을 통하
여 지연 사실과 지연 사유를 알려준다.
가게의 리뷰 최고 / 주문 많음 태그를
“Best 메뉴”로 단일화하고 플래그 색상
을 변경한다.
“이츠 추천 맛집” 옆에 툴팁을 삽입하
여, 클릭시 어떤 알고리즘으로 추천되는
지 부연설명을 제공한다
원산지 정보 또한 매장과 관련된 정보
중 하나이므로 ‘매장 정보'로 명칭을 변
경한다.
사용자의 의도대로 주문을 할 수 있도록
확인하고 싶은 정보들을 안내해줌으로서
불필요한 이동을 줄이고 번거로움을
감소시킨다.
주문 후 옵션 변경/확인할 수 있도록 주
문 후 페이지에 매장 전화번호를 배치한
다
주문 후 페이지에 자신이 선택한 옵션과
요청사항을 보여준다.
Need
Not Fulfilled
Need
Fulfilled
Satisfied
Dissatisfied
Basic
27. 4 UX 모델링
카노 모델
정보를 보다 상세히 탐색할 수 있도록 하여
원하는 정보에만 빠르게 도달할 수 있게
도와준다.
가치
Performance 가치/전략
인사
이트
한 페이지에서 여러 메뉴를 ‘비교’할 수 있게
하여 사용자들의 반복적 행동을 줄이고
의사결정에 도움을 준다.
Need
Not Fulfilled
Need
Fulfilled
Satisfied
Dissatisfied
사용자가 더 만족할 만한 추천 테마를 제시
하여 추천의 질을 높이고,
사용자의 메뉴 선택 고민을 덜어준다.
과거 사용자 데이터와 시공간적 정보를
활용해서 사용자가 선호할 만한 추천을
제공한다.
리뷰에서 AI로태그를 추출해,
주문한 메뉴나리뷰의특징별로리뷰를
필터링할 수있게한다
메뉴상세페이지에서 해당메뉴의리뷰
를 바로확인할 수있도록리뷰페이지
로이동하는버튼을 추가한다
홈화면에서 추천 테마커스터마이징을
통해 사용자가 원하는대로순서를 배치
할 수있도록한다.
P
e
r
f
o
r
m
a
n
c
e
검색결과 페이지에서 가게페이지내의
메뉴정보(메뉴명,가격,사진)를 바로
노출시켜각가게들의메뉴들을 한눈에
비교할 수있게만든다
카트에여러가게의음식을 담을 수있
게하여메뉴를 비교하거나한 번에주
문할 수있도록한다.
28. 4 UX 모델링
카노 모델
가치
Excitement 가치/전략
인사
이트
사용 내역을 기반으로 한 뱃지 제도를 추가하여 사용자에게 동기를 부여한다
날짜/시간별로 주문했던 가게/메뉴/횟수들을 묶어 표나 그래프 형태로 표현해준다
시각화된 자료 클릭시 관련된 가게를 추천해주고 주문 페이지로도 이동할 수 있도록 한다
초개인화를 도입하여 자신의 개인정보(나이, 성별, 직업 등)를 입력해 취향 프로필을 등록하고,
그 프로필을 바탕으로 각각의 사용자들에게 맞는 추천을 해줄 수 있도록 한다.
Need
Not Fulfilled
Need
Fulfilled
Satisfied
Dissatisfied
자신의 데이터를 기반으로 만들어진 부가서비스를 제공하여
서비스에 대한 흥미와 친근감을 느끼게 한다.
Excitement
29. 4 UX 모델링
카노 모델
Basic 가치/전략 Performance 가치/전략 Excitement 가치/전략
핵심가치 선정
30. 4 UX 모델링
핵심가치 도출
정보를 보다 상세히 탐색할 수 있도록
탐색 편의성을 향상하여
원하는 정보에 빠르게 도달할 수 있게 함
원하는 정보를
빠르게 탐색.
메뉴나 가게를 한 곳에서
비교할 수 있는 UI를 제공하여
사용자들의 반복적 행동을 줄여주고
의사결정에 도움을 줌
한눈에 비교하여
선택.
사용자가 더 만족할 만한
추천 테마를 제시하여
추천의 질을 높이고
메뉴 선택 고민을 덜어줌
나에게 꼭 맞는
추천.
32. 맛있겠다..
당근케이크
주문해야지!
어디서 주문해야
잘 주문했다고 소문날까~
케이크공방이
더 가성비가 있군!
맛있고,
가격도 저렴하게
잘 주문했다!
먹고 싶은 메뉴를 배달 앱에서 검색한다. 일일이 들어가보지 않고도
에서 메뉴가
할 수 있다.
검색 결과
페이지 실제 있는 가게만
한눈에 빠르게 비교
검색한 메뉴가 가게에 있는지 확인하고,
여러 가게에 대해서 가격과 사진을
비교하고자 한다.
검색 결과 페이지에서 검색한 메뉴가 있는
가게만 나타나고, 메뉴의 가격과 사진이
노출된다.
5 프로토타입
시나리오 1 검색 결과
-
검색 결과 페이지에서 검색한 메뉴별로 여러 가게를 비교
34. 5 프로토타입
검색 결과
가게리스트_검색결과 1개이상
가게리스트
샐러디 역삼점
· ·
4.8(82) 1.7km 무료배달~
15-20분
6,900원
시저치킨 샐러드
샐러디 역삼점
· ·
4.8(82) 1.7km 무료배달~
15-20분
시저치킨 샐러드
6,900원
리코타치즈 샐러드
9,600원
연어 샐러드
10,900원
검색한 키워드가
하이라이트 처리됨
당근케이크
추천순 배달비 최소주문 치타배달
디저트천국
· ·
4.6(51) 0.7km 배달비 3,000원 광고
28-38분
6,000원
케이크공방
· ·
4.8(82) 1.7km 무료배달~
포장 가능 1000원 배달·포장쿠폰
15-20분
5,000원
수제 당근케이크
당근 미니 케이크
쿠팡카페
· ·
4.2(43) 3.7km 배달비 2,900원
포장 가능
30-38분
7,200원
당근 케이크
당근케이크
9:41
BEST 메뉴 3개 까지
아코디언으로 노출
검색한 메뉴가 있는 가게만 나타나고, 메뉴의 가격과 사진이 노출
검색결과 페이지에서 한 눈에 여러 가게의 메뉴를 비교 가능
검색결과페이지에서
검색한메뉴별로여러가게를비교
AS-IS
가게에들어가보니검색한메뉴가 없는경우존
메뉴비교를위해가게 메뉴리스트에
일일이 들어가야함
TO-BE
https://youtube.com/shorts/zGEjFCfRrJs?feature=share
35. 짜장면이
땡긴다!
흠~짜장면 리뷰”만”
바로 보고 싶은데..
오호!
짜장면
후기가 좋네!
오늘은
너로 정했다.
이렇게 하니까
너무 편하잖아~
주문하려는 가게에 들어가서 메뉴를
탐색한다.
원하는 메뉴의 리뷰만 바로 찾아볼 수
있어서 을 느낀다.
시간이 절약되고 편리함
탐색 도중 후기가 궁금해진 메뉴에 대해
바로 리뷰를 확인하고 싶어한다.
메뉴 상세 페이지에 들어가서
해서 확인한다.
해당 메뉴의
리뷰들만 필터링
5 프로토타입
시나리오 2 - 리뷰 필터링
가게 진입 후 메뉴를 고를 때, 해당 메뉴에 대한 리뷰만 필터링해서 보기
37. 5 프로토타입
리뷰 필터링
메뉴/특징 태그를 통해
필터링된 리뷰 제공
메뉴 상세 페이지에서
리뷰 페이지 바로 접근 가능
메뉴 상세 페이지에서 리뷰 페이지로 바로 접근 가
메뉴 태그나 특징 태그로 리뷰를 필터링해서 볼 수 있음
가게 진입 후 메뉴를 고를 때.
해당 메뉴에 대한 리뷰만 필터링해서 보기 메뉴 상세 페이지 리뷰 페이지_필터 selected
짜장면
가격 8,000원
1
수량
사이드추가
큼직한 돼지고기 등심과 야채로 맛을 낸 짜장
- +
배달카트에담기
군만두 (+ 3,000원)
물만두 (+ 3,000원)
튀김만두 (+ 4,000원)
비빔만두 (+ 5,000원)
배달 카트에 담기
9:41
리뷰 보기
리뷰 537개
포토리뷰
메뉴
특징
J**
잘먹었습니다.저의취향은삼선짬뽕보다는
차돌마라탕면이네요!
리뷰가 도움이 되었나요?
도움이 돼요 도움안돼요
오늘 신고
4.7
홍콩반점강남점리뷰
최**
3일전 신고
짬뽕사진
맛 96 만족도80 배달시간42 배달상태 23
짜장면62 짬뽕47 탕수육34 볶음밥28
리뷰 537개
포토리뷰
메뉴
특징
4.7
홍콩반점강남점리뷰
맛 96 만족도80 배달시간42 배달상태 23
짜장면62 짬뽕47 탕수육34 볶음밥28
리뷰 537개
포토리뷰
4.7
홍콩반점강남점리뷰
역시홍콩반점은짜장면이 제일맛있어요!
배달도빠르고 좋았습니다.
리뷰가 도움이 되었나요?
도움이돼요 도움안돼요
짜장면
메뉴
특징 맛 96 만족도80 배달시간42 배달상태 23
짜장면62 짬뽕47 탕수육34 볶음밥28
9:41
박**
| 오늘 신고
최신순
AS-IS
가게에서 메뉴 탐색 도중
해당 메뉴의 리뷰를 바로 확인할 수 없
리뷰를 필터링해서 볼 수 없어
원하는 정보를 찾는 데에 시간이 소요됨
TO-BE
https://www.youtube.com/shorts/cm-dmChQR5Y
38. 시나리오 3
카트에 여러 가게 메뉴 담기
치킨을
먹고 싶은데
어디서 시키지?
일단,
카트에 다 담자~
여기로
정했어!
합리적인
주문이였어!
룰루~
어느 가게에서 메뉴를 시킬지 고민한다. 카트에서
할 수
있다.
한눈에 여러 가게의 메뉴와 금액
을 비교할 수 있어서 합리적으로 주문
고민 중인 여러 가게의 메뉴들을
카트에 모두 담는다.
카트에 담은 가게들의 메뉴, 금액,
최소 주문금액, 배달비를 비교해본 후
가장 끌리는 가게에서 주문한다.
5 프로토타입
시나리오 3 - 카트 및 결제
40. 5 프로토타입
카트
AS-IS
카드 레이아웃으로
가시성을 높임
툴팁 클릭 시
상세내역 Modal
카트에 여러 가게의 음식을 담아 가게 간 메뉴/가격 비교 가
총 주문 금액과 총 배달비 상세 내역을 툴팁 클릭시 Modal로 제공
TO-BE
카트에 여러 가게 메뉴 담기
카트에 한 가게의 음식밖에 담을 수 없어
가게 간 메뉴/가격 비교 불가
전체선택 (2/2) 선택삭제
BBQ치킨 역삼점
황금올리브치킨
1
18,000원
+ 메뉴추가
새우튀김
4,000원
크림치즈볼
5,000원
함께 주문하면 좋을 메뉴
17,000원 더 담으면 배달비 무료
고추바사삭
순살 (100% 국내산 닭다리살) (+4,000원)
22,000원
1
굽네치킨 역삼1동점
포장
배달
카트
9:41 고추바사삭
순살 (100% 국내산 닭다리살) (+4,000원)
22,000원
1
콰트로모짜치즈볼
1
6,000원
+ 메뉴추가
모짜치즈볼
5,000원
K웨지감자
4,000원
함께 주문하면 좋을 메뉴
결제예정금액 50,700원
결제금액
총주문금액
총배달비
?
?
46,000원
4,700원
50,700원
결제예정금액
주문하기
2
총 주문금액 안내
BBQ치킨 역삼점
굽네치킨 역삼1동점
총주문금액
18,000원
28,000원
46,000원
총 주문금액 안내
BBQ치킨 역삼점
굽네치킨 역삼1동점
총주문금액
18,000원
28,000원
46,000원
TO-BE
아카데미정글(으)로배달
서울서초구나루터로 672층
41. 5 프로토타입
결제
AS-IS
카트 페이지와 결제 페이지 분리를 통해 확인 절차 없이 바로 결제되는 혼동을 줄임
카트에서 비교 후 결제 페이지
카트 페이지와 결제 페이지가 합쳐져 있고
결제 전 별도의 확인 절차가 없음
아카데미정글 (으)로 배달
서울 서초구 나루터로 67 2층
수정
BBQ치킨 역삼점
황급올리브치킨
18,000원 / 1개
가게 사장님에게 일회용 수저/포크 안받기
예) 견과류는 빼주세요
굽네치킨 역삼1동점
고추바사삭
순살 (100% 국내산 닭다리살) (+4,000원)
22,000원 / 1개
가게 사장님에게 일회용 수저/포크 안받기
예) 견과류는 빼주세요
총 전체보기
2건
결제
9:41
가게 사장님에게 일회용 수저/포크 안받기
예) 견과류는 빼주세요
배달 요청사항
문 앞에 놔주세요 (초인종 X)
할인쿠폰
총 결제금액 50,700원
사용가능쿠폰0장
쿠폰을선택해주세요
총주문금액 ? 46,000원
총배달비 ? 4,700원
잔여:0원
쿠팡캐시 원
- 0
전액사용
결제수단
신한카드****342*
총 결제금액 50,700원
쿠폰을선택해주세요
총주문금액 ? 46,000원
총배달비 ? 4,700원
잔여:0원
쿠팡캐시 원
- 0
전액사용
결제수단
신한카드****342*
쿠페이머니로 결제시 c 최대88원 쿠팡캐시적립
구매조건확인및결제대행서비스동의
쿠팡은통신판매중개자로서통신판매의당사자가아니
며, 판매자가등록한상품정보, 상품의품질및거래에
대해서일체의책임을지지않습니다.회원은주문내용
을확인하였고, 결제에동의합니다.
보기
50,700원결제하기
TO-BE
아카데미정글(으)로배달
서울 서초구 나루터로 67 2층
https://www.youtube.com/shorts/xSEN6DBS8jY
42. 5 프로토타입
인터랙션
1
메뉴 삭제 버튼 탭 -> 확인 메시지 ->
카트에서 삭제하고자 하는 메뉴가 모션 없이 사라짐
AS-IS
장바구니에 담은 가게 삭제
가게/메뉴 삭제 버튼 탭 -> 확인 메시지 -> 카트에서 삭제하고자 하는
카드가 우에서 좌 방향으로 Overlay (Transformation) 로 사라짐
트리거
규칙
Tab
Transformation (Overlay) Ease-in
기대효과 선택한 메뉴만 삭제한다는 메시지를 줄 수 있음
TO-BE
검색결과 중 원하는 가게 탭 ->
가게 최상단 화면으로 Open to Full screen로 진입
AS-IS
검색 결과에서 메뉴 리스트로 이동
검색결과 중 원하는 메뉴 탭 -> 가게 메인 화면으로 Open to Full screen 진입
-> 선택한메뉴로 빠르게 Auto-Scroll (Transformation)됨
트리거
규칙
Tab
Open to Full screen,
Auto-Scroll (Transformation)
기대효과 검색결과에서메뉴 선택시,가게리스트에서해당메뉴의영역으로
이동하는 모션을추가하여원하는 목표에도달했다는 메시지를 줄 수 있음
TO-BE
Ease-out
현재리뷰에서 태그선택을통한리뷰필터링은없는 기능이므로,
새로운기능에 대해적합한인터랙션을함께모색함.
AS-IS
태그선택을통한리뷰필터링
좌/우로 스몰스와이프를통해키워드 태그탐색 -> 키워드 태그탭 ->
해당키워드와관련된리뷰만QuickChange를통해필터링됨
트리거
규칙
Tab,Small swipe
QuickChange
기대효과 어떤 태그들이있는지 하나하나 살펴본 후 선택할 수 있게하기 위함
TO-BE
크로플 17