Brilliant Experience

Pay에
Life를 더하다,
신한pLay

2020.10 - 2021.12

Chapter 1App UX/UI Renewal

Chapter 2Admin Restructuring

Chapter 3Collaborative Process Innovation

Overview

신한pLay Reboot 프로젝트는 기존의 카드고객만을 대상으로 한 결제, 금융서비스라는 제한적인 가치에서 세상의 모든 이용자들과 소통을 위한 개방형 ‘생활금융 플랫폼’으로 도약하기 위해 ‘고객의 건강하고 투명한 금융생활’이라는 가치를 정의하고 이를 서비스 전반에 녹여 내기 위한 고민을 담은 프로젝트입니다.

사용자에게는 쉽고 빠르고 다양한 결제수단과 결제방식을 지원하는 향상된 결제 경험을 기본으로 오픈뱅킹 이체, 송금과 신분증, 멤버십까지 담은 All in One 디지털 월렛을 제공하고 AI·빅데이터를 활용한 똑똑하고 지속적인 자산관리와 소비, 금융, 관심데이터를 분석해 제시하는 관심사 기반 라이프·쇼핑·혜택 등 풍부한 콘텐츠를 함께 접하면서도 각 서비스 간의 자연스러운 플로우와 세밀한 사용자 경험을 할 수 있도록 신한카드 DX팀과 1년여 간 협업하며 많은 고민을 함께 담았습니다.

기존의 금융이 제공하던 서비스 경험은 사용자들이 각기 다른 서비스를 이용 하기위해 수 개의 앱을 설치하고, 앱마다 각기 다른 UX로 새로운 사용법을 학습해야 하는 것이었습니다. 신한pLay 에서는 금융, 결제기반 서비스 본연의 가치를 더욱 강화된 사용자경험으로 제공하면서, 회원가입 없이도 사용자들이 자연스럽게 신한카드의 금융과 비금융 서비스, 콘텐츠들과 상호작용하게 하고 하나의 앱 안에서 신한카드의 모든 서비스를 통합하여 신한플레이라는 브랜드를 활용할 수 있도록 의도하였습니다.

궁극적으로 금융과 비금융이 융합된 Life 전반을 아우르는 사용자 경험을 만들어내는 것을 목표로 하였습니다.

66%

전년 동기간 대비
MAU 성장률

382만명 635만명

리뉴얼 오픈 후
1달 만에 MAU 급상승

590만명 635만명

50,000

12th > 6th

앱스토어 금융분야
Ranking 상승

iOS 앱스토어 (’21.11)

카드사 앱 중
최상위 랭크

iOS 앱스토어 (’21.11)

Top App

Strategy

신한pLay는 신한카드의 미래사업전략을 담아 국내 최대 결제 플랫폼을 넘어 국내 최대 종합 생활금융 플랫폼으로 진화하고, 라이프스타일 전반에 가치있는 최적의 사용자 경험을 제공하고자 하는 목표를 가지고 있었습니다.

우리는 이러한 목표달성을 위해 신한카드의 다양한 이해 관계자분들과의 소통, 리서치, 사용자 테스트를 거쳐 리부트 프로젝트의 세 가지 큰 전략방향성을 정의하였습니다.

UX Principles

전략을 토대로 신한pLay 전반에 반영할 UX원칙을 규정했습니다. 4가지 핵심 Value를 기준으로 Rule을 도출, 이를 다시 세부 Task로 Break-Down 하였고

이를 프로젝트 구성원들에게 공유하여 설계-디자인-구현 과정에 일관되게 반영함으로써 ‘기본에 충실한 UX’라는 UX적 목표를 달성하고자 하였습니다.

Value	Task
Easy사용하기 편리한	최소 노력으로 목표 페이지 도달 및 행위 완수 가능 환경 제공 한 손 조작에 용이한 레이아웃 및 스와이프 제스처 기능 적용
Reliable믿을 수 있는	Header, Bottom, Drawer의 역할 수립 기존의 습관을 해치지 않으면서 개선된 경험 제공
Aesthetic아름다운	Header, Bottom, Drawer의 역할 수립 기존의 습관을 해치지 않으면서 개선된 경험 제공

기본에 충실한 UI/UX

Design

다양한 사용자군을 아우를 수 있도록 사전 리서치와 450여명을 대상으로 한 실사용자 테스트, 프로토타이핑을 거쳐 학습이 필요 없는 자연스러운 서비스 여정을 제공하고자 했습니다.

60-30-10법칙의 컬러 사용으로 강조색이 10%를 넘지 않게 조절하여 방문 목적에 따른 목적지로 자연스럽게 유도하고 Flat하게 표현된 정보들 속에서 사용자에게 중요한 정보만 Floating하여 시각적인 뎁스를 표현함으로써 정형화된 콘텐츠 속에서도 사용자가 정보의 위계를 명확하게 구분할 수 있도록 하였습니다.

