Fintech UX 마스터하기 – 디자인 사례 연구

게시 됨: 2022-03-11

금융 도구는 사용하기에 가장 흥미로운 제품이 아닙니다. 차갑고 지루하고 기업적인 느낌을 줄 수 있습니다. 수많은 기능과 사용자 정의가 포함된 복잡한 도구로서 대부분은 불충분한 교육과 교육을 제공하며 문서 작업을 시작하지도 않습니다.

규제 의무로 인해 금융 앱이 특정 방식으로 작동해야 하는 경우가 많지만 전문적이고 사용하기 쉽게 유지하면서 사용자에게 재미 있고 번거롭지 않은 경험을 제공할 수 있는 기회가 있습니다. 적절한 맥락에서 금융 앱은 단조로운 현상 유지 모델을 따르는 대신 쾌적하고 흥미로운 사용자 경험을 제공할 수 있습니다.

인도 증권 거래소에 대한 교육을 받지 않은 사람들도 쉽게 투자할 수 있도록 설계된 투자 앱인 Fisdom을 사용하면 고객은 세 가지 주요 목표를 갖게 됩니다.

  1. 사용자가 투자를 시작하기 전에 발생한 높은 이탈률을 해결합니다.
  2. 투자 등록 프로세스를 개선하는 방법을 연구합니다(자세한 내용은 나중에).
  3. 앱을 시각적으로 더 매력적으로 만드세요. Fisdom은 상업적 용도뿐만 아니라 투자에 관심이 있는 모든 사람을 대상으로 합니다.

Fisdom은 대부분의 투자 앱 또는 서비스와 다르게 작동합니다. 일반적으로 사람들은 주식, 채권 또는 기타 여러 가지를 기반으로 투자합니다. 글쎄요, 무엇이든! 때로는 회사가 마음에 들어서, 잘 될 것이라고 생각하거나, 재무 전문가가 추천했기 때문일 수 있습니다.

이 앱에서는 프로세스가 반대입니다. 사용자는 투자 목표, 즉 선택한 기간 동안 축적하려는 금액을 설정합니다. 거기에서 앱은 다양한 옵션(이력 데이터 및 머신 러닝 사용)을 제안하고 사용자는 월간 예치금으로 해당 목표에 투자할 수 있습니다.

개인 금융 앱의 명확한 프로세스에 중점을 둔 금융 상품 및 서비스
업데이트된 프로세스에는 시장 휴리스틱을 기반으로 하는 제안이 내장되어 있으며 사용자가 목표를 보다 정확하게 달성하는 데 도움이 될 수 있습니다.

이 투자 방법은 개별 투자를 선택하는 복잡성을 제거하므로(사용자는 여전히 원하는 모든 것에 투자할 수 있음) 앱이 모든 단계에서 사용자와 신뢰를 구축하는 것이 중요합니다. 기본 기능에 대한 단순한 오해는 이론적으로 사용자 에게 많은 돈을 잃을 수 있습니다!

그러나 다양한 대안으로 인해 앱을 재미있고 매력적으로 만드는 이니셔티브를 전체 프로세스에서 고려해야 했습니다. 이를 통해 시각적 매력과 사용 편의성을 통해 신뢰를 구축하는 데 중점을 두었습니다.

미국에 기반을 둔 풀타임 프리랜서 UX 디자이너 구함

그들에게 돈을 보여

인도에서의 투자 절차는 투자자가 일회성 K now Y our C 고객(KYC) 양식을 작성하도록 요구합니다. 양식은 5페이지이며 많은 정보가 필요합니다.

원래 KYC는 사용자가 투자하기 위한 전제 조건이었지만 사용성 테스트에서 그 과정에서 상당한 이탈률을 발견했습니다. KYC가 너무 번거롭고 양식을 작성하는 과정을 점검해야 하는 것이 분명했습니다.

그래서 우리는 KYC 등록 요구 사항을 프로세스의 끝으로 옮겼습니다.

