Splitter 모바일 앱 디자인
지속적인 모임비 정산을 효율적으로 관리하는 서비스
Product Design
Iteration
Fintech
OVERVIEW
Splitter는 모임비 정산 서비스를 제공하는 더치페이 모바일 앱입니다. 기존 서비스의 복잡한 정산 단계와 낮은 접근성을 해결하고, 정기적으로 모임을 가지는 사용자들에게 지속적인 정산 관리 기능을 제공합니다.
DURATION
4주 ㅣ 28일 디자인 챌린지
PROJECT TYPE
팀 프로젝트 ㅣ 기여도 70%
(프로덕트 디자이너 2인)
PROGRAM
Figjam, Google Spread sheet, Figma
MY ROLE
데스크 리서치, 사용자 인터뷰, 인사이트 도출 및 UX/UI 설계, 사용성 테스트 전반적인 과정에 참여하였으며 특히, 디자인 시스템과 UI 디자인에 적극적으로 참여하였습니다.
KEY FEATURES
01
정산을 빨리 진행하고 싶은 사용자
사용자가 원하는 더치페이 방식대로
사용자는 더치페이를 귀찮고 복잡한 행위로 인식하고 있습니다.
문제를 해결하기 위해 더치페이를 친구 선택, 결제 항목 선택,
비용 나누기, 정산서 보내기 총 네 단계로 나누어 각 단계에
사용자가 선호하는 방식대로 비용을 정산할 수 있도록 했습니다.
총대가 돈을 일일히 계산해 공지하는 비효율을 줄이고, 특정 앱
사용자만이 누리는 것이 아니라 소외되는 사용자 없이 서비스를
이용할 수 있도록 단계를 설계했습니다.
02
정산을 재촉하기 어려운 사용자
마감기한을 설정하고 재요청하기
유저 인터뷰로 총무가 비용을 송금하지 않는 인원에게 정산을
해달라고 재촉하는 것이 가장 어려운 일이라는 것을 알 수
있었습니다. 스플리터는 부드러운 넛지로 비용을 송금하지 않은
사용자에게 알람을 보내고, 총무는 재요청하기 버튼으로 직접
이야기를 꺼내지 않고 송금을 요청할 수 있어 껄끄러운 상황에서
에너지를 낭비하지 않고 벗어날 수 있도록 도움을 줄 수 있습니다.
03
정기결제를 관리하고 싶은 사용자
친구를 그룹에 초대해 비용 관리하기
OTT 정기 구독, 정기적인 모임, 룸메이트, 여행 등 스플리터
메인 타겟 20, 30대는 친구와 함께 지출하는 빈도가 높습니다.
서비스 내에서 친구와 함께 그룹을 생성해 사용할 수 있습니다.
그룹 멤버에게 정산서를 보내고 이전에 함께 지불했던 목록을
확인하며 지불 여부를 체크할 수 있습니다. 단순히 소비를
정산하는 것에 그치지 않고 그룹 인원들이 비용을 관리하며
사용자가 지속적으로 스플리터를 이용할 수 있도록 유도했습니다.
DESIGN PROCESS
Empathy
시장 조사
경쟁사 분석
심층 인터뷰
Define
문제 정의
퍼소나
고객 여정 지도
Ideate
유저 스토리 맵핑
MVP
IA
스케치
Prototype
와이어프레임
디자인 시스템
Hi-Fi 디자인
프로토타입
Test
사용성 테스트
사용자 피드백
SUS
Improvement
디자인 수정
사용자 피드백
EMPATHY
금융 시장 조사
간편송금 시장의 성장과 핀테크의 전망, 더치페이 서비스가 제공되는 현황에 대해 조사했습니다.
시장 조사에 따르면, 모바일 뱅킹 서비스의 성장에 따라 모바일 더치페이 서비스가 확산되고 있지만
시중은행의 더치페이 서비스는 불편함으로 인해 사용률이 매우 저조하다는 것을 알 수 있습니다.
경쟁사 분석
더치페이 서비스를 제공하는 국내 금융, 핀테크, 해외 금융 세 가지 분류로 나누어 비교해
잘 기능하는 부분, 개선할 부분, 우리의 디자인에 반영할 부분을 분석했습니다.
비즈니스 사이즈를 기준으로 여러 경쟁사 중 국내 금융, 핀테크, 해외 금융 카테고리를 대표하는
세 경쟁사를 뽑아 접근성과 사용성을 비교해보았습니다. 국내 금융은 더치페이 서비스로 접근이 어렵고,
핀테크는 접근성은 우수하나 사용성에 불편함이 있었습니다. 반면, 해외 금융 앱은 우수한 접근성과
직관적인 사용자 인터페이스, 그룹과 블루투스로 친구 찾기 등 특화된 기능을 제공했습니다.
사용자 심층 인터뷰
경쟁사 분석을 통해 20/30대를 우리의 서비스 타겟으로 선정하고, 이들에 대한 깊이 있는 통찰을
얻기 위해 5명의 20대/30대 사용자를 (남성 2명, 여성 3명) 대상으로 심층 인터뷰를 진행하고,
공통된 의견을 세 가지로 분류한 뒤 이를 컬러 코딩을 통해 시각화했습니다.
컬러 코딩을 통해 사용자 5명의 세 가지 공통된 의견을 발견하고 카테고라이징 했습니다.
빨간색은 돈을 받는 사람 입장에서 달라고 재촉하기 곤란한 감정, 노란색은 모임이 끝난 후,
정산을 최대한 빠르게 진행하고 싶은 사용자의 의견, 파란색은 정기적으로 결제하는 항목에 대한
정기 결제 관리 시스템에 대한 니즈로 정리했습니다.
사용자 A
여성, 20대
“더치페이 요청을 하고 돈을 받아야 하는 입장에서 돈을 빨리 달라고 재촉하기 애매해요. 보통 돈을 보내야 한다는 걸 잊는 친구들도 있어서 많이 늦게 보내는 친구들도 있어요.”
사용자 B
남성, 30대
“친구들이 보통 송금하거나 요청하는 데 며칠 걸리는데, 저는 정산을 바로 하고 싶어요. 그래서 자리에서 손쉽고 빠르게 정산할 수 있는 기능이 있었으면 좋겠어요.”
사용자 C
여성, 20대
“넷플릭스나 스포티파이같은 정기 결제 플랫폼을 친구들과 구독하고 있는데 돈을 받아야하는 시기와 줘야하는 시기를 매번 챙기기 어려워요. 정기
결제를 관리하는 기능이 필요해요.”
DEFINE
문제 정의
컬러 코딩으로 정리한 세 가지 사용자의 감정, 의견, 니즈를 바탕으로 문제를 정의했습니다.
정산 과정에서 곤란한 감정, 지불 과정 기능에 대한 의견, 정기 결제 관리의 니즈를 중심으로
이 문제를 해결하기 위한 방안을 정돈했습니다.
정산 과정에서 곤란한 감정
입금 마감 기한 설정
입금 재요청 버튼 알람
지불 과정 기능에 대한 의견
영수증 스캔후 금액 나누기
NFC로 근처 친구 추가
정기 결제 관리의 니즈
OTT, 구독 서비스 그룹
룸메이트, 여행 정산 그룹
Persona & User Journey Map
더치페이 결제를 주도해 돈을 받는 사용자
Persona & User Journey Map
더치페이 결제에서 주로 돈을 보내는 사용자
IDEATE
유저 스토리 맵핑을 통한 MVP 설정
스플리터 서비스가 제공해야 할 핵심 기능을 식별하고 우선순위를 정하기 위해 유저 스토리
맵핑을 통해 MVP를 도출했습니다. "총무를 맡은 20대 대학생은 결제한 금액을 정산하고
사람들에게 요청해야 한다."라는 스토리로 사용자의 여정을 배열해 스토리 맵을 만들었고,
더치페이 등록, 공유, 정산, 세 가지 대표적인 여정을 바탕으로 각 활동을 완료하는 데 필요한 행동을
분류한 다음 MVP1과 MVP2를 선정하였습니다.
Information Architecture
유저 스토리 맵핑을 통해 분류된 MVP를 기반으로 정보 구조도를 설계했습니다. 세 개의 큰 카테고리
홈, 그룹, 내 계정으로 콘텐츠를 나누어 사용자에게 가장 자연스러운 플로우를 제공하는 것에 중점을 두었습니다.
화면 스케치
송금, 재요청, 그룹 기능에 중점으로 각 화면 별로 정보를 더하거나 빼면서 수정해 스케치 완성했습니다.
WIREFRAME
스플리터 홈
01
02
03
01
정산하기 요청
02
내게 요청된 항목
03
내가 요청한 항목
정산 요청
04
05
06
04
카메라 영수증 스캔
05
영수증 사진 업로드
06
직접 금액 입력
영수증 스캔
07
07
카메라 영수증 스캔
1/N 정산하기
08
08
전체 금액 1/N
품목별 정산하기
09
10
09
품목별 선택 정산
10
지불 친구 선택하기
친구 선택하기
11
12
13
11
NFC 근처 친구 찾기
12
친구 목록 검색
13
연락처 연동 친구
NFC 친구 찾기
14
NFC 근처 친구 찾기
15
수동 친구 추가하기
14
15
금액 정산 요청서
16
친구 목록 추가하기
16
정산 마감 기한 설정
17
정산 마감 기한 설정
17
정산 요청서 전송
18
정산서 보낸 친구
18
그룹 홈
19
내가 내야할 금액
20
내가 받아야할 금액
21
즐겨찾기 그룹
22
태그별 그룹
19
21
22
20
즐겨찾기 그룹
23
그룹 태그 추가
24
그룹 친구 추가
25
그룹 정산 추가
26
그룹 진행중인 정산
23
24
25
26
그룹 진행 중인 정산
27
28
29
27
진행 중인 정산 목록
28
정산 참여 인원
29
정산 현황 그래프
그룹 완료된 정산
30
30
완료된 정산 목록
그룹 정산 송금하기
33
34
31
32
31
송금 진행 중인 멤버
32
재요청 알람 보내기
33
송금 완료된 멤버
34
정산 참고 메모
내 계정
35
36
37
35
프로필 수정
36
연동계좌 관리
37
알림 설정
계정 연동계좌 관리
38
39
38
주계좌 설정
39
계좌 추가하기
연동계좌 추가하기
41
40
40
추가할 계좌 입력
41
계좌 인증 요청하기
FINAL HI-FIDELITY DESIGN
스플리터 홈 화면에서 NFC로 친구 찾고 정산하기
정산 비용을 보내지 않는 친구에게 재요청하기
그룹에서 새로운 정산을 요청하기
IDEATE
사용성 테스트
5명의 참가자를 대상으로 사용성 테스트와 인터뷰를 진행했습니다. 사용자에게 6개의 과제를
부여하고 프로토타입에 대한 질문에 답하도록 했습니다. 제품의 사용성은 오류 수, 작업 완료 시간을
기준으로 평가되었으며, 테스트 후 받은 피드백을 통해 UI를 수정했습니다.
사용자 피드백
5명의 참가자를 대상으로 한 인터뷰에서 ‘그룹 기능에 대한 긍정적 평가’와 '홈 화면의 간결한 UI',
'영수증 스캔과 1/N, 품목 선택 두 기능 중 선택해 정산하기에 대한 긍정적 반응'이 공통적으로 등장했습니다.
집세·관리비
2명
룸메이트
김영은
₩625,000
류동하
₩625,000
그룹이 좋은 것 같아요. 이렇게 그룹으로
더치페이 할 수 있는 서비스는 못봤어요.
정산하기
송금하기
재요청하기
친구 목록
정산하기만 있으니까 더 명확하고 접근성이 좋네요.
진행상황 알 수 있는거나, 재요청하기 기능도 좋네요.
품목 선택
1/N
품목
수량
가격
맨빈트너스 샤도네
호주 냉장 살치살팩
1
1
73,580
83,450
영수증 스캔하는 것 좋아요. 품목별로 선택해서
지불할 사람을 선택하게 하는 것도 좋은 것 같아요.
System Usability Scale
5인의 SUS 평균 점수는 75.4점으로 Acceptable 수준으로 평가되었습니다.
사용자 모두 스플리터를 타인에게 추천한다고 대답하였으며 특히, 그룹 기능이 시중
은행 혹은 핀테크 업체의 기능으로 나왔으면 좋겠다는 의견을 주었습니다.
5인 평균 점수
75.4
Not Acceptable
Marginal
Acceptable
User A
User B
User C
User D
User E
67.5
77.9
72.5
70
75.2
75.4
Good
WHAT I LEARNED
명확한 정보를 제공하는 UX Writing의 중요성
스플리터의 정산하기는 '더치페이', 'N분의 1', '분담 결제' 등 용어에 대한 바리에이션이
많이 등장했습니다. 처음에는 국립국어원 표기에 따라 '분담 결제'라는 용어를 사용해 디자인을
진행했습니다. 후에, 사용자들이 '분담 결제'가 무엇이냐는 질문을 여러 번 하는 것을 보고 프로덕트를
사용하는 과정에서 UX Writing이 명확해야 사용자가 혼란을 겪지 않겠구나라는 것을 피부로 깨달았습니다.
그 경험을 통해 다른 프로덕트를 디자인하는 과정에서도 사용자 입장에서 생소하거나 어려운 단어는
없는지 한 번 더 확인할 수 있는 계기가 되었습니다.
숫자를 다루는 User Interface
금융 서비스 특성상 수치와 숫자를 UI 요소로 함께 디자인했습니다. 돈의 거래와 관련된 부분이고,
사용자의 신뢰를 위해 정확한 정보를 제공해야 했습니다. 특히, 정산하기와 송금하기 부분은 날짜와
시간, 금액과 금액 단위, 달력 등 많은 숫자 요소가 UI에 함께 등장했기 때문에 사용자가 가장 편하게
인식할 수 있는 레이아웃에 대한 테스트를 진행하고, 숫자의 좌측 정렬과 우측 정렬 등 디테일한 디자인을
수정하며 스플리터에 가장 적합한 UI를 적용하기 위한 노력을 했습니다.
NEXT STEP
다양한 형식의 디바이스 디자인
디자인한 UI 외에도 MVP의 후순위인 온보딩 화면을 디자인해 사용자가 스플리터를 사용하는 데에
도움이 되고 시중 은행에 이런 기능을 제안해보고 싶은 마음이 있습니다. 또한 금융앱은 보통 모바일
디스플레이 사이즈로만 디자인 되는데 이 디자인을 태블릿 사이즈로 확장해보고 싶은 마음이 있습니다.