태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

스마트폰 열풍으로 들썩이는 요즘, 저마다 모바일 사업영역의 확대를 꾀하며 다양한 애플리케이션을 쏟아내고 있다. 그러나 아직은 이 거대한 움직임을 주도할만한 사용자 환경 가이드와 수익창출 모델을 제시한 사례는 많지 않다. 이런 가운데 금융업계의 트렌드세터 현대카드가 다시 한 번 선발대에 섰다. 지난 4월 선보인 ‘현대카드 M포인트몰’ 애플리케이션은 국내 모바일 쇼핑몰 보편화의 시작을 알리며, 단번에 쇼퍼(Shopper)들의 이목을 사로잡았다.

현대카드 M포인트몰 어플

M포인트몰이란?
현대카드 M을 사용할 때 적립되는 M포인트와 현대카드로 결제할 수 있는 현대카드 회원 전용 쇼핑몰. 가전, 패션, 생활 카테고리의 상품을 다양한 가격대로 제공한다.


모바일 쇼핑몰의 현실화

국내 스마트폰 이용자의 급격한 증가와 함께 ‘모바일 혁명’이라고 불리는 스마트폰 애플리케이션(이하 앱)에 대한 수요도 나날이 높아지고 있다. 새로운 앱이 출시될 때마다 기업과 대행사의 관심이 집중됨은 물론, 이에 따른 이용자의 니즈 역시 빠르게 진화하는 중이다.
이미 현대카드는 명세서를 비롯해 슈퍼 콘서트, 슈퍼 매치의 시리즈 등 현대카드의 다양한 서비스를 특화된 아이폰 애플리케이션 형태로 제공하며, 그들만의 특화된 서비스를 고객에게 모바일을 통해서 경험할 수 있도록 했다. 그리고 현대카드는 ‘M포인트몰’ 앱을 통해 고객이 생활 속에서 보다 현실적으로 활용 가능한 모바일 앱을 제시했다. 이번 앱은 국내 모바일 쇼핑몰의 시작을 열고자 인터넷 사용이 쉬운 아이폰 이점에 M포인트 결제를 통한 상품구매, 모바일 기기에 맞춘 상품정보 검색구조 등의 조건을 완벽하게 충족시킨 애플리케이션이다.

현대카드 M포인트몰 어플현대카드 M포인트몰 어플


온라인 프로세스의 모바일로의 전환
아이폰 사용이 활발한 해외 시장은 이미 대형 온라인 쇼핑몰에서 내놓은 아이폰 앱을 활용한 쇼핑이 활발하게 이뤄진다. 국내에도 이런 현상이 도래할 것으로 예상한 현대카드는 플립커뮤니케이션즈와 함께 국내 카드사 최초로 온라인 포인트몰을 기반으로 다양한 제품과 교환구매를 가능케 할 새로운 모바일 쇼핑환경, ‘M포인트몰 아이폰 애플리케이션’ 프로젝트를 진행했다. ‘현대카드 M포인트몰’ 아이폰 앱 구축에 있어 중요 포인트는 사용자가 웹 사이트와 모바일 이용 환경에 따른 혼란이 없도록 구현하는 것이었다. 고객에게 익숙한 온라인 M포인트몰의 구매-결제 프로세스를 모바일 애플리케이션에도 동일하게 적용해 이용의 편의성을 극대화하고 아이폰에서 구현할 수 있는 UI적인 흥미요소보다는 현대카드만의 비주얼 아이덴티티 및 커뮤니케이션 가이드를 최대한 적용해 앱 이용시 해당 메뉴에 대한 이해를 높여 보다 쉽고 빠르게 상품을 구매할 수 있도록 설계했다.

Expression