규제 요구 사항에 따르면 모든 투자자는 KYC를 완료해야 하지만 사용자는 먼저 앱에 대한 신뢰를 구축할 시간이 필요했습니다. 이러한 신뢰를 구축하기 위해 사용자가 앱을 사용해 보고 투자 결정을 내리고 투자할 준비가 되면 KYC 양식을 작성할 수 있도록 프로세스를 전면적으로 전환했습니다. 이러한 방식으로 사용자는 앱과 관계를 구축할 수 있는 기회를 얻었습니다.

우리는 한 걸음 더 나아가 사용자가 투자 결정을 한 후 KYC를 완료할 수 있는 3일의 시간을 주었습니다. 에스크로에 안전하게 보관된 그들의 돈은 양식이 제출되지 않은 경우 환불됩니다.

개인 금융 앱은 명확한 사용자 흐름을 사용해야 합니다.
재설계된 흐름은 불필요한 출구를 최소화하고 번거로운 단계를 끝으로 이동하여 활동을 안내합니다.

데이터 입력을 위한 디자인

이것은 여전히 ​​​​중요한 과제를 남겼습니다. 실제로 KYC를 작성하는 것은 어리석은 과정입니다. 5페이지 분량의 많은 개인 정보를 휴대전화로 입력해야 합니다!

연구 단계에서 우리는 필수 개인 정보를 검색하고 제공하는 정부 승인 API가 몇 개 있음을 발견했습니다. 이 데이터의 대부분은 KYC에서 완벽하게 작동하므로 사용자는 PAN(Tax Permanent Account Number) 카드를 스캔하거나 PAN을 수동으로 입력하여 상당한 시간을 절약할 수 있습니다(모든 인도 시민은 PAN이 있음).

이를 통해 KYC에 필요한 데이터를 입력하는 시간이 절반으로 줄어듭니다...최소한! 이미 KYC를 완료한 사용자는 자동으로 95% 완료되었으며 정보를 확인하고 디지털 서명만 제공하면 됩니다.

금융 앱 디자인의 모범 사례는 복잡한 기능을 분해하는 것과 관련이 있습니다.
이 앱은 모든 필수 정보를 수집하는 프로세스를 한 입 크기의 뚜렷한 단계로 분해하여 시스템을 부드럽고 단순하게 만듭니다.

KYC를 완료하지 않은 사용자는 여전히 필수 정보를 제공해야 하므로 쉽고 빠르게 입력하는 것이 중요했습니다. 여기에는 숫자 전용 입력 필드에 숫자 패드 키보드 표시, 사용 가능한 경우 카메라를 사용하여 문서 또는 카드 스캔 등과 같은 간단한 사용성 트릭이 포함되었습니다.

핀테크 앱은 지루할 필요가 없습니다

핀테크 분야의 다른 앱에 대한 경쟁 분석 중에 대부분이 밋밋한 색상 팔레트와 초대하지 않는 경험을 가지고 있음이 분명했습니다.

금융 앱 디자인 트렌드가 천천히 개선되고 있습니다.
경쟁자 분석—인도 사용자를 대상으로 하는 핀테크 분야의 앱은 세련되지 않고 젊은 사용자 기반에서 기대하는 매력적인 경험을 제공하지 않습니다.

새로운 것을 배울 때 정보의 폭격을 받는 것은 압도적일 수 있으며, 이로 인해 대부분의 사용자는 시작하기 전에 떠나게 됩니다. 디자인의 미니멀리즘은 평면 색상 팔레트와 비 스큐어모픽 버튼에 관한 것이 아니라 정보가 구조화되는 방식과 주어진 기능을 사용하는 데 필요한 인지 부하에 관한 것입니다.

투자는 충분히 어렵습니다. 그래서 우리는 프로세스와 상호 작용 모두에서 일을 단순하게 유지하기 위해 의식적인 노력을 기울였습니다. 결과적으로 시각적 디자인은 다른 핀테크 도구와 크게 다른 것으로 나타났습니다.

