그린카 UX 개선하기
[코드스테이츠 PMB 9] 정보계층구조도(IA), 기능정의서까지
지난 글에서 그린카의 아쉬운 UX를 정리해보았습니다.
이번 글에서는 아쉬운 UX를 직접 개선해 보려고 합니다.
글의 전개는 다음과 같습니다.
1. 서비스 기획 산출물
2. 무엇이 문제인가?
3. 목적이 무엇인가?
4. 문제 자세히 보기
5. 해결방법
5-1 어디를 손보는가? (IA)
5-2 페이퍼-프로토타입 (Paper-Prototype)
5-3 기능이 어떻게 변하나? (기능 정의서)
1. 서비스 기획 산출물
서비스 관련 요구사항을 모아 문제를 파악하고, 이를 해결하는 과정에는 다양한 서비스 기획 산출물들이 활용됩니다. 문서들은 두 가지 목적을 갖습니다.
1) 빠른 피드백을 통한 효율적 업무 : 한참 작업이 진행된 뒤 문제를 발견하면 큰 자원손실이 발생할 수 있습니다. 서비스 기획 산출물을 통해 업무 방향을 유지할 수 있습니다.
2) 업무 관계자들과의 협업 : 서비스 기획 산출물을 통해 디자이너, 개발자들이 만들고자 하는 목표를 통일시킬 수 있습니다. 말이나 텍스트로만 정의된 솔루션은 사람마다 모두 다르게 받아들일 수 있습니다.
서비스 기획 산출물의 종류는 다양합니다. 몇 가지 간략히 소개해드리면 서비스정책서, 정보계층구조도, 기능정의서, 화면설셰서, 플로우차트가 있습니다.
1. 서비스정책서
: 서비스에 적용될 수 있는 법적인 요소 모두를 고려하여 만들어진 정책 문서입니다.
2. 정보계층구조도(IA)
: 복잡한 구조의 틀 위에서 서비스 구성과 기능을 보여주는 문서입니다.
3. 기능 정의서
: 기획한 기능에 대해 개발자와 소통하기 위한 문서입니다.
4. 화면 설계서 (Storyboard)
: 최종적으로 유저에게 보일 화면의 모습을 작성한 문서입니다. 화면과 기능을 모두 볼 수 있습니다. 와이어프레임 + 기능정의서 + 정책
5. 플로우차트
: 사용자 앱의 이동 순서도로 기능에 집중한 문서입니다.
2. 무엇이 문제인가?
그린카 App 사용 경험이 매끄럽지 않다고 보았습니다. 검색부터 예약완료까지의 이용경험을 개선할 필요가 있다고 판단했습니다.
3. 목적이 무엇인가?
'검색부터 예약완료'까지의 App 사용경험(UX)를 개선하여 고객 이탈율을 최소화하는 것이 목적입니다.
4. 문제 자세히 보기
이 글에서 다룰 부분은 '검색부터 예약완료'까지입니다. 문제를 자세히 보기 위해 3구간으로 구분하고 구체화했습니다.
[그림1] 검색~예약완료 부분문제들을 정리하면 다음과 같습니다.
< 발견 >
① 랜딩페이지에서 검색 창의 위치
② 랜딩페이지에서 직관적이지 않은 시간설정
③ 검색 페이지 아래 키워드와 플레이스홀더(placeholder)의 낮은 연관성
④ 장소 검색결과 없을 경우 추천 인근주소 지도에서 확인불가 (거리상 원하지 않는 곳일 수 있음)
< 선택 >
① 인근지역 맵마커(map marker) 비교 어려움. 팝업 닫고, 다른 맵마커 클릭하여 확인
5. 해결방법
먼저, 서비스 전체 구조에서 문제가 일어나고 있는 위치를 파악합니다. 거시적 관점에서 문제를 파악하는 건 개선 내용을 구체화하는데 도움이 됩니다. 특정 기능을 개선할 때 자칫 연결되어 있는 다른 기능을 확인하고, 문제 발생을 사전에 방지할 수 있습니다.
문제 부분을 파악하면 개선 내용을 빠르게 그려보는 페이퍼 프로토타입을 만듭니다. 그리고 개발자가 직접 구현할 수 있도록 기능에 대한 상세한 정보를 기능명세서로 정리하게 됩니다.
5-1 어디를 손보는가? (IA, Information Architecture)
아래 [그림2]에서 문제 지점은 랜딩페이지에서 '검색 창 - 시간설정 - 차량선택'과 '맵 마커 간 결과 조회'입니다. 개선작업이 진행될 부분은 [랜딩페이지] [검색창] [추천 검색어] [시간설정]입니다.
[그림2] 그린카 IA5-2 페이퍼-프로토타입 (Paper-Prototype)
1) 검색 창 - 시간설정 - 차량선택
• 검색과 시간은 차량 대여 시 가장 중요한 요소입니다. 따라서 App에 들어가자 마자 눈에 잘 띄는 상단에 두었습니다. 고객은 장소와 시간을 동시에 수행하게 됩니다. 바로 옆에 붙여 놓음으로써 한 가지를 완성하면 나머지도 완성하게 유도할 수 있습니다. 검색과 시간을 상단에 위치시킨 건 검색기능이 많은 경우 스크린 상단에 위치한다는 점을 고려했습니다(제이콥의 법칙)
• 장소 검색결과가 없을 경우, 검색 창(팝업) 아래 지도에서 인근 추천 장소를 곧바로 확인할 수 있습니다.
두 가지 설정이 끝나면 해당 위치로 이동해 대여 가능한 차량을 조회할 수 있습니다.
• '검색 창' 아래 키워드를 위치시켜 고객의 행동에 도움을 줄 수 있습니다. 다만, 플레이스홀더 '어디에서 출발하세요?'의 답변에 맞게 키워드를 조정하는 것이 바람직할 것 같습니다.
[그림3] 페이퍼 프로토타입2) 맵 마커 간 결과 조회
• 장소와 시간 설정 후 차량을 조회하고 비교하는 단계에선 차량 종류와 연비, 가격 등을 비교하게 됩니다. 이때 인근 맵 마커의 차량들을 쉽게 조회할 수 있도록 좌우 스와이프(swipe)로 맵 마커를 이동할 수 있도록 합니다. 이는 맵 마커 '클릭-확인-닫기' 다른 맵 마커 '클릭-확인-닫기'를 반복하지 않고, 쉽게 비교할 수 있게 도와줍니다.
5-3 기능이 어떻게 변하나? (기능 정의서)
프로토타입에서 설명한 내용을 정리하면 다음과 같습니다. [그림4] 기능 정의서는 기획한 내용을 개발자와 소통하는데 활용됩니다.
[그림4] 기능 정의서그린카의 문제를 발견하고, 이를 해결하기 위해 정보구조도(IA)와 페이퍼 프로토타입까지 만들어보았습니다. 이 글에서 '각 단계를 왜 지금 고민하고, 진행해야 하는지' '그 전 단계와 다음 단계 사이에서 수행해야할 반드시 중요한 이유가 있는지'를 중심으로 고민해보았습니다.
