Share
Sign In
사이드 프로젝트
맥도날드 키오스크 리뉴얼
Y
yiseo
👍
❇️
year: 2021
role: literature research, ethography, data analysis, UXUI design, UT
teammate: 1 PM, 6 designer
1. 개요
무인판매기 확대에 비해 더딘 중장년층 디지털 정보화 수준
인건비의 상승과 비대면 트랜드로 외식업 업계에서 무인판매기 키오스크의 도입이 빠르게 이뤄지고 있고, 이러한 현상은 패스트푸드 프렌차이즈 업계에서 가장 빠르게 나타나고 있다. 맥도날드의 경우 무인 판매기의 비율이 65%에 다다른다.
누군가는 그저 "바뀌었네"하고 적응하겠지만, 디지털 기기에 익속하지 않은 시니어들 중심으로 디지털 소외 현상이 나타나고 있다. 디지털에 익숙하지 않은 사용자를 고려하여 맥도날드 무인판매기를 쉽게 이용할 수 있는 경험을 제공하고자 한다.
2. 목표
인지하기 쉽고 사용하기 쉬운 키오스크 UI 개선
시야각에 근거하여 한 눈에 들어오는 화면 사이즈와 레이아웃을 구성하고, 노년층의 신체 사이즈를 고려한 UI 가이드를 제안합니다.
친절하고 명확한 커뮤니케이션으로 키오스크 UX 개선
현실세계에서 메뉴를 주문했던 오프라인 경험을 접목시켜 친숙하고 긍정적인 키오스크 서비스 경험을 제공하고 더 나아가 브랜드 경험까지 개선하고자 합니다.
3. 리서치
상대적으로 많은 주문 과정을 가진 맥도날드 키오스트 UX
맥도날드외 동종업계의 키오스크 UI 패턴분석한 결과 맥도날드와 버거킹이 상대적으로 많은 과정을 거치고 있었습니다.
👉
메뉴 결제 과정