금융 서비스 이용자 중 특별히 배려해야 할 대상에게는 특화된 메인을 별도로 제공했습니다. 주니어 사용자에게는 비비드한 컬러와 마이크로 인터랙션을 제공하여 친숙한 접근을, 시니어 사용자와는 더욱 커진 텍스트형UI로 가독성을 높여 커뮤니케이션을 시도했습니다.

어떤 연령층의 사용자라도 앱을 탐색하는 데 용이한 레이아웃, 컬러, 폰트, 콘텐츠를 담을 수 있는 유니버셜 디자인가이드 시스템을 수립하여 서비스를 선명하고 명확히 인지하고 사용할 수 있게 하는 한 편, 내부 개발-운영의 효율성 개선이라는 목적도 함께 달성할 수 있도록 고민했습니다.

하나의 프로세스 안에서 분기되고 조우되는 워크플로우

진입경로가 불필요하게 파편화되어 있지는 않았는지 합치거나 순서를 바꾸거나 제거할 부분은 없는지 되도록 하나의 프로세스 안에서 모든 분기점과 재조합점이 존재하는 플로우를 통해 사용자경험이 끊기지 않도록 했습니다.

Wallet

압도적으로
빨라진 결제, 실물지갑을
온전히 대체하면서도
더 효율적인 디지털
지갑을 제공해
Compact한 일상을
돕습니다.

Asset

기존의 스크래핑
시스템이 아닌,
마이데이터 연동을 통해
카드, 은행, 금투, 보험부터
부동산·차량 등의
실물자산까지

개인의 모든 금융 Data를
사용자 주도적으로 관리, 통제 및 활용할 수 있는 새로
운 insight를 제시합니다. 그동안 가격비교가 어려웠
던 금융 분야의 정보격차를 해소하고 AI·빅데이터를
활용한 정교하고 지속적인 자산관리 콘텐츠 경험과
자산과 소비, 신용 토탈 관리 및 컨설팅 정보를 만나
볼 수 있습니다.

Discover

연령, 성별, 사는 지역,

방대한 양의 소비 빅데이터

분석을 통해 사용자의 선호도를예측하여 개인화 콘텐츠를 추천

사용자는 기호에 맞는 새로운 콘텐츠와 상품을 발견하거나 공통 관심사를 가진 사용자들과 커뮤니티에서 소통할 수 있습니다.
변경되는 소비 패턴과 취향은 지속 트래킹하며 항상 새롭고 정확도 높은 추천을 제공함으로써 디스커버를 통해
다른 상품·서비스로 연결되고 확장되는 융합된 경험을 제공합니다.

My Page

서비스의 확장에 맞게
기존 마이페이지의 역할과
기능도 강화되었습니다.

앱 이용현황을 한눈에 보여주는 통합정보관리 Hub로 리뉴얼된 마이페이지에서 월렛, 자산, 디스커버의 통합 대시보드와 최근 소식을 빠르게 확인하고 이동할 수 있습니다.
또한 모듈화 형태로 구현하였기에, 사용자가 원하는 순서로 편집하거나 숨기는 등 취향에 맞게 커스텀하여 사용할 수 있습니다.

Timeline

서비스의 모든 Activity에 대한 고도화된 통합 피드백을 제공하는 진화한 타임라인

결제, 뱅킹 알림은 물론 이와 연동되는 자산/소비 리포트, 놓치기 쉬운 응모한 이벤트나 커뮤니티 소식, 곧 사라지는 혜택 알림 등 다양한 연동정보를 기반으로 한 실시간 알림을 한 곳에서 모두 모아볼 수 있습니다.

Admin
Restructuring

우리의 디자인이 제약 없이 유연하게 적용되고 실현되기 위해서는 Back-end, Back-Office 설계에 대한 역량이 필수적으로 동반되어야 합니다. BREX에는 디자인 에이전시 업계에서 찾아볼 수 없는 Back-end, Back-Office 설계와 Front-end 경험 및 Quality coordination 역량을 갖춘 국내 최고수준의 Full Stack PO 인력들이 포진되어 있습니다. 우리는 새로운 확장성과 운영효율을 고려한 어드민 리스트럭처링을 계획하고 실행하고자 하였습니다.

추진방향 : 진보된 확장성 - 호율적인 운영

