간편결제 서비스 리뉴얼
DATE
WORK
ROLE
TOOL
2024. 12 - 2025. 01
개인 작업
기여도 100%
UX/UI 디자인
Figma
하나 카드 앱을 간편 결제에 포커싱하여 하나 Pay로 개선하는 과정.
하나 카드 앱의 주요 기능인 ‘간편 결제'를 강조하고 유저 리서치를 바탕으로 페인 포인트를 개선하여 최근 확장되는 ‘간편 결제' 시장에서 경쟁력을 갖출 수 있도록 리디자인 했습니다.
BACKGROUND
변화한 소비 패턴
이용률 증가
유저 확보를 위한 온/오프라인 확장
활성화된 간편 결제
5명 중 3명은 사용 중
간편결제 이용률 역대 최대,
하루 평균 8000억…1년새 16.9%↑
하나카드 앱의
간편결제 서비스 고도화
한국인 62%가 사용하는 간편 결제
필요한 유저 중심 전략
참고 한국 은행
간편 결제가 활성화 되면서,
스마트폰 유저의 5명 중 3명은
사용 중인 일상적인 금융 서비스가 됐어요.
하나 카드는 간편 결제 외의 카드 내역과 관련
혜택들을 모두 확인해볼 수 있는 앱이지만,
간편 결제 시장이 활발히 성장하는 흐름에 맞추어
하나카드 앱의 간편 결제 서비스를 장점으로 강조해요.
결과적으로 서비스의 전반적인 편의성을 높여
유저 이탈율을 축소하고 수익성 증가를 기대해요.
상반기
2021년
하반기
2021년
하반기
2022년
상반기
2023년
상반기
2022년
5590억
6533억
7990억
8450억
7231억
이용 건수 (건)
2628만
2506만
2316만
2138만
1821만
이용 금액 (원)
55.2%
54.7%
47.7%
53.3%
61.5%
신한SOL페이
KB 페이
카카오페이
하나카드
삼성페이
경쟁사와 만족도 분석
하나페이,
간편 결제 서비스 중 이용률 4위
BENCHMAKING
2024년 10월 기준 (중복 가능)
참고 와이즈앱·리테일·굿즈
모바일 간편결제 서비스를 이용하는 이유는 이용의 편리성이 45.7%로 가장 높았어요. 이어 결제 혜택(24.2%), 기존 서비스와의 연계성(17.5%), 서비스에 대한 호기심(11.3%) 등의 이유가 있었어요.
모바일 간편 결제
사용하는 이유는 편리해서 45.7%
참고 DMC미디어
앱 사용 유인 요소 분석
45.7%
24.2%
17.5%
11.3%
편리성
결제 혜택
기존 서비스와 연계성
서비스에 대한 호기심
PROBLEM
다양한 부가 서비스 보다는
결제부터 하고싶은 유저들
앱을 사용하면서
약 80%는 불편하다는 반응
결제 화면을 찾기 어려운 점
많은 부가 서비스가 먼저 보여지는 점
SURVEY
참고 APP STORE
결제 관련
결제 외
기능 오류
UI 디자인
기타
UX 디자인
8
6
10
3
15
명세서 확인과 결제가 쉬운게 우선인데 어플이 너무 무거워요.
결제 할 때 QR 스캔이 어디있는지 몰라서 한참 헤맸어요.
카드 잔액이나 지출이 앱 접속하자마자 잘 보이지 않고
하나머니만 보여요. 불필요한 부분들이 너무 많아요.
앱이 너무 복잡해요. 간편 결제 정도만 만들어줬으면 좋겠어요.
앱을 다운로드 받아야지만 온라인 카드 결제가 가능해요.
1
2
전체 간편결제 서비스 시장에서 상위권을 차지했지만 사용성 측면에서 개선을 요구하는 VOC가 많았어요.
APP STORE를 리서치하고 분석한 결과 인터페이스와 사용성 관련된 아쉬움이 많았어요.
결제가 불편하고 부가 서비스가 많은 하나 카드
간편 결제에 집중, Pay 앱으로 만들기
하나 카드에서 가장 대표적인 혜택들 중
유저에게 필요한 분야, 사용했던 서비스를 우선으로 추천해줘요.
앱 첫화면을 사용자 개인화로 설정할 수 있게 해줘요.
부가적인 서비스는 최소화 해서 2뎁스, 하단에 배치해요.
결제 관련 주요 기능을 메인 탭에서 보여주고
결제 기능을 하나의 화면 안에서 해결해요.
PROBLEM
SOLUTION
PROJECT GOAL
결제 화면을 찾기 어려운 점
빠르고 쉬운 결제
많은 부가 서비스가 먼저 보여지는 점
앱 첫화면 개인화
경쟁사보다 간편 결제 사용을 독려할 수 있는 혜택
유저에게 정말 필요한 맞춤 혜택
결제 하고 싶을 때 필요한 버튼을 찾지 못했어요.
결제 관련 QR코드나 스캔하는 방법을 알기 어려워요.
하나카드에서 제공하는 혜택과 부가 서비스들은 많지만 유저들은 중복되는 과다한 컨텐츠에 피로감을 느껴요.
결제와 카드 잔액, 지출, 명세서 등 주요 기능을 사용하고 싶은데,
많은 부가 기능들이 먼저 보여져요.
1
1
2
2
3
3
pay
하나
일관성 있는 유저 경험 제안
앱 이름과 아이콘 통일하기
다른 앱들과 나열한 모습
함께 사용되는 하나 금융 앱들
앱 이름을 하나 페이로 변경
주요 기능인 간편 결제 기능 강조하며
앱 아이콘에 적힌 것과 통일성을 줬어요.
앱 아이콘 톤앤매너 유지
트렌디하고 플랫한 디자인에 하나 금융 CI 서체와
키컬러를 적용해서 타 앱들과 통일감을 유지했어요.
앱 아이콘과 이름 불일치
아이콘에는 Pay, 앱 이름은 카드로 표기하고 있어요.
유저에게 혼란을 일으켜 사용성을 저해할 수 있어요.
다른 하나 금융 앱들과 통일성 없는 디자인
하나은행, 하나머니는 타이포 그래피 위주의
플랫한 디자인을 사용하고 있어요.
하나은행
카카오페이
신한SOLpay
하나페이
KB Pay
현대카드
하나머니
네이버페이
PAYCO
하나페이
하나카드
COMPONENT
AS-IS
TO-BE
pay
하나
1
1
2
2
MOCKUP
키컬러를 강조한 스플래시 스크린
너무 많은 메뉴가 나열되는
복잡한 첫화면
마이가 첫 시작 화면으로 고정되어 있고
너무 많은 메뉴들이 모두 비슷한 크기의 아이콘으로
나열돼서 어떤 것 부터 봐야할지 정리가 잘 안돼요.
내 등급을 메인 탭에서 한번 더 들어가야
알 수 있어요.
명세서가 바텀시트로 보여져요.
중요한 정보는 요약되어있어요.
너무 많은 아이콘이 나열되면서,
가계부, 리포트 등 여러 기능들이 중복으로 계속 보여져서 피로감을 줘요.
연관성이 떨어지는 배너
명세서 하단에 카드 한도와
대출 한도 홍보가 함께 보여져요.
1
4
2
3
AS-IS
마이
첫화면 개인화,
한 눈에 보는 나의 결제
부가 서비스는 축약하고 자주 사용하는
중요한 기능들을 메인 루트에서 강조해요.
내 등급을 바로 알 수 있고, 관련 혜택을
확인하고 원하는 카드를 신청 할 수 있어요.
첫 화면을 유저가
설정하고, 언제든
변경할 수 있어요.
전체 지출, 카드별 사용 내역과
지출 흐름을 대시보드로 분석해줘요.
필요한 서비스는 검색으로 바로 찾아요.
지출 상한선을 정하고 절약하며 관리할 수 있어요.
결제 유도보다 효율적이고 건강한 금융 습관을 독려해요.
1
4
2
3
이번달 지출
VIP 고객
김하나님, 안녕하세요!
내 카드
833,356원
1,666,713원
지난달 보다 56,000원
검색
알림
마이
등록
혜택 보기
Untact 하나 체크 (4015)
JADE 프리미엄 (8212)
아메리칸 익
하나 JADE 신용카드 (3012)
583,349원
250,010원
1,8000원
35%
15%
35%
35%
50%
소비 브리핑
가계부
이번 달 계획 만큼 절약하고 있어요.
오늘까지 정해놓은 예산의 80%를 지출했어요.
내 계획 만큼 절약하고 있어요.
오늘은
12,8000원 썼어요.
0원
9일
8일
7일
10일
11일
+ 수입
12,8000원
12,8000원
50,000원
72,000원
9,000원
4,7500원
- 지출
1월 9일
일
월
년
절약 목표
80%
잘 하고 있어요!
마이
혜택
결제
여행
전체
이번달 지출
VIP 고객
김하나님, 안녕하세요!
내 카드
833,356원
1,666,713원
지난달 보다 56,000원
검색
알림
마이
등록
혜택 보기
Untact 하나 체크 (4015)
JADE 프리미엄 (8212)
아메리칸 익
하나 JADE 신용카드 (3012)
583,349원
250,010원
1,8000원
35%
15%
35%
35%
50%
원하는 화면을
첫 화면으로 볼 수 있어요.
첫 화면으로 설정
설정에서 언제든지 변경할 수 있어요.
마이
혜택
결제
여행
전체
TO-BE
마이
QR 스캔과 바코드 스캔 화면이 1뎁스 이상 분리되어 있으며,
화면이 바뀔 때 마다 암호를 풀어야해서 사용성이 떨어져요.
결제 후에는 해당 화면이 종료되고 결제 완료 피드백이 없어요.
카드 UI가 가로, 세로 방향이 혼용되고 있어요.
AS-IS
결제
QR, 바코드가 나뉘어진
불편한 결제 순서
동일한 기능이 중복으로
들어가있어서 IA에 혼란을 줘요.
1
3
QR과 바코드 스캔 화면이
1뎁스 이상 분리되어 있어요.
2
규칙성이
떨어지는
여백값
설정
알림
스캔
현장결제
쿠폰
결제
스캔 · 결제할 때 화면을 이동하지 않아도 돼요. 중복되는 버튼과 불필요한 프로모션 배너는 삭제했어요.
한 화면 안에서
바로 간편 결제
결제가 완료되었습니다.
4,800원
확인
확실한 결제 완료 피드백을 주고
하나금융 마스코트로 재미를 더했어요.
5
QR과 바코드 스캔 을 한번에!
화면을 이동하지 않아도 돼요.
4
결제완료
결제완료
GS25
5,800원
5,800원
2025.01.25
2025.01.25
설정
전체보기
알림
국내
최근 결제 내역
하나 JADE 신용카드 (3012)
스캔
현장결제
쿠폰
결제
쿠팡
PC 결제, 홈페이지 로그인, 제로페이 QR
QR코드를 스캔하세요
스캔, 현장 결제, 쿠폰 모두
하나의 탭에서 해결 할 수 있어요.
바코드와 QR코드를 아이콘화해서 시인성을 높였어요.
1
3
카드 UI를 가로 방향으로 통일하고
지갑 안의 카드와 같이 실물 경험과 연계한 구성으로 리디자인했어요.
2
TO-BE
결제
기준 없이 나열된
너무 많은 혜택들
유저의 결제 경험을 고려하지 않은,
형식적으로 수많은 혜택들이 나열된 화면이예요.
현장에서 필요하고 당장 사용할 수 있는
혜택은 무엇인지 파악하기 어려워요.
개인화 되지 않은 단순 프로모션이예요.
하나Pick이라는 타이틀로 수많은
프로모션들이 리스트 없이 계속 지나가요.
내 소비와는 관련 없는 혜택들이 먼저 보여져요.
어떤 혜택을 누릴 수
있는지는
바로 알 수 없어요.
3
1
2
AS-IS
혜택
내가 결제했던 브랜드 혜택
먼저 보여주기
유저가 결제했던 카테고리의 혜택부터 보여줘요.
직관적인 카드 UI로 카드마다 다른 혜택들을 쉽게 넘겨볼 수 있어요.
유저가 가장 많이 이용한 가게와
지출 횟수를 분석해줘요.
개인화된 혜택을 일관성 있는
리스트 UI로 보여줘요.
지출 성향에 맞는 혜택을 보여줘요.
내 카드 실적으로 받을 수 있는
혜택들만 골라서 보여줘요.
나에게 더 유리한 카드를 추천받을 수 있어요.
원하지 않으면 X버튼으로 배너를 끌 수 있어요.
1
2
간편결제 최대 3천원 즉시 할인
하나머니
받기
김하나님은 이번달
카페에 많이 지출하셨어요.
내게 필요한 혜택
1등
2등
3등
32회
15회
32회
더보기
검색
알림
혜택
스타벅스
메가커피
카페 파스쿠찌
560,000원
40,000원
32,000원
스타벅스 아메리카노 2잔
카페 무료 시음권 1잔
간편결제 최대 3천원 즉시 할인
이번달 최다 결제자
현대백화점
메가커피
받기
받기
받기
마이
혜택
결제
여행
전체
1월의 60만원 실적을 충족했어요.
하나 JADE 신용카드 (3012)
자주 사용하시는 카드의
혜택을 준비했어요.
받을 수 있는 혜택
다른 카드 보기
검색
알림
혜택
9천원 관람권
3천원 청구할인
롯데시네마
S-OIL
받기
받기
나에게 어울리는 카드 추천 받기
3
4
TO-BE
혜택
개선 후 화면으로 테스트 진행, 긍정적 수치 기록
RESULT
개선된 화면에 대한 선호도
사용성 테스트 분석 결과
하나 머니 사용을 유도하거나, 부가 서비스를 많이 보여주는 것 보다는
전반적인 편의성을 높여 수익성 증가를 기대해요.
11명 / 12명
긍정적
평가
사용성
일관성
가독성
목적성
심미성
4.5
4.3
3.8
5.0
4.2
총 평균 점수
4.4 / 5
추가 개선점
다른 부가적인 기능들 보다 결제가 먼저 보여서 좋아요.
쿠폰 리스트를 잘 보지 않는데,
나에게 필요한 혜택을 추천해줘서 한 번 더 보게됐어요.
간편해진 것은 좋지만 기존과 많이 달라져서,
다양한 연령대가 사용하는 금융 앱인 만큼 변화에 적응이 느린 고객군을 위한 가이드가 필요할 것 같아요.
사용성
목적성
심미성
일관성
가독성
진행일시 : 2025. 01. 17
참여인원 : 12명
Copyright © MINSOL DESIGN