Virgin America's new booking site, 비행기표 예매경험에 즐거움을 담다

온라인에서 비행기표를 예매해 보신 적이 있나요? 어떤 경험이 떠오르시나요? 아마도 지금 떠올리실 것들과는 다른 경험을 줄 버진아메리카의 웹사이트(www.virginamerica.com)를 소개합니다.

새로운 웹사이트는 지난 6월에 오픈했습니다. 리뉴얼의 목표는 '여행의 시작인 비행기표 예매과정의 스트레스를 없애고, 즐거움을 향상시키는 것'이라고 합니다.
이 프로젝트는 Work & Co. 라는 7명의 디자이너와 엔지니어로 이루어진 작은 에이젼시에서 진행되었습니다. 후편을 통해 이 회사에 대해 알아보도록 하고, 본 포스팅에서는 비행기표 예매과정에 ‘즐거움’이라는 UX전략을 성공시키기 위해 어떤 디자인원칙을 적용하였는지 살펴보겠습니다.


1. 어떤 기기에서든 최적화된 경험

이전 웹사이트와 비교하여 현재 웹사이트의 가장 큰 특징은 모바일과 데스크탑 어디에서도 쉽고 빠르게 비행기표를 예매할 수 있다는 것입니다. 모바일, 태블릿에서의 경험을 강화하기 위해 최근 웹 디자인 트렌드인 RWD, 플랫디자인, 카드타입 UI, 트랜지션 강화를 모두 반영하였습니다. 특히 보통의 웹사이트+앱 전략 대신 RWD를 적용하여 하나의 플랫폼으로 다양한 기기에 최적화된 경험을 제공하고 있는데요. 웹이지만 마치 앱같은 쾌적한 경험을 강화하였습니다.

모바일 경험 강화를 위한 디자인
• RWD(Responsible Web Design)
• Flat Design
• Card type UI
• Animation & Transition

2. 한 번에 하나씩, 단일 태스크에 집중

Step 1. 출발지와 목적지선택
웹의 첫페이지입니다. 한 화면에서 하나의 태스크가 주어지고, 화면요소 또한 큼지막합니다. 이러한 디자인은 ‘출발지 선택을 어디에서 해야하지? 무엇부터 해야하나?’ 등 페이지 내에서 생길 수 있는 사용자의 불필요한 고민을 없앱니다. 시각적으로 큰 UI요소와 글자로써 사용자가 집중해야할 부분을 명확하게 하여 서비스의 흐름을 쉽게 따라갈 수 있도록 하였습니다.
버진아메리카의 첫페이지는 출발지를 중심으로, 주요 목적지를 우선적으로 나열하여 선택을 빠르게 할 수 있도록 돕고 있습니다. 아래 리뉴얼 전의 초기화면과 비교해보면 현재와 확연한 차이를 느끼실 수 있을 것입니다.

리뉴얼 전의 첫 화면


3. 확실한 피드백으로 불안함 감소

Step 2. 예매인원 선택 (변경된 정보가 즉각 반영되는 확인버튼과 프로세스바)
비행기표는 고관여 구매제품에 속합니다. 가격도 가격이거니와 예매 프로세스마다 옵션 하나하나를 신중하게 선택해야 하기 때문에 예매 진행 중 내용 확인을 계속 해야합니다. 과정상의 불안함을 해소시키기 위해 버진아메리카는 단계마다 화면 상단에 토스트팝업으로 사용자가 한 일과 해야할 일에 대해 즉각적인 피드백을 전달합니다. 팝업 뿐만 아니라 화면의 각 요소들도 클릭과 동시에 색과 트랜지션이 변화되어 사용자의 액션에 대해 확실하게 피드백을 주고 있습니다. 이를 통해 사용자는 불안과 혼란을 줄이고 비행기표 예매수행시간을 단축할 수 있습니다. 실제로 테스트 결과 2배 가량 수행시간이 빨라졌다고 하네요. ‘잘 하고 있는걸까?’에 대한 사용자의 물음에 확실한 대답으로 빠르게 예매를 끝내게 하는 것 또한 즐거움을 위한 세부 전략이 될 수 있겠습니다.

Step 2 -> Step 3 (확인버튼 클릭 시 피드백을 제공하는 토스트팝업)

Step 3. 날짜 선택 (다음 태스크에 대한 가이드를 제공하는 토스트팝업)

