새로운 중고폰 판매 ATM의 리더 모델 UX 발굴

민팃을 이용하는 고객의 여정에서 서비스를 상세히 진단하여 기존 고객의 변함없는 서비스 이용을 위한 고객 관점에서의 사용성을 개선하고
신규 고객 유입을 위한 혁신적인 전략과 실행방안을 발굴하며, 마이크로 인터랙션과 애니매이팅 기반의 민팃 ATM 서비스의 UX 모델을 제안합니다.

중고폰 ATM의 선두주자

고객에게 상대적으로 생소하고 사용하기 어려운 서비스 플로우를 가진 민팃이 접근성과 법용성을 가질 수 있도록 친절하고 행동을 유도하는 UX writing과 사용자 행동 동선을 고려한 가이드가 필요했습니다.
전반적인 서비스 사용의 시선 흐름이 쾌적한 가이드 정보 디자인을 제공하고, 한눈에 읽히는 판매정보 제공, 사용자 동선을 고려한 UI를 제공할 예정입니다.
더하여, 디자인 탬플릿을 공통화하여 간결하게 제공하고 민팃의 주요 컬러와 캐릭터를 활용, 발전시켜 브랜드의 긍정적 이미지를 전달하고자 합니다.

Pain Point

명확한 장단점의 기계 by 기계, 민팃 ATM

실제 민팃 고객센터를 통한 Voc 고객 접수 현황 데이터와 민팃을 이용해본 사용자들의 후기를 정량조사하여 모아봤으며,
대부분 사용자들이 빠른 판매대금 환급, 휴대폰 성능 자동 진단 등에 만족해했지만, 지나치게 많은 절차와 오래 걸리는 심사과정, 기계 성능 오류 등으로
결국 민팃을 이용하지 않았다는 후기들이 있었습니다.

To - Be MINTIT, 서비스 전략

민팃은 왜 어렵다는 인식이 많을까?

복잡하고 연계성 없이 오래 소요되는 판매절차와, 비문이 섞인 UX writing을 자주 볼 수 있었고, 그래서 불친절한 사용 가이드가 되고 있었습니다.
또한, 너무 많은 UI 요소와 가독성이 부족한 서체와 백그라운드 컬러의 사용 때문에 글을 읽는데에 피로도도 있었습니다.
이는 서비스 전반에 사용자에게 요구되는 행동이 직관적이지 않았으며, 그 과정에서 중복되는 절차도 있었고, ATM 앞에서 서있으면서 수월하게 잘 읽히지 않는 페인 포인트로도 이어졌습니다.

UX Strategy

핵심 서비스를 고객 행동 패턴에 따라 전략적으로 간소화 제공

민팃 서비스의 핵심 목적을 유지하고, 고객 행동 패턴을 파악하여 그 과정에 원활하게 이용할 수 있도록 전략적으로 노출시킵니다.
그러기 위해서 다양한 유형의 디바이스의 통합 프로세스를 수립하고 각 고객의 사용 여정에 따라 개선 포인트들을 적용합니다.

민팃만의 UX.UI 전략으로 중고 ICT 시장을 리드한다

Design Concept

프로세스 명료화, 마이크로 인터랙션과 애니매이팅

사용자가 수행해야하는 다음 단계를 쉽게 알 수 있도록, 대부분의 화면 중앙에 애니매이션을 활용해서 친절한 가이드를 주었습니다.
설명 일러스트와 민티 캐릭터에 모션감을 부여하여 진행 척도를 더욱 인지하기 쉽도록 하였고, 진행 절차에 도움이 될 수 있도록 지루함 없이 포인트를 더해
브랜드 아이덴티티도 살려주는 방향으로 개선하였습니다.

덜 것을 덜어내고 필요한 정보만을 배치하여 사용자에게 정보 선택권을 주다

Design Definitions

ATM 특성을 고려한 디자인

외부에 설치되어 여러 사용자들이 사용해야 하는 점, 터치 스크린이라는 점 등도 UX. UI를 개편할때 큰 고려대상이었습니다. 손 높이를 고려하여 120cm 아래에 주요 버튼을 배치하고
눈높이에 맞게 주요 텍스트를 자연스럽게 볼 수 있도록 하였습니다. 요즘같은 시국에 남들이 여러번 썼던 터치 스크린을 쓰기 꺼려할 것도 고려하여 터치 영역을 최소화 하였습니다.
시야각과 시야의 범위에 해당하는 부분에서 원활한 조작과 인터랙션이 이루어지도록 하였습니다.

컬러가이드

ATM의 LCD 특성에 맞게 양 옆에서 볼 때, 컬러 왜곡이 심한 편이고 정면에서 볼 때도 본래 컬러보다 훨씬 밝아보이는 경향이 있었습니다.
따라서, 민팃의 모바일 키컬러보다 살짝 톤다운된 느낌을 차용하였습니다.

서체 가이드

기존 “나눔바른고딕"서체에서 좀 더 포멀하고 가독성이 좋은 Noto Sans KR를 사용하여 깔끔한 브랜드 아이덴티티를 살렸습니다.

Design Output

필요한 정보만 배치하여 판매에만 집중한 메인화면

ATM에 있는 데이터 삭제, 휴대폰 살균 등 부가적인 기능들은 바텀시트 UI에 숨겨두고 오직 민팃 시작 버튼만을 강조하며 중고폰 판매를 하러 온 고객들이 어떤 걸 먼저 해야하는지
직관적으로 보여주는 메인화면으로 구성했습니다.

한 화면에 필요한 최소한의 텍스트만

강조되어야 하는 문구만 잘보이도록 남겨서 사용자에게 정확한 행동을 유도합니다. ATM 기준으로 사용자의 시선이 많이 머물게 되는 위쪽에 수행과정을 나타내는 텍스트를 한 문장으로
배치하여 사용자가 진행을 위해 꼭 읽어야 하는 것을 보게합니다. 자연스럽게 시선을 화면 중앙으로 떨어뜨려 어떻게 하는지 방법으로 보고,
진행을 위한 다음 버튼은 화면의 하단 쪽에 배치하여 터치하고 조작하는 손이 부자연스럽지 않게 설계하였습니다.

글을 덜어낸 대신 가미된 친절한 애니매이션 설명

모션그래픽이 가미된 일러스트를 활용하여 이용방법 가이드를 해줍니다. 사용 방법을 안내해주는 움직이는 일러스트로 이용 과정을 쉽게 해주며,
실제 사용하는 현장 모습과 거의 동일한 구도와 모션 패턴으로 더 알기쉬운 설명을 유도했습니다.

지치지 않게 진행도를 알려주는 프로그레스 인디케이터

긴 판매 여정을 사용자가 쉽게 진행도를 확인하고 수행해나갈 수 있도록 전체 진행과정, 현재 진행 과정 위치, 남은 진행과정을 한 눈에 볼 수 있는 프로그레스 인디케이터를 추가했습니다.
민팃의 여우 캐릭터를 활용하여 각 과정을 수행할 때마다 표정으로 마이크로 포인트를 추가했습니다.

사용자의 눈높이를 고려한 UI 배치

화면의 모든 UI는 사용자와 키오스크 간의 물리적 요소가 고려되었습니다. 사용자와 키오스크 간의 거리, 사용자의 시선, 사용자가 팔을 들어올리는 높이를 파악하여
사용자가 불편함을 느끼지 않고 프로세스를 진행할 수 있도록 UI에 적용하였고, 크고 작은 다향한 크기의 민팃 키오스크에서 각각 최적점을 찾아 반영했습니다.