서비스의 UX / UI 개선 분석하기
안녕하세세요.
최근 과제를 통해서 다양한 서비스들을 많이 알게되었는데요.
너무 많은 서비스들로 인해서 주제 선정에 더 고민을 하는 요즘인 것 같습니다. (행복한 고민인거겠죠?🤔)
오늘은 고민 끝에 친숙하고 필수적으로 사용해야하는 앱 코레일톡을 선정하였습니다.
선정의 가장 큰 이유는 오늘 과제 내용 중 해당 서비스의 메인 기능 혹은 주요 기능 중 1개를 선택하라고 하였는데요.
최근 토스, 뱅크샐러드, 컬리 등 다양한 서비스를 제공하고 있는 앱들을 만나보다 보니,
대표적인 하나의 기능을 제공하는 앱이 어떤게 있을까 생각을 해보았습니다.
🚄 그때 저의 머릿속에 스쳐지가는 코레일톡.
기차 예매을 위해서만 사용하는 코레일톡이 생각이 났습니다(주저리주저리)
코레이톡에 대해서 간단하게 설명드리며, 한국철도공사의 모바일 승차권 예약이 가능한 애플리케이션으로 일반 승차권뿐만 아니라 정기 승차권, 패스권까지도 코레일 톡으로 예매가 가능합니다.
들어가기 전..
오늘은 서비스의 UX / UI 개선 분석하기의 큰 주제 아래
User Flow를 그려보고, User Flow에서 UX 개선이 필요한 부분(문제가 되는 부분)을 서비스 이용자의 관점에서 정의 및 분석하고, 그것을 기반으로 와이어프레임을 제작해보고, 최종적으로 개선점을 개발한다고 가정하고 PRD(WHY 기반의 기획서 형태), 1페이지의 기획 산출물을 작성해 보는것인데요.
조금 많이 많죠,,, 저도 그렇게 생각했습니다.
글을 보시는 분들 중 앞서 나온 User Flow, 와이어프레임, PRD 등에 대한 개념들에 대해서 잘 아시는 분들도, 모르시는 분들도 있을 것이라 생각하는데요.. 모르시는 분들을 위해 그리고 공부하는 저를 위해 아래 과제를 진행하면서 해당하는 개념에 대해서 짧게 설명드리도록 하겠습니다. 그럼 본격적으로 과제 수행해보겠습니다!🤓
1. User Flow
🤔 해당 서비스의 메인 기능 혹은 주요 기능 중 1개를 선택해 기능의 시작부터 끝까지의 User Flow를 그려봅시다.
User Flow란 사용자가 서비스로 어떠한 작업을 완료하기 위해 거치는 모든 단계에 관한 설계를 말합니다. 쉽게 말해, 사용자가 서비스를 사용할 때 경험할 동선을 설계하는 일이라고 생각하면 됩니다.
그럼 코레일톡의 User Flow를 그려보도록 하겠습니다.
사용자가 코레일 톡에 진입하여 기차표를 발매하고 로그인 및 회원가입을 진행하고 결제를 완료한 뒤 승차권을 확인하는 과정의 플로우를 그려보았는데요, 할인 정기권, 관련 상품의 탭에서 몇가지만 추가하면 기본 플로우는 겹치는 것 같은데 우선은 메인 흘름으로 그려보았습니다.
2. 개선점 정의 및 분석
🤔 해당 서비스의 User Flow에서 UX 개선이 필요한 부분(문제가 되는 부분)을 서비스 이용자의 관점에서 정의 및 분석합니다.
코레일 앱을 이용하면서 앱의 UX/UI 개선의 필요성을 많이 느낀 어플 중에 하나였습니다.
코레일 앱은 콘텐츠, 정보, 흐름, 인터페이스의 대부분의 부분에서 문제를 가지고 있다고 생각했습니다.
개선하고 싶은 부분이 너무 많아서 어떤 부분을 선정해야할지 고민이 많았던 앱이었습니다..
개선안으로 선택한 기능명 및 화면으로는 열차 조회 기능 및 화면입니다.
아래 열차 조회의 현재 화면과 더불어 개선점을 정리해보겠습니다.
| NO | AS IS | TO BE |
| 1 | ktx, 무궁화호 열차의 구분이 어려움 | 열차별 색상의 차별화로 구분 가능 |
| 2 | - 열차 조회 아래 부산 →서울이 나와있음에도 출발, 도착 시간에 중복적으로 기입된 정보 - 소요시간을 계산해야하는 귀찬음 |
출발, 도착 정보에는 시간(숫자)만 제공 소요시간 제공 |
| 3 | 열차 정보를 조회하는 화면에서 가격으로 충분함에도 멤버십 5%는 너무 과한 정보 제공 | 결제 화면 상세한 설명으로 멤버십 할인률이 적용될 수 있도록 제공 |
| 4 | - 전체로 나타나는 메뉴바는 어떤 걸 선택하는 것인지 가늠이 안가서 무조건 눌러봄 - 열차와 좌석은 다양한 선택지를 나타내는 비슷한 메뉴바로 통합 -직통, 환승 2개의 선택안뿐이 없는데 메뉴바를 눌러서 선택해야하는 귀찮음 |
-열차와 좌석을 동시에 선택할 수 있는 메뉴바로 통합하여 제공 - 직통, 환승 2개의 선택안은 직관적으로 바로 선택할 수 있도록 제공 |
| 5 | 모래시계의 용도를 모르겠음 | 모래시계는 매진임박을 뜻하는 것으로 매진 임박 단어 그대로 사용 |
| 6 | 매진과 매진이 아닌것의 구분이 어려움 | 매진의 버튼을 회색 및 확실하게 구분될 수 있도록 버튼 제공 |
3. 와이어프레임을 제작
🤔 2번에서 나온 개선점 중 시급한 문제를 선택하여 어떻게 화면(UI)을 개선할 수 있는지에 대해 와이어프레임을 제작해 봅니다.
2번에서 작성한 개선점 중 하나만 선택하면 되는데,,, 욕심을 부려서 모두 개선할 수 있는 와이어프레임에 대해서 제작해보았습니다.
툴은 카카오 오븐을 사용하였고 to-be 부분을 반영한 코레일톡의 열차 조회화면 와이어프레임입니다.
4. 한페이지의 기획 산출물
🤔 개선점을 개발한다고 가정하고 PRD(WHY 기반의 기획서 형태), 1페이지의 기획 산출물을 작성해 봅시다.
고객의 요구사항을 분석하고 와이어프레임까지 그렸다면 실제 설계로 이어질 요구사항을 정의해보도록 하겠습니다.
요구사항 정의는 요구사항 문서(product requirement document, PRD)을 활용해서 작성해보겠습니다.
잠깐! PRD에 대해 살펴보면, PRD는 상품의 내용과 목적, 특징, 기능 등을 명확하게 설명하여 상품 제작에 참여하는 팀원들에게 그들의 업무 수행에 대한 정보를 제공하기 위한 문서로 주로 실리콘밸리 기업에서 활용되는 개념이나, 내용상으로는 국내 ICT기업에서 작성하는 상위기획서와 유사하다고 합니다. PRD는 WHY 기반의 기획서 형태로 총 6개 이상의 구성요소로 이루어져있습니다. 오늘은 6개 중 총4개를 기준으로 PRD를 작성해보겠습니다.
1) 요약 및 배경(Summary and Background)
⚙️ 문제가 무엇이며, 왜 중요한가? 기획의 중요성을 검증 또는 강조하기 위해 유저 리서치의 내용 등을 포함하는 것이 좋다.
코레일톡은 한국철도공사의 운영하고 있는 서비스입니다. 하지만 낮은 사용성으로 스토어의 리뷰에 불편함점을 토로한 사용자들이 많은데요. 국토교통부의 자료에 따르면 2021년 기준 KTX를 이용한 사람은 월 평균 380 만 명의 사람이 코레일톡을 이용한 것으로 나타났습니다.
380만 명의 엄청난 수의 MAU를 가지고 있다는 말입니다. 하지만 그 숫자에 비해 앱스토어 우저 평가는 구글 스토어 4.4/ 앱 스토어 1.7으로 낮은 수치를 보이고 있는데요. 이를 통해 사용자들이 pain-point 를 가지고 있다는 것을 알 수 있었는데요.
리뷰 및 실제 사용 경험을 토대로 문제에 대해서 정의하면
너무 많은 인터렉션, 정보의 위계질서, 다양한 사용자를 고려하지 않은 디자인, 복잡한 프로세스 등 다양한 문제를 가지고 있었습니다.
2) 주요 사용자(Target Users)
⚙️ 주요 사용자는 누구이며, 우리 서비스에서 이 사용자 그룹이 중요한 이유를 포함 해야 한다. (우선순위 강조 필요)
앞서 통계자료를 통해서 설명드린 바, 코레일 톡은 특정 대상이 주요 사용자가 아닌 전 국민이 사용자로 380만 명의 엄청난 수의 MAU를
보유하고 있습니다. 이처럼 KTX와 기차를 예매할 수 있는 유일했던 플랫폼인만큼(현재는 코레일톡 없이도 네이버, 카카오T 해당 앱에서 간편하게 승차권 구매가 가능합니다. ) 청소년부터 중장년층까지 광범위한 사용자를 가지고 있었는데요. 특정 고객이 없는 만큼 모든 사람을 위한 디자인을 실현해야하므로 유니버설 디자인적인 측면까지 고려가 필요합니다.
🔎 단어 알아보기!
** 유니버설 디자인은 '모든 사람을 위한 디자인(Design for all)' 혹은 '보편적 디자인'으로 불리며, 연령, 성별, 국적, 장애의 유무 등에 관계없이 누구나 편안하게 이용할 수 있도록 건축, 환경, 서비스 등을 계획하고 설계하는 것입니다.
3) 핵심 사용자 여정(Critical User Journeys (CUJs))
⚙️ 문제 해결 후, 우리가 정의한 사용자는 서비스(기능, 제품)을 어떻게 사용하게 될 것인지 고객 요구에 집중하여 작성한다.
기차를 타고 다른 곳으로 이동하고 싶은 남녀노소 유저가 직관적인 인터페이스와 쉽고 빠르게 수행할 수 있는 흐름으로 기차표를 예매할 수 있도록 한다. 사용자의 타켓층이 따로 정해져있지 않아 유니버설 디자인을 고려해서 서비스 이탈률과 불만도를 낮추기 위해서입니다.
4) 기능적 요구사항(Functional requirements)
⚙️ 해결 방안의 세부 기획을 작성한다. 최대한 상세하게 정리하는 것이 좋다. 다만, 특정한 솔루션을 강요하지 않도록 주의한다.
개선안으로 선택한 기능명 및 화면으로는 열차 조회 기능 및 화면에 대한 기능적 요구사항을 작성해보겠습니다.
| ✔️ 열차별(KTX, 새마을, 무궁화, 통큰열차 등) 구분을 할 수 있도록 각 색깔 부여 |
| ✔️ 출발, 도착 정보에는 시간(숫자)만 제공할 수 있도록 각 출발,도착지 삭제 |
| ✔️ 소요시간(도착시간- 출발시간) 계산을 함수를 통한 시간 제공 |
| ✔️ 멤버십 할인률 여부와 적용 금액은 결제 화면에서 보여질 수 있도록 수정 |
| ✔️ 열차와 좌석을 동시에 선택할 수 있는 메뉴바의 통합 |
| ✔️ 직통, 환승 2개의 선택안은 직관적으로 바로 선택할 수 도록 수정 |
| ✔️ 모래시계는 매진임박을 뜻하는 것으로 매진 임박 단어로 변경 |
| ✔️ 매진 버튼을 회색 및 확실하게 예약 가능 버튼과 구분될 수 있도록 색상 변경 |
'PMB_15기 > DAILY' 카테고리의 다른 글
| [코드스테이츠 PMB 15기_W5D1] 차가 필요한 모든 순간, 쏘카 (0) | 2022.11.14 |
|---|---|
| [코드스테이츠 PMB 15기_W4D4] 독서와 무제한으로 친해지리, 밀리의 서재 (0) | 2022.11.10 |
| [코드스테이츠 PMB 15기_W4D2] 더 나은 내가 되는 곳, 뱅크샐러드 앱 리뷰 (0) | 2022.11.08 |
| [코드스테이츠 PMB 15기_W4D1] 일상을 편하고 맛있게, 윙잇 (1) | 2022.11.07 |
| [코드스테이츠 PMB 15기_W3D3] 나다운 진짜 여행, 마이리얼트립 (1) | 2022.11.02 |