(해당 글은 2019년 9월 10일에 작성된 글입니다. 게시물의 사진이 원 출처에서 삭제되어 그대로 옮겨오지 못했습니다.)
모두들 KTX를 타본 경험, 기차표를 예매해 본 경험이 있다면 Korail 앱을 아실 겁니다.
이번 시간에는 코레일 앱 UX/UI 디자인을 사이드 프로젝트이자 연습용으로 시도해본 디자이너 분의 작업 과정을 공유해보겠습니다.
3.1의 별점을 받은 기존 코레일 앱의 문제점을 분석하여 어떻게 개선 아이디어를 내었는지 보겠습니다!
한국의 친숙한 앱에 관한 프로젝트라서 그런지 벌써부터 기대가 됩니다.
작가가 앱 사용 중 느낀 패인 포인트는 '기차표 예매가 너무 어렵다'라는 것이었습니다.
코레일의 복잡한 유저 플로의 문제점은 주요한 유저 플로에 FOCUS가 제대로 맞추어져 있지 않다는 것이었습니다.
가장 중요한 task인, 검색 - 티켓 선택 - 결제 페이지로 이동이 복잡하다는 것이었죠.
그 밖의 기능인 인증이나, 환불 관련 정보, 세일 정보는 부수적인 것들입니다.
코레일 앱의 또 다른 문제는 인터페이스의 일관성 부족이었습니다.
처음 사용하는 사람들은 헷갈려 하기 쉬운 UI입니다.
즉, IA의 일관성 부족은 앱을 더욱 혼란스럽게 만들 뿐입니다.
HOME SCREEN
본 디자이너는 먼저 첫 페이지에서 가장 중요한 정보인 '티켓 예매'와 '예매 정보 확인'을 쉽게 할 수 있도록 했습니다.
예매하는 플로를 매끄럽게 다듬고, 앞으로 어떤 여행을 위해 어떤 기차를 탈지 한눈에 확인할 수 있도록 말입니다.
SEARCH RESULTS
- 검색 결과가 이전 UI에서 너무 많은 정보를 담고 있었던 것과 달리, 새로운 UI에서는 가장 중요한 정보가 한눈에 들어오도록 만들어졌습니다.
- 첫 번째로 중요한 '출발-도착 시간'과 '가격'이죠.
- IA가 가독성(legibility)에 미치는 영향을 확실히 확인할 수 있습니다!
- 탑승할 기차를 선택한 후에 이루어지는 일련의 선택지들은 다음과 같은 플로어로 어렵지 않게 한 번에! 끝낼 수 있게 되었습니다.
- 기존 사용자들은 아래의 포맷이 기본적으로 입력이 되어있습니다.
- 새로운 사용자들도 어렵지 않게 입력이 가능하며, 가장 중요한 '좌석 선택' 후에 부수적인 '할인'이나 '마일리지' 기능을 확인할 수 있습니다.
MANAGE TICKETS
- 기차에 탑승하기 전 티켓 정보를 확인하려면 기존 앱에서는 사이드 메뉴를 열어 '승차권 확인' 메뉴로 들어가야 했습니다.
- 새로운 UI에서는 스크린 하단의 탭 바를 단순히 터치하는 것으로 티켓 정보를 확인할 수 있습니다.
- 앱을 열면 바로 보이는 홈 화면에서 티켓 현황을 바로 파악할 수 있고, 다음 탭을 열면 곧 탑승할 기차 티켓과 지금까지의 기차 이용 현황을 확인할 수 있습니다.
- 홈 화면의 티켓을 클릭하면 세부 정보를 확인할 수 있습니다. (루트 등)
EXPLORE TRIPS
- 디자이너는 코레일 앱을 단순 기차표 예매용 이상의 서비스를 제공하는 것으로 탈바꿈했습니다.
- 여행에 도움을 주는 앱이 되는 겁니다. 국내/외 사용자 모두가 여행 목적으로 KTX를 이용하는 경우가 많다는 점에 착안하였습니다.
- 'Explore'이라는 새로운 탭을 추가 : 현시점에 (계절별로) 여행하기 좋은 곳 추천 / 한국 문화 특성상 다른 사람들이 어디로 여행하는지 관심이 많으므로, 'trending' destination 추천(실시간으로 가장 인기 있는 목적지)
- 특정 목적지(여행지)를 선택 시 그 여행지에 대한 설명 / 가볼 만한 곳 / 티켓 구매 연결 페이지가 자연스럽게 이어집니다.
목적지에 관심이 생겼다면, 얼마나 걸리고 얼마를 지불하면 그곳에 갈 수 있는지 쉽게 보고 티켓을 구매할 수 있습니다.
Localization
- 지금까지 외국인을 위한 English UI를 보았는데, 한국 버전을 만들 때 유의할 것들이 있습니다.
- 예로, 통화(달러/원)와 언어 차이에 따른 dimension constraints가 있습니다.
- 또한 한국 사람의 특성을 반영하여, '실시간 인기 여행지' section을 부각하였습니다.
Comments_
UX란 어떠해야 하는지에 대해 많이 배울 수 있었던 포트폴리오이다.
평소 코레일 앱을 이용할 때 어지럽고 불편하다는 생각을 많이 했는데, 복잡한 앱이 이렇게 깔끔하게 정리되는 과정을 직접 곁에서 지켜보는 것 같아 설레기도 했다.
이 프로젝트를 통해 특히 다음과 같은 것들에 유의해야 함을 알게 되었다.
- 기본적으로 사용자가 직관적으로 사용하기 편한 구조의 IA를 구축하고 그 흐름을 설계할 것.
- 한국인/외국인 등 사용자의 문화적/사회적 특성을 반영할 것.
- 결국 핵심은 유저 플로에서 가장 중요한 것들만 남기고 부수적인 것들은 생략하거나 지나친 강조를 줄이는 것!!
출처
'Product Management & UX' 카테고리의 다른 글
| [UX디자인 스터디] #9 Dropbox Mobile Redesign - Ed Chao (0) | 2020.07.03 |
|---|---|
| [UX디자인 스터디] #8 FloraGo - Tien Dao (0) | 2020.07.03 |
| [UX디자인 스터디] #6 WeeSchool - Sarah Jutras (0) | 2020.07.03 |
| [UX디자인 스터디] #5 Potluck - Aleksei Zhurankou (0) | 2020.07.03 |
| [UX디자인 스터디] #4 Mackenzie Health - Kevin Keen (0) | 2020.07.03 |
