brunch

매거진 UX 디자인의 모든 것

라이킷 104 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Feb 07. 2017

UI/UX 프로젝트 A-Z

UX 디자인 배우기 #111

Today UX 아티클

2016년 12월 20일 Protopr.io에 올라온 Chaymae Lougmani의 글 LET IT FLY! Redesigning Virgin Atlantic’s flying experience을 원저자의 허락을 받아 번역한 글입니다.

LET IT FLY! Redesigning Virgin Atlantic’s flying experience

Case study

blog.prototypr.io

컨텍스트 설명

이 글에서 소개할 사례는 General Assembly에서 2주간 진행했던 디자인 스프린트입니다. 과제는 Virgin Atlantic의 기내 서비스를 모바일 앱과 통합시키는 것이었습니다. 목표는 유저에게 매끄러운 비행기 탑승 경험을 제공하는 것이었습니다.

브리핑

Virgin Atlantic는 한 해 540만 명의 탑승객이 이용하고 있습니다. Virgin Atlantic의 사업전략이 성공하기 위해서는 기초를 탄탄히 쌓을 필요가 있습니다. 그들은 비즈니스와 레저 마켓에 집중함으로 효율성과 효과성을 달성하려고 하고 있습니다.

해결해야 할 과제

현재 Virgin Atlantic에서는 다음과 같은 기내 서비스를 제공합니다.

직접 제공하는 서비스 (식품 및 음료 제공 서비스, 승무원 호출)

빌트인 기술로 제공하는 서비스 (영화, 음악, 게임, 맵)

Virgin Atlantic은 모든 기내 서비스를 모바일로 할 수 있게 만들려고 하고 있습니다.

UX팀과 스케줄

아래 사진이 바로 저희 팁입니다! 오른쪽부터 Stefano, Dafna와 저, Chaymae입니다. 저희는 2주 동안 이 프로젝트를 담당했습니다.

Week1.
탐색 및 정의 스프린트. 프로젝트 캔버스, 프로젝트 계획, 비즈니스 분석이 여기 해당됩니다. 또한 서베이, 유저 인터뷰, 어피니티 다이어그램, 퍼소나, 경험 지도와 디자인 스튜디오도 이때 진행했습니다.

Week 2.
개발 및 전달 스프린트. 페이퍼 프로토타입, 미드-피델리티 프로토타입, 목업, 하이-피델리티 클릭 가능한 프로토타입을 만들었습니다. 몇 번의 반복 작업과 사용성 테스트도 진행했습니다.

이번 프로젝트 동안 저는 전체 디자인 프로세스에 참여하며 팀 퍼실리테이터의 역할을 담당했습니다. 저는 모든 팀원들이 같은 내용을 이해하고 프로젝트 계획에 따라 모든 것이 진행되도록 했습니다.

접근법

저희는 Virgin Atlantic의 핵심 가치를 기반으로 문제에 접근하는 방법을 정립했습니다.

“잊을 수 없는 경험을 고객에게 전달하기 위해 표준을 뛰어넘는 것을 항상 목표로 한다” - Virgin Atlantic

저희 목표는 이러한 가치를 반영하면서도 비즈니스 니즈를 커버하는 모바일 앱을 만드는 것이었습니다.

리서치

서베이

리서치 단계를 시작하기 위해 저희는 소셜 미디어 채널을 통해 공유할 서베이를 만들었고 60명에게 응답을 얻었습니다. 먼저 응답자를 가려내는 질문으로 서베이를 시작했습니다. 장거리 비행 탑승 경험을 가지고 있는지 물어본 것이죠. 이 질문은 저희 타깃과 매치되지 않는 11%의 응답자를 가려낼 수 있게 해줬습니다.

인터뷰

저희는 11명을 인터뷰했습니다. 런던 외부에서 살고 있는 사람들에게 전화를 통해 인터뷰를 진행했습니다. Call Recorder라는 모바일 앱을 통해 전체 세션을 녹음했습니다.

어피니티 다이어그램

저희는 인터뷰를 통해 얻은 데이터를 여러 카테고리로 묶었습니다. 이를 통해 최종 유저에 대해 좀 더 잘 이해할 수 있었습니다.

퍼소나

어피니티 맵을 통해 세 가지 카테고리의 고객이 있다는 것을 추론해냈습니다. 저희는 각각을 대표하는 퍼소나를 만들었습니다.

