경비 청구 iOS 앱 UX UI 개선
더 쉽고 간편한 경비 청구 프로세스를 위해 iOS용 경비 청구 앱을 개선했습니다.
Role
iOS 앱 디자인을 통해 경비 청구 제출 과정을 간소화했습니다. 문제정의, 리서치, IA 재설계, 와이어프레임,
프로토타입 제작, 사용성 테스트, 디자인 시스템 적용, 그리고 PM 및 엔지니어와 협업하여 QA 문서를 제작했습니다.
Team
디자인 리드 2명, PM 2명, QA 팀 1명, 개발자 2명, 프로덕트 디자이너 1명과 협업했습니다.
프로젝트 배경
경비 청구 프로세스 개선 ⎯ 경비 청구, 왜 이렇게 어렵죠?
문제 파악
"이거, 어떻게 하는거죠?"
기존의 웹 경비 청구 서비스를 사용하면서
경비 청구 프로세스의 개선 여지가 필요하다는 것을 발견했습니다.
비전문가에게는 복잡하고 이해하기 어려운 시스템
재무직군 외 사용자들에게는 경비 청구가 어려울 때가 있습니다.
경비청구 과정을 더 간단하게 개선하는 것이 필요했습니다.
기존 서비스 개선 필요성
복잡한 경비청구, 누구를 위한 시스템일까요?
재무 관리자에게는 상세한 서비스가 유용했지만,
일반 직원 사용자들은 경비 청구와 승인 과정이 번거로웠습니다.
프로젝트 성과 및 영향
성과
경비 보고서 작성 과정을 간단하게 간소화했습니다.
영향
보고서 작성 시간은 50% 단축되었습니다.
문제 제시
리서치
한국 비즈니스 출장 경비 시장을 이해하기 위한
경쟁사 분석 리서치를 진행했습니다.
핵심지표
경비 청구에 걸리는 평균 시간을 측정했습니다.
개선 중요성 강조
보고서 작성 시간이 줄어들 때 기업이 얻는 이점을 파악했습니다.
현재 프로세스
사용자들이 겪는 복잡한 경비 청구 프로세스에 대한 문제를 제시했습니다.
이해관계자 설득
리서치 내용을 기반으로 경비청구 프로세스 문제를 파악하고 해결하는 것이 중요하다는 점을 강조했습니다.
주요 리서치 결과
경비 관리 솔루션 시장은 높은 성장 잠재력이 있다는 것을 확인했습니다.
거래 규모
약 172조 원
시장 순위
세계 7위의 비즈니스 경비 시장
수작업 비율
38%의 기업들이 재무 업무를 수작업으로 처리하고 있었습니다.
불만족도
직원의 64%가 경비 청구에 드는 노력에 불만을 느끼고 있습니다.
절감 효과
경비청구에 드는 시간을 10% 절감하면,
기업들은 연간 $92,400을 아낄 수 있습니다
사용자 문제 정의
경비 보고서 작성 지연 문제
유저 리서치
4명의 부서 직원을 인터뷰하여 만족도와 문제점을 파악했습니다.
사용자 만족도
기존의 시스템은 종이 기반 시스템에 비해 추적이 쉽다는 점에 만족도가 높았습니다.
승인자는 알림을 받자마자 경비 청구를 검토하고 승인합니다.
주니어 개발자
"경비청구 시스템은 이전 회사의 종이로 제출하던 시스템보다 훨씬 편리합니다."
디자인 팀 매니저
"환급 시간을 단축하는 것이 중요해요,
그래서 팀원들의 청구서를 신속하게 승인합니다."
사용자 불만
직원들은 보고서 작성 과정에 시간 소모하는 것에
불만을 느꼈습니다.
시니어 디자이너
"예상치 못한 야근으로 카드를 사용해야 했는데
이후에 보고서 작성하는 것이 불편했습니다."
영업 매니저
"장기 프로젝트의 기준과 날짜가 불분명할 때
혼란스러웠어요. 명확한 지침이 필요해요."
주니어 개발자
"웹의 세부 기능이 너무 복잡했어요.
저는 기본적인 보고서와 상태 알림만 필요합니다."
사용자 행동
직원들은 주로 마감 직전에
보고서를 제출했습니다.
영업 매니저
"기한을 맞추기 위해 급히 데이터를 입력하거나, 확인을 위해 재무팀에 연락합니다."
시니어 디자이너
"마감기한에 대해 재무팀에서 안내 받을 때만
청구할 영수증을 확인합니다."
가장 많은 사용자에게
도움 되는 문제 해결에 집중
인터뷰 결과를 종합하여
사용자들이 겪는 주요 문제를 파악했습니다.
더 넓은 사용자에게 가치를 제공할 수 있는 잠재력에 따라
문제의 우선순위를 설정했습니다.
우선순위 기준은 대다수 사용자에게 도움이 될
기능 개선 사항을 평가하는 데 집중했습니다.
목표
직관이 핵심 — 쉽게 만들기
승인자보다 일반 직원이 더 많기 때문에, 경비 보고서 작성 과정을 단순화하는 것이 최우선 과제였습니다.
보고 과정의 복잡성을 줄이는 것이 사용자 만족도와
효율성 개선에 가장 큰 영향을 미칩니다.
빠른 승인 속도
신속한 승인과 쉬운 경비 제출을 우선시합니다.
과정 간소화
빠르게 일을 처리할 수 있도록 절차를 간소화합니다.
사용자 친화성
사용자들은 복잡하지 않고 빠른 보고 과정을 원합니다.
직관적 인터페이스
누구나 쉽게 사용할 수 있는 직관적이고 깔끔한
인터페이스를 적용합니다.
모바일 앱
출장이 많은 사용자들을 위한 모바일 앱을 개발합니다.
문제 해결 접근
IA를 통합하여 데이터 입력 시간을 줄이는 방식을 통해 프로세스를 간소화했습니다.
유저 저니맵
사용자 인터뷰를 기반으로 기존 경비 보고서 작성 단계를 분석했습니다.
IA 재설계
각 단계를 분류하고, 현재 IA가 새 앱에 어떻게 적용될 수 있을지 검토했습니다.
문제해결을 위한 아이디어
각 단계의 문제를 파악한 후, 신규 앱의 더 효율적인 프로세스를 설계하기 위해
아이디어를 브레인스토밍했습니다.
기존 경비청구 보고서 작성 단계 분석
➊ 보고 기능을 제공하는 탭이 불분명합니다.
➋ 다양한 비용 관련 정보를 정리하는 데 시간이 걸립니다.
➌ 진입점을 인식할 수 없어 진행 상황에 대한 정보가 모호합니다.
➍ 개인 파일을 함께 저장할 때 데이터 분리에 불편함이 있습니다.
➎ 모호한 경비 범위로 인해 상세한 비용 정보를 입력하는 것이 어렵습니다.
IA 리디자인으로 프로세스 간소화
사용자들은 경비청구 서비스의 중복된 기능과 프로세스에 혼란스러워 했습니다.
IA 재설계로 요청에서 승인까지 부드럽고 간소화된 과정을 만들어냈습니다.
Issues
카드, 사용내역, 지출에 대한 정보가 여러 지점에 걸쳐
반복되어 혼란을 야기했습니다.
Solution
경비청구 보고서 작성 소요시간
경비청구 보고서 작성 과정에서
가장 시간이 많이 소요되는 단계를 찾았습니다.
User test
경비청구에 대한 경험이 전혀 없는 사용자를
인터뷰했습니다.
Tracked time
Details
Issues
경비 목적과 날짜를 입력하는 시간이
다른 항목에 비해 오래 걸렸습니다.
Solution
시각화
도출한 해결방법 적용
사용자 니즈를 충족하기 위해 솔루션을 적용하고 콘텐츠 우선순위를 정해 프로토타입을 제작했습니다.
와이어프레임
경비 보고서의 플로우를 시각화하기 위해 와이어프레임을 제작했습니다.
테스팅
이후, 세 가지 초안을 제작하고, 프로덕트 일관성을 기반으로 프로토타입 A를 선정했습니다.
홈
주요기능
해당 월 경비청구 금액과 알림을 확인할 수 있습니다.
경비 청구 상태, 결재 요청과 수신한 내역을 확인할 수 있습니다.
최근 지출한 내역 중 경비청구 미진행내역을 확인할 수 있습니다.
첨부한 영수증을 미리 보기로 제공합니다.
경비 청구 내역을 목적 및 카드별로 분류한 차트를 제공합니다.
빠른 접근 기능
경비 보고서를 쉽게 생성할 수 있는 플로팅 버튼
카드 거래 내역을 선택하거나 직접 입력으로
경비를 기록할 수 있는 유연한 입력 옵션 제공
첨부 문서 선택
영수증 첨부
날짜별로 정리된 영수증 보관함에서
영수증을 쉽게 첨부할 수 있습니다.
캘린더 알림
초과근무, 외근, 출장 등과 관련된 날짜를 표시하여
직관적인 날짜 선택을 지원합니다.
경비 청구 세부 정보 입력
자동 입력
매출 전표 및 가맹점 정보 등 경비 세부 사항이
자동으로 보고서에 추가됩니다.
사용자 입력
경비 목적을 입력하고 적합한 업무 경비 카테고리를 선택합니다.
승인 라인 추가
사용성 테스트
새로운 프로세스가 목표를 달성했는지
검증하기 위해 사용성 테스트를 진행했습니다.
테스트는 주요 문제가 해결되었는지 평가하기 위해
경비 보고서 작성 프로세스에 중점을 두었습니다.
테스트 방법
실제 사용자의 환경을 시뮬레이션하기 위해
원격 테스트로 진행되었습니다.
사용자들은 각 앱 모듈을 탐색하고 피드백을 제공했습니다.
50% 더 빨라졌지만,
개선이 더 필요합니다.
Key Result
청구 목적과 지출 날짜 입력에 소요되는 시간을
50% 단축했습니다.
Next steps
테스트 결과를 반영해 더 디테일한 개선하기
홈
경비청구 진입점
플로팅 버튼에서 상단영역으로 옮겨 진입점을 강조합니다.
카드 한도
남은 카드 한도 잔액 안내 기능을 추가했습니다.
간소화된 상태 정보
복잡한 진행 세부정보 대신 결재 요청 및 수신 건수만 보여집니다.
화면 구조 재조정
미진행 내역을 달력과 함께 하단으로 배치했습니다.
디자인 업데이트
지출 관련 컴포넌트를 카드 발급사 아이콘으로 업데이트했습니다.
경비사용 통합 관리
영수증 보관함과 경비 리포트 기능을 더 자세히 확인할 수 있습니다.
경비리포트 & 영수증 보관함
홈 화면에서 My 메뉴로 이동해 통합된 정보를 확인할 수 있습니다.
카드관리
사용자가 등록한 카드를 관리할 수 있습니다.
경비청구 보고서 작성
데이터 입력 편의를 위한 옵션을 추가했습니다.
피커 도입
보고서 작성에 필요한 데이터 선택을 더 쉽게 만듭니다.
해외 경비
국내 환율을 사용하여 해외 경비비용에 혼란이 있었습니다.
환율 계산
국제 경비지출의 정확한 보고를 위해 환율 자동계산기능을 도입했습니다.
제품 품질과 일관성을 향상시키기 위해
디자인 시스템을 적용했습니다.
최종 제품 개발에 필요한 상세 디자인 스펙을 작성해
개발용 검수 문서를 전달했습니다.
디자인 시스템
Top app bars
화면 제목 표시
Progress bar로 진행 상황 표시
Content area
Bottom app bars
앱 전체 메뉴 진입점
이전 또는 다음 단계에 대한 CTA
Colour
Primary colour
브랜드 컬러
시각적 강조
Secondary colour
Primary colour 외 경우 시각적 강조
Semantic colours
경비 청구 상태 표시
구별과 조화를 위한 유사 컬러
Positive
저장
완료
승인
In progress
인증
연결
Check
검토
관심
검수
Negative
실패
반려
문제가 있거나 중요한 상태
Pending
주의
대기
Neutral
보류
메시지에 의미가 없는 상태
디자인 QA
TestFlight를 통한 디자인 검증
제공한 디자인과 개발된 화면을 비교하고 TestFlight에서 구현된 디자인을 검증했습니다.
색상, 글꼴 크기 및 간격 확인
개발화면의 색상, 글꼴 크기 및 간격에 대해 디자인 시스템을 준수하였는지 검토했습니다.
피드백 문서화 공유
디자인 조정을 위해 문서화한 피드백을 개발 팀에게 공유했습니다.