Contents 01 간결하고 명확한 쇼핑몰 모바일 애플리케이션
현대카드 웹 사이트에서 서비스하는 M포인트몰(http://mpointmall.hyundaicard.com)은 M포인트를 활용할 수 있는 전용 온라인 쇼핑공간으로 가전·디지털 제품과 의류·식품·생활용품 등 1,600여 가지 제품을 구비했다. 이를 아이폰 앱으로 서비스하려고 메뉴 간소화, 상품정보의 집약화를 통해 핵심 콘텐츠를 집중 부각시켜 단순하며 기능적인 프로세스를 구현했다. 인기상품과 신상품, 가격대별 카테고리를 둬 상품 접근성을 높였고, 포인트 보유내역, 장바구니, 주문·발송내역 조회 메뉴 등 쇼핑몰 핵심기능만으로 구성해 쇼핑이라는 이용 목적에 적합하게 제작했다.

Contents 02 사용자 배려한 상품정보 구성
M포인트 앱은 상품리스트 간격을 넓게 구성해 사용자가 상품정보를 한눈에 볼 수 있도록 가독성을 고려해 설계했다. 현대카드 아이덴티티를 적용한 서비스 아이콘을 하단 탭 바의 메뉴로 사용했으며, 직관적인 정보 접근성을 강화했다.
1위부터 50위까지의 종합 판매순위를 노출하는 상품목록은 M포인트몰의 웹 서비스와 같은 순위표시 블릿을 적용해 리스트 상의 제품 이미지 위로 해당 순위를 보여주고, 상세정보는 확대·축소할 수 있게 제작해 상품 이미지를 자세히 볼 수 있다. 또한, 간략한 정보를 하단에 노출해 고객으로 하여금 일차적으로 먼저 접하고, 자세한 정보는 상세정보보기를 통해 상품에 대한 정보를 제공하는 등 고객의 이해를 도왔다.

Contents 03 주문결제 및 구매내역, 온라인 프로세스 적용
결제정보에 대한 과정은 탭 형식으로 구성해 진행과정을 쉽게 인지할 수 있게 편의성을 고려했다. 결제 정보와 주문자, 배송지 정보를 한눈에 쉽게 볼 수 있도록 구성했다. 또한, 최근 6개월까지 이용한 구매·배송내역 조회가 가능한 구매내역 페이지는, 한 화면을 통해 자신이 구매한 상품정보와 송장번호·택배사 등의 실시간 배송확인을 비롯해 주문취소와 반품신청 또한 가능한데 이는 온라인 M포인트몰의 프로세스를 충실하게 모바일 환경에 적용한 사례다.

UX(User eXperience)
UX 특화된 새로움 속에 익숙한 사용자 경험

현대카드 M포인트몰 어플현대카드 M포인트몰 어플


온라인 M포인트몰 경험고객의 사용성과 편의성을 최우선으로 해 모바일 애플리케이션을 처음 접하는 이용자도 빨리 적응할 수 있도록 했다.
상품 위주의 시각적인 풀 스크린을 제공해 사용자 경험에 초점을 맞췄고, 사용자의 몰입도를 높이려고 텍스트 정보를 최소화한 UI를 제공했다. 또한, 상품목록, 상품 상세정보, 장바구니 담기, 구매와 결제까지의 과정은 슬라이딩과 터치 등의 기본 컨트롤을 적용했으며, 아이폰 환경에서의 사용자 경험을 고객이 최대한 느낄 수 있도록 했다.


Application Icon

현대카드M포인트몰 어플

다운로드 http://itunes.apple.com/us/app/id369502181?mt=8

아이폰 애플리케이션의 첫 모습이며 브랜드의 특징을 가장 직접적으로 노출할 수 있는 M포인트몰의 애플리케이션 아이콘도 함께 개발했다. 제작기간 동안 모바일 M포인트몰을 명확하게 전달하고자 현대카드 아이덴티티와 M포인트몰의 디자인 가이드를 활용한 여러 시안의 검토과정을 거쳤다. 최종 선택된 아이콘은 현대카드의 CI 컬러인 블랙 배경에 M포인트몰 로고가 적용된 것으로 가장 직관적인 가독성 결과로 해석할 수 있다. 이 아이콘은 앞으로 현대카드의 다른 앱에도 적용할 예정이다.


프로젝트명  M포인트몰 아이폰 애플리케이션
제작사  플립커뮤니케이션즈
개발사  휴젠텍
클라이언트  현대카드
오픈일  2010년 4월 26일

2010 월간 웹 6월호
Project : mobile 포인트 결제 가능한 모바일 쇼핑몰, 현대카드 M포인트몰
정리 이예근 기자
edited by websmedia
저작권자 ⓒ 웹스미디어 컴퍼니 무단 전재-재배포 금지

웹 전문가포털 월드웹


 

저작자 표시 비영리 변경 금지
Posted by 씨 익