서비스 영역단위로 새로운 전시니즈 발생 혹은 기존 영역의 변경/삭제 등 운영이슈 발생 시 별도의 개발 절차 없이 유연하게 전시영역의 컨트롤 가능한 구조 설계
신설되는 뎁스별 메뉴와 서브페이지까지도 타겟 사용자별, 시즌별 이슈에 따라 노출여부가 제어되는 확장성을 고려한 기반 마련
전시 콘텐츠 등록 시 전시 구좌에 노출할 이미지를 사전 등록하고, 전시구좌별로 불러와 재사용되게 함으로써 운영효율을 높여주는 새로운 전시구조 설계
기존의 메뉴 뎁스를 기준으로 화면, 검색 색인대상을 가져가던 구조를 유연하고 다양한 전시형태로 활용가능한 구조 설계
서비스의 타겟/기능 단위별로 적용된 어드민 정보 구조를 심플한 구조로 다룰 수 있도록 새로운 메뉴 마스터 관리 체계 적용
서비스 및 설정된 어드민 사용자 권한에 따라 정의된 상태별 기능이 자동 적용되는 구조 설계

Collaborative
Process Innovation

고객의 요구사항이 명확하고 상세하면 더 좋겠지만, 기존 업무를 완전히 내려놓고 사전에 프로젝트 요구사항을 명확하게 준비하는 것은 현실적으로 쉽지 않음을 알고 있습니다. 우리는 이번 프로젝트에서 요구사항이 완성된 이후 분석-설계-디자인을 진행하는 방식을 채택하지 않고 고객 담당자분들과 함께 하면서 우리가 사용할 수 있는 시간을 최대한 의미 있는 시간으로 활용할 수 있는 방식을 협업 프로세스의 기본 워크 플로우로 설정했습니다.

정책적인 정의를 사전 준비하며 각 비즈니스의 시스템 프로세스, 프로토타입을 선진행하는 방식으로 빠르게 학습하면서 요구사항과 설계/디자인을 동시에 완성해 나가는 방식을 통해 실제 구현을 위한 개발진행시간을 최대치로 확보할 수 있었고, 이는 프로젝트 중반이후 우리의 설계/디자인의 품질이 처음의 의도를 최대한 담은 형태로 구현되는 데 큰 기여를 했습니다.

고객사 담당자 분들은 기존 도메인 비즈니스와 디테일한 포인트들을 저희에게 입혀 주셨고, 여기에 저희가 가진 회원, 전시, 서비스 정책, 앱 구조, Back-end 구조 설계 노하우, 협업 프로세스, 산출물 관리 등의 경험이 더해졌습니다. 서로가 가진 노하우와 경험을 아낌없이 프로젝트 내에서 접목시키는 과정에서 고객분들과 저희 개개인 모두가 진행 과정 순간순간 업무적 관점에서 괄목할 만한 성장을 이루는 선순환이 지속적으로 이루어졌습니다.

Operation Guide

서비스의 품질을 유지하기 위한 노력은 프로젝트가 끝나는 시점, 그 이후까지도 계속 이어가야만 초기 설계와 디자인의 의도를 일관성있게 유지할 수 있게 됩니다. 우리는 안정화 및 이후 기간까지 구현된 품질이 지속성을 가지고 유지될 수 있도록 업무프로세스 내재화에 온 힘을 기울였습니다.

BREX에서는 업무용어 및 개념설명, 각 운영담당자의 시선에서 실제 업무 Flow에 따라 작성된 높은 품질의 Design Operation Guide, Backoffice Operation Guide를 프로젝트 진행중 제공해드리고 있으며 서비스가 오픈되기 전후 지속적인 전파교육, 실제 운영 담당자 코디네이션을 통해 업무 프로세스와 프로젝트 구현 품질의 실질적인 내재화가 이루어질 수 있는 노하우를 가지고 있습니다.

Design Operation Guide

Design Maintenance Guide
디스커버 자동피드 비주얼 Package
Shinhan pLay Design System
(Principles / Foundations & Components)

Backoffice Operation Guide

Admin 신규기능 및 구조
전시콘텐츠 관리
디스커버 투데이·커뮤니티 관리
마이데이터 업무관리
이벤트·포인트 관리

Credits

Chief Product Officer
Park Hanjun

Creative Director
Oh Sunwoo

Product Owner
Park Hwasun
Mun Donggyu

Product Manager
Kim Bora
Lee Hyeonmin
Kim Jiae
Jung Sunjin
Jin ju
Lee Dohyun
Jeong Sukyeong
Seo Jeongeun
Wee Yunjeong
Kwon Eunjin
Choi Miseon

UI Designer
Kim Sooil
Jeong Youjin
Yoo Hanna
Kang Kyoungmin
Kim Garam
Ji SooHyun
Kang Dayeon
Lee Jiho
Kwak Jiyoung
Lee Sohyun

Client