비주얼에 대한 "투자"

우리는 응용 프로그램의 가볍고 장난기 있는 개념을 지원하기 위해 밝은 색조를 자랑하는 팔레트를 만들어 그렇게 했습니다.

우리의 핀테크 UX를 강력한 이미지로 최고의 핀테크 앱으로 돋보이게 합니다.
강력한 색 구성표를 선택하면 다양한 투자 전략을 시각화하기 위한 이미지 사용의 기반을 마련하는 데 도움이 되었습니다(그림 제공: Freepik).

생생한 그래픽과 일러스트레이션은 투자와 같은 건조한 주제를 더욱 흥미롭게 만들기 위해 중요한 경험을 향상시킵니다. 이는 콘텐츠가 개방적이고 이해하기 쉬워야 할 뿐만 아니라 사용을 촉진할 수 있어야 하기 때문에 투자 앱의 경우 특히 어렵습니다.

개인 금융 도구는 고통이 없고 단순해야 합니다.
온보딩 마법사는 다음과 같은 명확한 메시지를 제공합니다. 이 앱은 재정적 목표를 달성하는 데 도움이 되는 간단하고 재미있는 투자 앱입니다.

처음부터 재미있는 톤을 설정하는 것이 중요했습니다. 다채로운 가입 화면은 뚜렷한 개성을 전달하고 작은 전환 애니메이션은 참여도를 높이는 데 도움이 됩니다. 이러한 수준의 고객 경험은 클라이언트에게 일반적이지 않았기 때문에 개발 팀에 세부 애니메이션을 사양으로 전달하여 그들이 우리의 디자인 전략과 그들이 우리의 디자인을 구현하는 방법을 더 잘 이해할 수 있도록 했습니다.

핀테크 앱
목표 및 명확한 재정 목표와 시각적 연관성을 제공함으로써 사용자는 투자의 예상 결과를 이해하고 볼 수 있습니다.

장기 투자는 벅찬 일이며 우리 중 어느 부분이 재정적으로 원하는지 정확히 아는 사람은 거의 없습니다(“나는 부자가 되고 싶다”는 제외). 프로세스를 단순화하기 위해 모든 재무 목표에 시각적 연관성을 추가했습니다. 이것은 선택을 이해하기 쉽게 만들었습니다.

부수적인 이점으로, 시각화는 사용자가 이러한 옵션에 대해 배우고 자금 투자에 대해 더 나은 정보에 입각한 결정을 내릴 수 있는 방법을 제공합니다.

사용자의 전문성 수준 존중

가장 중요한 목표 중 하나는 경험에 관계없이 모든 사용자에게 현명한 투자 결정을 내리는 데 필요한 모든 정보를 제공하는 것이었습니다. 클라이언트의 우려는 상당한 비율의 사용자가 Fisdom을 사용하여 첫 번째 투자를 할 것이라는 것이었습니다. 따라서 다른 모든 사람에게 "너무 초보" 경험이 되지 않도록 처음 사용자에게 프로세스에 대해 교육하는 것이 중요했습니다.

가이드와 교육은 금융 앱 디자인에 중요합니다.
사용자는 라이프스타일이나 전문 지식 수준에 따라 콘텐츠를 필터링할 수 있습니다.

투자 프로세스의 거의 모든 단계에서 사용자가 보거나 건너뛸 수 있는 툴팁 형태로 엄선된 콘텐츠를 제공했습니다. 지식 기반은 다양한 사용자 페르소나(학생, 기혼, 퇴직, 주부 등)와 전문 지식 수준을 반영하도록 구성되었습니다. 이런 식으로 사용자는 이해하지 못한 부분은 읽고 나머지는 건너뛸 수 있습니다.

공백 상태, 언어, 메시지

투자는 충분히 어려운 일이므로 사용자가 입력을 제공하거나 앞으로 나아가야 하는 시기와 위치를 나타내는 명확한 레이블 지정에 중점을 두었습니다. 빈 상태(데이터가 없는 화면)에 대해 명확한 클릭 유도문안 버튼을 제공하여 사용자가 다음 단계에 대해 확신할 수 있도록 했습니다.