1.
맘스터치 : 포장/매장 선택 > 메뉴카테고리 선택 > 메뉴 선택 > (세트 선택시) 사이드메뉴, 음료, 요청사항 선택 > 결제방법 선택으로 진행되고 5개 과정, 6회의 터치
2.
버거킹 : 첫 화면 > 메뉴카테고리 선택 > 메뉴 선택 > 구성 선택 > 업그레이드 여부 선택 > 추가 재료 선택 > 사이드메뉴 확인 및 카트 담기 > 시즈닝 및 소스 선택 > 매장/포장 선택 > 결제수단 선택으로 진행되고 10개 과정, 14회 터치
3.
맥도날드 : 첫 화면 > 매장/테이크아웃 선택 > 메뉴카테고리 선택 > (있을 경우) 메뉴카테고리 2차 선택 > 메뉴 선택 > 구성 선택 > (세트 선택 시) 사이드메뉴, 음료 선택 > 장바구니 담기 > 추가메뉴 선택 > 테이블 서비스/셀프 서비스 선택 (매장별 상이)로 진행되고 10개 과정, 13회의 터치
4.
노브랜드 버거 : 첫 화면 > 메뉴카테고리 선택 > 메뉴 선택 > 구성 선택 > (세트 선택 시) 사이드메뉴, 음료 선택 > 장바구니 담기 > 결제수단 선택으로 진행되고 7개 과정, 9회의 터치
시야각 분석
고개를 끄덕이지 않고도 볼 수 있게
인간의 시야각 범위에서 정보탐색이 가능한 일반적인 범위는 가로는 좌우 30°이며, 세로는 아래로 30°이기 때문에 웬만하게 이 영역안에 콘텐츠를 담는게 중요합니다.
색지각 분석
붉은 계열로 인지하기 쉽게
또한 노인은 황반화 현상으로 인해 스펙트럼의 하위대(단파장)에 속하는 보라, 남색, 파랑 보다는 스펙트럼의 상위대(장파장)에 속하는 빨강, 주황, 노랑의 색을 더 잘 식별합니다.
에스노그라피
낮은 가시성과, 이해하기 어려운 키오스크
관찰조사 결과 중장년층 고객도 요즘 대부분 스마트폰을 사용하고 있어 조작방법 자체에 대해 서는 어느정도의 인지를 하고 있는 것으로 보입니다.
하지만 다른 프랜차이즈보다 화면에 나타나 있는 메뉴나 텍스트의 크기 및 명도대비가 약하고 버튼의 경계가 없어 산만하여 선택위치가 불명확하고 복잡한 주문 과정으로 인해 어쩔줄 몰라 하는 모습을 확인할 수 있었습니다.
또한 음성안내는 결제단계에서만 작동하기 때문에 중장노년층 고객이 주문단계를 이해하기 쉽지 않아보였고, 한글표기가 가능한 내용을 영어를 사용해서 내용을 이해 할 수 없다는 것도 확인 할 수 있었습니다.
4. 리뉴얼 과정
디자인 컨셉
신체적 특징을 고려한 레이아웃
🗣️
"메뉴가 세로스크롤로 되어 있어서 한 눈에 들어오지 않아."
"화면 눈높이가 너무 높다."
기본적으로 맥도날드 화면 크기(338x600, 27인치)를 기준으로 삼았는데, 왼쪽에상하 스크롤로 구성되어 인지하기도 어렵고 작동하기도 어려웠던 메뉴 카테고리를 배너 아래 탭버튼 형식으로 구성했고, 스크롤로만 했을 경우 인지하기 어렵다는 점을 감안하여 화살표 버튼도 두었습니다.
상하보다는 좌우의 가동범위가 좁기 때문에 메뉴를 가로로 넘기도록 레이아웃을 짰습니다. 하단 버튼이 너무 아래에 있어 잘 보이지 않을 수 있다는 점을 파악하여 오른쪽으로 이동시켰습니다.
색체의 경우 브랜드 톤을 잃지 않는 범위 선에서 명도를 높여 가시성을 높였습니다.
인지하기 쉽게
🗣️
"글자가 너무 작다."
"무인주문결제 키오스크 처음 사용 시에는 어디를 터치해야 하는지 고민하였다."
키오스크 첫 화면은 주로 배너광고로 쓰이고 누르는 화면도 맨 하단 작게 위치해 있어서 어디를 터치해야할지 모르는 경우가 상당했습니다. 이 부분을 원하시는 식사 방법 선택하도록 유도하는 식의 문구를 노출시켜 부드럽게 넘어가도록 하였습니다.
기존 키오스크의 경우 메뉴간 경계선이 없고 텍스트가 작아서 터치하기 어려운 점이 있었는데, 이 부분은 카드 형식으로 디자인 하여 각각의 메뉴가 구분되도록 하였고 전반적으로 텍스트의 크기를 크게 하여 한 눈에 알아보기 쉽게 하였습니다.
이해하기 쉬운 문구로
설명문구가 많이 들어가는 결제 단계에서 가급적 영어보다는 한글로 바꾸고 최대한 이해하기 쉽게 작문했습니다.
결제단계에 돌입하자 마자 카드를 집어 넣는 경우를 계산하여 '아직 카드를 넣지 말아주세요.' 의 주의를 주는 메시지를 함께 담았으며 카드를 넣을 때에는 카드만 있는 픽토그램보다는 결제부 전체를 화면에 보여주어 어디에 카드를 넣어야 하는지 상세히 알려주도록 하였습니다.
버튼 레이블 경우에도 '전 단계로 가기', '결제 방법 바꾸기' 등 사용자가 이후 상황을 예측할 수 있게 동사형을 사용하여 이해하기 쉽게 하였습니다.
5. 유저 테스트
리뉴얼 전
리뉴얼 후
제품 카테고리 분류를 헷갈려함
글씨가 가독성/명시성이 떨어짐
텍스트의 크기나 이미지가 잘 보임
아이콘이 있어서 터치하기 좋음
BUT, 하지만 여전히 메뉴의 구성이 어렵다는 점과 너무 많은 단계들 때문에 복잡하다는 의견이 있었습니다.
Yi
Subscribe to 'yiseo'
Welcome to 'yiseo'!
By subscribing to my site, you'll be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to 'yiseo'!
Subscribe
👍
yiseo
머니그로우
year: 2019 role: desk research, pilot interview, data analysis, charater design, UXUI design teammate: 4 PD 어떤 문제가 있었는가? 지속적으로 저축하는 것이 어려운 충독적 소비자들 인뎁스 인터뷰를 통해서 충동적 소비를 하는 사람들이 아래와 같은 이유로 지속적인 저축에 어려움을 겪고 있다는 것을 발견했습니다. 따라서 충동적인 사람도 꾸준히 저축을 할 수 있는 서비스를 만들고자 했습니다. 인터뷰 내용 금융정보를 귀찮아 하고, 노력의 필요성을 못 느낌 물건 구매시 큰 고민 없이 결제 돈이 묶인다는 것에 부담감 느낌 리스크에 둔감함. 더 벌 수 있다면 감수하는 편 소비 시 자신만의 규칙을 세우길 원하나 방법을 잘 모름 고정 지출 비용이 언제 나가는지 신경쓰기 어려움 자잘한 소비가 많음 현재 저축목표가 정확하게 없는 편