2024.02 - 2024.08

우리카드 APP
우리WON페이
리뉴얼

UI / UX

Google Play App Store

Overview

우리WON페이는 실물 카드 없이 앱으로 결제할 수 있는 우리카드의 모바일 간편결제 서비스입니다. 이번 프로젝트에서 애드캡슐은 쉽고 빠른 UI/UX를 중점으로 기존의 ‘우리페이’를 ‘우리WON페이’로 리뉴얼했습니다. 삼성페이와 NFC 등 새로운 결제 방식을 추가하여 고객 편의성을 높였으며, 결제 단계를 축소해 페이 실행 속도를 대폭 개선했습니다.

하루 평균 간편결제 이용 금액 ¹

2022년 7612억 원

2023년 8755억 원 15%

사용 경험별 금융 App 추천 의향에 미치는 영향 ²

Driver 추천 요인

Barrier 비추천 요인

1
한국은행, 2024.03.18, 2023년중 전자지급 서비스 이용현황
2
오픈서베이, 2024.08.05, 사용자 경험(UX) 리포트 2024 - 은행 앱 사례

Situation

간편결제 서비스의 사용자가 지속적으로 늘어나고 있습니다. 2023년의 하루 평균 간편결제 이용 금액은 8755억 원으로, 2022년에 비해 15% 증가했습니다. 이러한 추세에 따라 애드캡슐은 우리 WON페이의 경쟁력 강화가 필요하다고 판단했습니다.

사용자 경험에서 무엇이 가장 중요한지 파악하기 위해 금융 App 추천 의향에 대한 사용자 설문을 살펴보았습니다. UI/UX 측면에서의 핵심 요인은 쉼고, 편리하며, 빠른 사용 경험임을 확인했고, 이를 바탕으로 프로젝트의 방향성을 설정했습니다.

간편결제 서비스 출범 이래로 사용자가 지속적으로 늘어나고 있습니다. 이러한 추세에 따라 애드캡슐은 우리WON페이의 경쟁력 강화가 필요하다고 판단했습니다.

사용자 경험에서 무엇이 가장 중요한지 파악하기 위해 사용자 설문을 살펴보았습니다. 핵심 요인은 쉽고, 편리하며, 빠른 사용 경험임을 확인했고, 이를 바탕으로 프로젝트의 방향성을 설정했습니다.

1한국은행, 2024.03.18, 2023년중 전자지급 서비스 이용현황
2
오픈서베이, 2024.08.05, 사용자 경험(UX) 리포트 2024 - 은행 앱 사례

Approach

우리

WOORI

가

원하고

놓치고

있는 것,

아무튼 쉽고 빠르게

긍정 경험을 위한 채워넣기

1얼마나 직관적으로 대상의 기능과 사용성이 인지되는지
2마치 팔꿈치로 살짝 밀어주듯 자연스럽게 사용자를 원하는 방향으로 이끄는 것
3사용자의 행동에 대한 결과로 즉각적으로 반응하는 가벼운 상호작용

Affordance

Nudge

React

Strategy
우리카드가 놓치고 있는 긍정경험을 위해 세 가지 UX 기법을 주입했습니다. 애드캡슐이 우리카드와 사용자 사이의 연결고리가 되어 누구보다 ‘쉽고 빠른' 길로 안내합니다.

Easy Way to Pay
식은 죽 먹기. 누워서 떡먹기.
그리고 우리페이하기.

Affordance

Nudge

React

Strategy

우리카드가 놓치고 있는 긍정경험을 위해 세 가지 UX 기법을 주입했습니다. 애드캡슐이 우리카드와 사용자 사이의 연결고리가 되어 누구보다 ‘쉽고 빠른' 길로 안내합니다.

Easy Way to Pay

식은 죽 먹기. 누워서 떡먹기.
그리고 우리페이하기.

Main⁽¹⁾

터치하는 순간, 이미 준비 완료. 페이에 진입하면 최근 결제 방법이 바로 노출되어 빠르게 결제할 수 있습니다. 오로지 결제에 집중한 메인 화면에서 결제 카드와 모든 결제 방법을 한눈에 확인하고 간편하게 바꿀 수 있도록 개선했습니다.

Pay⁽²⁾

결제 방법도 내가 원하는 대로. 기존에는 타 제휴사 가맹점을 기반으로 서비스를 제공했으나, 오프라인 결제 방식을 더욱 다양화했습니다. 카드사 공통 QR•바코드, 삼성페이, NFC결제 등 다양한 방법이 추가되었으며, 탭으로 쉽게 전환할 수 있습니다.