앱의 상황에 맞는 툴팁으로 콘텐츠를 재미있으면서도 직접적으로 작성했습니다. 우리는 사용자가 다음 단계에 대해 혼란스러워 해서 막힐 수 있는 가능성을 피하려고 했습니다. 이것은 명확성과 앱을 가볍게 유지하기 위한 것이 아닙니다. 특히 사용자가 작업을 완료하거나 뒤로 이동하거나 기능에 대해 자세히 읽기 위해 항상 앞으로 나아갈 수 있도록 하기 위한 것입니다.

명확성을 위해 개인 금융 앱 툴팁이 자주 제공됩니다.
친절한 오류 메시지, 강조 표시된 클릭 유도문안 및 유용한 힌트는 방해 없이 복잡한 프로세스를 단순화합니다.

아래에서 볼 수 있는 것처럼 남은 단계, 건너뛸 수 있는 옵션(가능한 경우), 리디렉션을 명확하게 표시하여 다단계 프로세스도 명확하게 했습니다. 이는 사용자에게 신뢰감을 줍니다. 진행 중인 모든 단계에서 진행 상황, 현재 진행 상황 및 다음 단계를 볼 수 있습니다.

뱅킹 UX 트렌드에 따라 핀테크 앱이 개선되고 있습니다.
앱의 사용자 흐름은 지속적인 피드백과 사용자가 취해야 할 명확한 조치로 설계되어 앱에 대한 신뢰를 형성합니다.

마무리 생각

금융 앱은 규제 및 법적 요구 사항 때문에 불리한 것으로 보입니다. 최근까지 이로 인해 설계가 부실하고 단조로우며 때로는 일관성이 없는 앱, 기능 및 프로세스가 발생했습니다. 그러나 UX에서 이러한 제한은 축복이 될 수 있으며 디자이너가 작업할 수 있는 구조를 제공합니다. 규정과 같은 요구 사항을 따라야 할 때 약간의 추가 노력과 생각으로 명확하고 간단한 경험을 만드는 것이 실제로 더 쉬워집니다.

여기에 새로운 시대의 핀테크 제품이 점수를 매길 수 있는 기회가 있습니다. 사용자를 식별하고 경험을 틈새 시장에 맞게 조정함으로써 법적 제한 및 요구 사항은 우회할 문제 아니라 설계해야 할 과제입니다. 이러한 요구 사항은 또한 재미있고 유익한 방식으로 제품 내에서 교육할 수 있는 기회를 제공합니다.

Fisdom과 Wealthy 및 Sqrrl과 같은 여러 앱을 통해 인도의 핀테크 앱은 사용자 중심 디자인 접근 방식 덕분에 개선되고 있습니다. 대부분은 다른 유형의 앱에서 흔히 볼 수 있는 깔끔한 인터페이스 디자인과 세련된 사용자 경험이 아직 부족하지만, 변화는 이미 시작되었으며 더 많은 앱과 서비스가 사용자 요구를 해결하는 더 잘 정의되고 스마트한 경험을 만들고 있습니다.

인도 시장에서 이러한 디자인 전환은 위험했습니다. Fisdom은 최초의 개인 금융 도구 중 하나였으며 다른 회사는 최근에야 UX에 집중하기 시작했습니다. 그 위험은 대가를 치렀습니다. Fisdom 앱은 현재 수십만 건의 설치(1-5k 사전 재설계에서 증가)와 Google Play 스토어에서 별 4.2개를 받았습니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

  • UI 디자인 모범 사례 및 일반적인 실수
  • 빈 상태 – UX에서 가장 간과되는 측면
  • 단순함이 핵심 - 최소한의 웹 디자인 탐색
  • 모바일 인터페이스에 대한 경험적 원리
  • 가독성을 위한 디자인 – 웹 타이포그래피 가이드