4. 빠르게 알아채고, 쉽게 수정할 수 있도록
확실한 피드백을 주어도 사용자는 본인이 잘 선택했는지 재확인하고 싶어하고, 혹은 자신의 실수를 결제 순간까지 알아채지 못 하는 경우가 발생합니다. 결제시점까지 가서 다시 처음부터 시작해야하는 최악의 순간을 방지하기 위해 버진아메리카는 페이지의 이동없이 스크롤링 업&다운 하는 것 만으로 예약 정보를 재확인할 수 있게 하였습니다. 동시에 상단 프로세스바에는 현재 속한 프로세스만 보여주는 것이 아니라, 선택한 옵션 정보까지 포함하여 실수한 경우 빠르게 인지하고 수정이 필요한 부분으로 쉽게 이동할 수 있도록 하였습니다.

구체적인 정보를 포함한 프로세스바

상세보기 모드의 프로세스바

개인정보 입력하는 부분에서도 사용자에 대한 배려가 느껴집니다. 색변화와 문구를 제공하여 역시 즉각적인 피드백을 주고 있고요. 완료버튼을 누르기 전에 버튼 자체에서 사용자가 취해야 할 액션에 대해 친절하게 알려줍니다. 사소한 부분도 놓치지 않고 챙기고 있습니다.

정보를 잘못 입력했을 경우와 맞게 입력했을 경우의 색 구분, 문구 피드백

정보입력여부에 따라 다르게 보여지는 완료버튼

다양한 피드백 경로
• 액션을 취할 때 마다 제공되는 토스트팝업
• 사용자가 선택한 정보를 포함하고 있는 프로세스바
• 즉각적인 트랜지션

5. 유머와 즐거움

예매자에 identity를 부여하는 아바타
귀여운 것을 싫어하는 사람은 별로 없죠. 귀여움과 친근함은 누구에게나 통하는 것 같습니다. 버진아메리카에서도 비행기좌석을 고르는 과정에서 아바타를 적용하여 경험에 재미와 몰입을 더하였습니다. 예매자별로 원하는 아바타를 적용하므로써 사용자는 수많은 예매자 중 하나가 아닌 특별한 고객이란 느낌을 받을 수 있습니다. 딱딱하고 효율적이어야만 할 것 같은 비행기 예매 프로세스에 웃음을 담았네요.

아바타와 함께 가이드를 제공중인 토스트팝업

좌석을 선택한 모습
6. 오프라인 경험과 연계

비행기표를 출력했을 때 사람들이 바지 뒷주머니에 표를 넣곤 하는데요. 이러한 행태를 반영하여 뒷주머니 안에 쏙 들어갈 수 있는 형태로 탑승권을 리디자인하였습니다. https://vine.co/v/MnKdrK6h2uu 이 링크에서 Vine에 올라온 영상을 확인할 수 있습니다.

마케팅이익과 사용자경험의 트레이드-오프 관계
앞서 버진아메리카가 적용한 디자인들을 살펴보았는데요. 리뉴얼을 통해 또 하나의 달라진 점은 바로 웹페이지에서 얻는 광고수익, 프로모션 홍보를 과감히 포기한 것인데요. '광고, 홍보를 통해 얻는 마케팅적 이익과 사용자 경험에 보다 집중하는 것' 이 두가지는 대부분 트레이드-오프 관계에 있습니다. 단기적으로 본다면 마케팅적 손실만 보이겠지만 버진은 핵심 목표인 ‘모바일과 태블릿의 예약자 증가’를 위해 과감한 선택을 하였습니다. 장기적 목표를 잡고 용기있는 선택을 한 것 같습니다. 모든 상황에 적용할 수 있는 선택은 아니겠지만 확실한 건 사용자는 이전보다 즐거운 경험을 하게 되었다는 것입니다. 버진아메리카의 사용자를 위한 노력들이 빛을 발하기를 기대합니다.

Virgin America says: “We make getting there fun. Why shouldn’t booking be fun too? With playful avatars, a sleek simple design, mood-lit inspired colors and a cheeky sense of humor, we’re the life of the airline industry website party.”

*앞에서 언급했던, 이 프로젝트를 진행한 Work & Co.라는 회사 이야기로 후속편을 준비하고 있습니다. 단 7명으로 이루어진 회사가 어떻게 이런 큰 항공사의 디자인 리뉴얼을 맡게 되었는지, 어떤 방법으로 고객 참여형 애자일 프로세스를 쓰고 있는지, 어떻게 복잡하고 거대한 조직을 설득하고 이런 단순한 디자인을 할 수 있었는지에 대해 알아보도록 하겠습니다.

버진 아메리카에 방문해보세요!
http://www.virginamerica.com/

버진 아메리카의 활동이 궁금하다면?
twitter
facebook

새 홈페이지에 대한 소개
https://www.virginamerica.com/vxnewlook/

참고기사
The Super-Slick UX of Virgin America’s New Booking Site, WIRED
Virgin America’s Newly Designed Website And Boarding Pass Eliminate Travel Stress, psfk

[참고##서비스 디자인##]