Product
새로워진 SmileCard를 소개합니다.
Dec 13, 2021
SmileCard는 2018년 6월 이베이코리아가 현대카드와 손잡고 업계 최초로 선보인 상업자표시신용카드(PLCC, Private Label Credit Card)입니다. 론칭 이후 발급수가 100만 장을 돌파하면서 이례적인 성공을 거뒀습니다. 국내 PLCC의 짧은 역사와 특정 기업에 집중된 혜택을 제공하는 상품 특성을 고려했을 때 SmileCard의 100만 장 돌파는 예상을 뛰어넘는 성과라고 할 수 있습니다. 온라인 쇼핑에 최적화된 직관적인 혜택과 업계 최초로 도입한 30초 이내 빠른 카드 발급 프로세스 등이 많은 호응을 얻었다고 자체 분석하고 있습니다.
출시 3주년을 앞둔 2021년 5월, 더 높은 도약을 위해 SmileCard에 큰 변화가 있었습니다. ‘일상에서 발견하는 Smile’을 모티프로 디자인된 새로운 6종의 카드 플레이트와 함께, 발급수 100만 장을 돌파한 기존의 SmileCard를 계승한 ‘Edition 2’와, SmileClub, Smile배송 등 스마일 서비스와의 멤버십을 강화한 카드인 ‘the Club’으로 나눠, 사용자 개인의 쇼핑 스타일에 맞는 카드를 선택할 수 있도록 개편되었습니다.
Card Plate Design
가장 눈에 띄는 변화는 카드 플레이트 디자인이 기존의 2종에서 6종으로 다양화하여 선택의 폭을 넓혔습니다. 각각의 카드에는 ‘Smile’ 모티프의 디자인 스토리가 담겨있습니다. 카드 플레이트 디자인은 새로운 관점에서의 접근이 필요하다고 판단하여 현대카드의 Design Lab에서 담당하였으며, 이베이코리아의 Design POD 및 마케팅본부와 전략사업본부 등 여러 이해관계자의 커뮤니케이션을 통해 디벨롭, 최종 완성되었습니다.
Sky
맑은 날씨, 높은 하늘, 기분 좋은 구름. 행복하고 만족스러운 스마일카드를 상징하는 이 하늘은 거울 위에 떠 있습니다. 하늘과 스마일 로고가 빛에 따라 은은하게 보입니다.
Matrix
영문 키보드로 입력할 수 있으며 누구에게나 소통되는 기호, 아스키코드를 활용해 누구에게나 통하는 스마일 로고를 아티스틱하게 표현하였습니다.
Heritage
블루 앤 옐로. 스마일의 상징 컬러를 그대로 살려 100만 회원의 헤리티지를 계승하고, 메탈에 가까운 유광 디자인으로 업그레이드된 스마일카드를 표현하였습니다.
Chaplin
코미디의 대부이지만 실제 삶엔 웃음이 없었던 찰리 채플린. 무광에 모노톤인 그의 사진 위에 높이 차이가 있는 유광의 컬러풀한 스마일 로고를 올려 그에게도 웃음을 선물하였습니다.
Smile Clock
빈티지 시계 뒤판에서 발견한 스마일이 일상의 행복을 느끼게 합니다. 플레이트 재질에 빈티지 시계 느낌을 적용하고 깊이감과 광택의 디테일까지 살려 디자인하였습니다.
Einstein
아인슈타인의 위트 있는 사진을 도트 그래픽, 팝 컬러, 단차를 통한 입체감으로 재해석하여 스마일카드의 똑똑한 소비문화를 생기있게 표현하였습니다.
Motion Design
SmileCard는 온라인 발급만 가능하므로 보통의 카드 발급 프로세스처럼 평면 이미지로 카드 플레이트 디자인과 소재의 특징을 보여주기에 한계가 있었습니다. 3D 모델링에 모션을 가미하여 카드 디자인의 질감과 여러 표면 가공 효과를 온라인상에서도 사용자에게 잘 전달되게 제작했습니다.
SmileCard 소개 페이지
Problem
다양화, 세분화되어 완전히 새로워진 디자인과 혜택의 변화를 직관적이고 심플하게 인지시켜 줄 방안, ‘SmileCard Edition 2’와 ‘SmileCard the Club’의 혜택을 빠르게 비교하기 좋은 UI, 또 기존의 스마일 브랜드가 가지고 있는 친근한 이미지의 연결선상에서 새로운 카드 플레이트 디자인의 매력을 커뮤니케이션할 방법에 대한 고민이 필요했습니다.
Strategy
Dynamic
SmileCard는 온라인 발급만 가능하므로 보통의 카드 발급 프로세스처럼 평면 이미지로 카드 플레이트 디자인과 소재의 특징을 보여주기에 한계가 있었습니다. 3D 모델링에 모션을 가미하여 카드 디자인의 질감과 여러 표면 가공 효과를 온라인상에서도 사용자에게 잘 전달되게 제작했습니다.
Stable
안정적인 UI로 두 혜택을 자연스럽게 왔다 갔다 하며 비교할 수 있도록 *게이트 페이지(iframe) 특성상 과도한 인터랙션이나 스크롤 이펙트 적용 시 엄청난 버벅임 발생, 불안정 최소화로 조작 용이하도록 하는 것에 중점
Anecdotic
새로운 스마일카드 플레이트 디자인은 모두 일상 속의 일화나, 사물 속에서 발견된 Smile을 주제로 한다. 이야기들을 잘 보여줄 수 있는 표현으로, 새로움이 낯설게 느껴지지 않도록, 사용자와의 거리를 줄임
Output
Main Visual
진입 시, 새로운 카드들이 펑 하고 터지는 비주얼로 새로운 카드 디자인을 임팩트 있게 보여줍니다.
상세 페이지 Pop-up
두 카드의 상세 페이지(Pop-up)로 진입할 수 있는 버튼 영역에 각 카드의 특징을 요약하여 노출했습니다. 두 버튼 영역은 한 화면에 들어올 수 있도록 디자인되었고, 팝업 내 다른 카드의 상세 페이지로 이동할 수 있는 버튼을 두어 편하게 두 페이지를 오갈 수 있도록 설계했습니다.
Design Story
카드 플레이트 디자인의 모티프를 배경 요소로 작업, 각각의 플레이트 디자인의 매력을 스토리와 함께 커뮤니케이션하도록 디자인되었습니다.
스마일카드 발급 이후 경험
기다릴 필요 없이 바로 쇼핑 가능!
발급 즉시 SmilePay 간편결제에 탑재되는 혁신적인 발급 프로세스 덕분에 G마켓, 옥션, G9, 마켓컬리, CGV 등 SmilePay가 가능한 곳이라면 바로 쇼핑이 가능하고, 적립과 할인 프로모션을 같이 누릴 수 있습니다.
루핑 애니메이션을 이용해 서버 부담은 줄이고, 카드 디자인에 생동감을 불어넣었다.
SmilePay Sensory Branding
‘SmilePay Sensory Branding’은 한마디로 정의하면 ‘SmilePay의 결제 경험 향상’입니다. 사용자가 SmilePay로 결제 시 Animation / Sound / Haptic를 통해 사용자에게 안전하고 성공적으로 구매가 완료되었음을 알림으로써 브랜드(SmilePay)에대한 신뢰와 안정감을 쌓아가고 있습니다.
SmilePay Animation
사용자가 선택한 카드를 한 번 더 보여줌으로써 결제에 대한 확실성을 심어주고, 카드 정보가 안전하게 전송되고 있음을 보여줍니다.
SmilePay Sound
사진 촬영 전 외치는 ‘스 마~ 일~’ 모티프를 이용해 멜로디를 만들었습니다. 결제 시 SmilePay Sound를 송출하여 시각 장애인이나 소음이 있는 오프라인 공간에서의 결제 시 확실성과 인지성을 높여줄 것이라 기대합니다.
SmilePay Haptic
스마일 멜로디 바탕으로 ‘강, 중, 약’의 진동 세기를 이용해 햅틱을 만들었습니다. 스마일 사운드와 마찬가지로 결제 확실성과 인지성을 높여줄 것이라 기대합니다.
SmilePay Animation
SmilePay Sound
SmilePay Animation & Sound
Smile Music & Brand Movie
‘기분 좋은 쇼핑 경험으로 우리의 삶을 한 번 더 미소 짓게 합니다’ 기본 골격으로 Sensory Branding의 모티프, 온라인/오프라인 결제 모습, 코어 멜로디(띠 링~ 띵~)를 이용해서 작곡한 Smile Music, 판매자의 미소, 소비자의 미소를 영상에 담았습니다.
마무리하며
SmileCard와 SmilePay는 고객 인게이지먼트가 높은 프러덕입니다. (*Card를 이용해 Pay에 캐시를 적립을 하고, Pay를 이용해 Card를 사용하는) SmileCard 경험과 발급 후 결제 경험을 지속적으로 개선하는 중입니다.
결제 경험 향상을 위해 Sensory Branding을 도입했습니다. 프러덕에 탑재 이후 580명의 SmilePay 사용자 대상으로 서베이를 진행했고, 결제의 확실성과 인지성에 대해 [5: 매우 높아졌다] [4: 높아졌다]로 답변한 사용자가 87.9%입니다. 확실성과 인지성을 바탕으로 SmilePay에 대한 신뢰도를 높이기 위해 지속적으로 업데이트할 계획입니다. Smile Sound와 Haptic은 순차 적용 예정이니 기대해 주세요!
- 프로젝트 참여자
-
Planning
Browse Service Planning Cell, New Service Planning Cell, Shopping Service Planning Cell, Smile Club Planning Cell, Smile Pay Cell
-
Design
Design POD -
Development
Checkout & My Engineering Cell, Club & Discount Engineering Cell, Shopping Service API Cell, VIP & Vertical Cell, Web Frontend Cell