Claudia는 1순위 퍼소나입니다. 그녀는 출장으로 뉴욕과 홍콩을 자주 오가며 비행기를 타는 시간을 업무를 하거나 노는 시간으로 보냅니다.

밥은 2순위 퍼소나입니다. 그는 IT 컨설턴트이며 업무상 혹은 콘퍼런스에 참여하기 위해 자주 출장을 다닙니다. Bob은 비행기에 타고 있는 전체 시간을 영화를 보거나 TV 쇼를 보는 데 사용합니다.

Anna는 Claudia나 Bob 보다는 덜 자주 비행기를 탑니다. 비행기를 탈 때는 매끄러운 보딩 경험과 편안한 비행을 좋아합니다.

다음은 퍼소나들의 고민점(pain points)을 요약한 스토리보드입니다.

해결책

Claudia, Bob, Anna의 고민을 해결할 해결책은 그들이 직면한 문제를 해결해줄 앱을 만드는 것입니다.

“Virgin Atlantic의 탑승객이 매끄럽고 즐거운 비행 경험을 하도록 돕기 위해 앱을 만든다” – UX 팀

기능 우선순위 매기기

리서치를 통해 찾은 결과를 바탕으로 기능에 대한 모든 아이디어를 적었으며 카테고리로 분류했습니다. 이는 이번 스프린트에서 MVP로 삼을 기능을 정하는 데 도움이 되었습니다.

디자인 스튜디오

디자인 스튜디오 단계에서는 두 가지 플로우에 집중했습니다.

1. Claudia가 공항에서 쇼핑을 방해받지 않게 되는 매끄러운 탑승 여정.
게이트 정보는 폰으로 확인할 수 있어서 공항에 있는 디스플레이를 더 이상 확인할 필요가 없습니다.

2. Bob을 위한 특별한 엔터테인먼트 비행 경험.
그는 자기 폰을 통해 보고 싶은 영화를 선택하고 빌트인 스크린을 컨트롤할 수 있습니다.

디자인 스튜디오를 통한 결과물

디자인 스튜디오 단계가 끝날 때, 테스트해볼 수 있는 종이 프로토타입을 만들었습니다.

1. 매끄러운 탑승 여정을 위한 프로토타입

2. 특별한 엔터테인먼트 비행 경험을 위한 프로토타입

페이퍼 프로토타입 테스팅

그다음엔 위 프로토타입을 테스트했습니다. 프로토타입에서 사용한 일부 언어와 내비게이션에서 몇 가지 문제점을 발견했습니다. 사람들은 빌트인 스크린과 폰을 연결할 때 헷갈려했습니다.

언어가 혼동을 줌

내비게이션이 복잡함

비행기의 빌트인 스크린과 폰을 연결하는 프로세스가 헷갈림

저희는 한 발 물러나서 앱의 구조를 다시 살펴보기로 했습니다. 잠시 브레인스토밍 세션을 진행한 후에 앱의 맵을 새롭게 만들었습니다.

앱 맵(app map)

내비게이션을 간소화하고 페이지 수를 줄였습니다. 직접 연결하는 시스템은 제거하고 자동으로 연동되는 기능으로 대체했습니다.

미드-피델리티 프로토타입

새로운 앱 맵을 만든 후에는 그 효과성을 보기로 했습니다. 다시 디자인 스튜디오 과정을 거쳐서 간단한 인터페이스를 만들어냈습니다.

1. 매끄러운 탑승 여정

2. 특별한 엔터테인먼트 비행 경험

미드-피델리티 사용성 테스팅

새로운 프로토타입은 훨씬 더 잘 작동하는 것 같았습니다. 와이어프레임을 하이-피델리티 레벨로 넘겨야겠다는 확신이 생길 때까지 위 과정을 반복했습니다.

하이-피델리티 와이어프레임

저희는 각자 Sketch를 열고 Stefano가 처음 만든 디자인을 기반으로 컬러와 스타일에 변화를 줘가며 적절한 조합을 찾으려고 노력했습니다.

디자인 스튜디오의 결과물

저희는 15가지 디자인을 만들었습니다. 각 디자인에 대한 크리틱을 진행한 후에 메인 디자인에 집어넣을 요소를 뽑아 합치기로 했습니다. 이 과정에서 Virgin Atlantic의 브랜드 정체성을 계속 생각했습니다.

사용성 테스팅 결과