다양해진 만큼 복잡할까 걱정하지 마세요. 우리WON페이는 원하는 카드와 결제 방식에 맞춰 설정할 수 있는 개인화 위젯을 제공합니다. 우리카드 App을 실행하지 않아도 배경화면에서 터치 한 번이면 금방입니다.

다양해진 만큼 복잡할까 걱정하지 마세요. 우리WON페이는 원하는 카드와 결제 방식에 맞춰 설정할 수 있는 개인화 위젯을 제공합니다. 우리카드 App을 실행하지 않아도 배경화면에서 터치 한 번이면 금방입니다.

Card Registration⁽³⁾

No Time-wasting
시간 낭비 없이 빠르게. 결제수단 등록에 막힘이 없도록 진행 흐름을 위에서 아래로 재정의하여 동선을 최적화했습니다. 불필요한 중복 액션을 단일화하고 보유 카드를 한 번에 등록 가능하게 개선했습니다.
No Pressure
부담 없이 편안하게. 사용자에게 압박이 될 수 있는 요소를 최소화했습니다. 앞으로 남은 진행 단계의 숫자를 지우고, 오류 팝업은 토스트 팝업이나 문구로 대체하여 한결 가볍게 안내합니다.
No Mistake
오류 경험 없이 단번에. 어지럽던 화면 내 요소들의 위계를 명확하게 정리했습니다. 자동 포커싱과 버튼 상태 등 현재 진행 상황을 쉽게 파악할 수 있는 UI로, 사용자의 오해와 실수가 없도록 자연스럽게 유도합니다.

Card Registration⁽³⁾

1
No Time-wasting
시간 낭비 없이 빠르게. 결제수단 등록에 막힘이 없도록 동선을 최적화했습니다.
2
No Pressure
부담 없이 편안하게. 사용자에게 압박이 될 수 있는 요소를 최소화했습니다.
3
No Mistake
오류 경험 없이 단번에. 사용자의 오해와 실수가 없도록 화면 내 요소들의 위계를 명확하게 정리했습니다.

Friendly UX Writing⁽⁴⁾

말 한마디로 한 걸음 더 가까이. 우리WON페이는 친근하고 자연스러운 톤으로 이야기합니다. 타이틀, 버튼 명, 팝업 등 모든 텍스트를 사용자 입장에서 보기 쉽도록 다시 썼습니다. 이를 통해 금융 App 특성상 어렵고 민감할 수 있는 내용도 보다 쉽고 편하게 전달됩니다.

하지만 쉬운 게 전부는 아닙니다. 이해하기 쉬운 동시에 복잡한 정보가 왜곡되지 않고 사용자와 명확하게 소통할 수 있도록 세심한 노력을 기울였습니다.
1. 1
  Process Title
2. 2
  Popup
3. 3
  Button
1
- 1
- 2
- 3

4
Rewarding Motion Graphics⁽⁵⁾
고생한 그대에게 아낌없는 박수를. 결제수단 최초 등록, 결제 요청 및 충전 등 완료 화면에 모션 그래픽을 적용했습니다. 이를 통해 긴 프로세스를 완수한 사용자에게 적절한 심리적 보상을 제공합니다.

우리카드만의 선불 포인트, 꿀머니의 충전과 선물 메뉴에서는 전용 색상과 애니메이션으로 차별점을 두었습니다.
1. 4
  결제수단 등록
2. 5
  결제 요청
3. 6
  꿀머니 충전 및 선물
- 4
- 5
- 6

Unified Design⁽⁶⁾
Guideline

우리카드 App 전체의 톤 앤 매너에 따르면서 정보와 숫자가 직관적으로 한눈에 들어올 수 있는 디자인 가이드를 정립했습니다. 우리WON페이 내 메뉴는 물론, MPI 모바일 결제창을 비롯한 외부 화면에도 동일한 디자인 가이드를 적용하여 사용자에게 어디에서나 일관된 경험을 제공합니다.

우리카드 App 전체의 톤 앤 매너에 따르면서 정보와 숫자가 직관적으로 한눈에 들어올 수 있는 디자인 가이드를 정립했습니다.

Primary #3182F7

Secondary #ECF5FD
Black #000000

Gray 01 #333333

Gray 02 #666666

Gray 03 #C4C4C4

Gray 04 #E6E6E6

Gray 05 #F2F2F2

Pretendard

Aa
ABCDEFGHIJKLMNOP
!@#$%^&*()_+=₩:;,’”/

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

Bold SemiBold Medium Regular
Bold SemiBold Medium Regular
가나
가나다라마바사아자차카타파하
!@#$%^&*()_+=₩:;,’”/