이렇게 나온 디자인에는 접근성 문제가 있었습니다. 일부 요소가 읽기 어려웠으며 색상 대비가 충분하지 않았습니다.

텍스트를 읽기 어려움

버튼 내비게이션에 사용한 아이콘이 색상 대비가 제대로 되지 않아 눈에 띄지 않음

버튼 내비게이션 바의 높이가 너무 높음

최종 디자인

새로운 디자인에서는 사용성 테스팅을 통해 발견한 문제들을 해결했습니다. 텍스트를 좀 더 크게 타이틀은 굵게 바꾸고 내비게이션 바의 높이는 낮췄습니다.

그 결과 두 가지 유저 인터페이스 디자인 옵션을 내놓게 되었습니다.

옵션 1

이 옵션에서는 Virgin Atlantic의 매력적인 밝은 컬러를 유지하려고 했습니다. 대비되는 색상을 통해 내비게이션 메뉴의 가독성을 높였습니다. 내비게이션 메뉴에서 선택한 메뉴는 빨간색으로 보여주고 선택되지 않은 메뉴는 보라색으로 보여줘서 확실히 눈에 띄게 만들었습니다.

옵션 2

옵션 2에서는 미니멀리스트 접근법을 취했습니다. 저는 이 디자인이 깔끔하고 전문적으로 보인다고 생각합니다. Virgin의 밝은 빨간색을 사용하되 흰색 배경에 좀 더 어두운 빨간색을 사용하는 방향으로 변형했습니다.

아이코노그래피와 관련에 좀 더 리서치를 진행해 수정했습니다. 색이 채워진 배경과 아이콘을 사용하는 대신, 색을 칠하지 않은 아이콘을 디폴트로 사용했습니다. 아이콘을 선택하면 그때 빨간색이 칠해진 아이콘으로 바뀌면서 텍스트는 굵게 바꾸기로 했습니다.

마무리

처음 해결하고자 했던 여러 문제를 해결하는 데 적합한 한 가지 솔루션을 만들어내는 것이 쉬운 일은 아니었습니다. 결국엔 해냈습니다. 프로토타입을 이 업계에서 수년간 일해온 사람들과 공유했으며 UX와 UI에 대한 반응 모두 매우 긍정적이었습니다.

곧 클릭 가능한 프로토타입도 추가하도록 하겠습니다. 업데이트 기다려주세요. 더 많은 정보를 얻고 싶으시면 주저 없이 연락 주세요. 제 트위터는 @ChaymaeLougmani입니다.

이 케이스 스터디가 도움이 되셨다면, 제가 쓴 다른 클라이언트의 프로젝트도 좋아하실 듯합니다.

Fitnessrevisited, spotlight on the new Body You Collective mobile app

새로운 업데이트가 올라올 때까지 기다려주시길 바라며 Virgin Atlantic의 표어를 남기겠습니다.

“꿈을 따라가고, 새로운 경험을 쫓으며, 아이디어를 현실로 바꿔야 할 때입니다.” — Virgin Atlantic

감사합니다.

2023년 6-7월에 촬영한 추천 VOD UX 강좌
(매일 1명만 선착순 신청 받습니다)
(조기 마감될 수 있습니다)

안녕하세요. UX 컨설턴트 전민수입니다.

브런치를 운영한 지 6년이 되었는데 어느덧 구독자 12,000명 되었네요.

여러분의 응원에 힘을 얻어 지금껏 아티클을 가능한 작성 했는데요. 많은 구독자께서 브런치 글을 강의로 제공하면 좋겠다는 의견이 많았습니다. 그래서 과거부터 최신 UX 아티클의 내용을 더 쉽게 전달시키는 목적으로 인터넷 강의 형태로 촬영하여 UX 라이브클래스 패키지 사이트에 오픈하게 되었습니다.

UX 라이브클래스 패키지를 통해 전체 178여 개 UX 강좌를 하나의 패키지 형태(총 300시간 이상) 대 공개합니다. 특히, 브런치 구독자에 한해 할인율 98%(정가 5,340,000원 > 할인가 98,000원, 평생 소장) 제공하고 있으니 여러분의 많은 관심 부탁드립니다. 참고로 매일 선착순 1명만 한정 판매하오니 서둘러 주세요~

(라이브클래스 플랫폼 회사 계약으로 인해 매일 선착순 1명만 수강 신청 가능하오니 양해 바랍니다)

PM VOD 패키지 바로가기 >