Overview
시대가 흐르고 기술이 발전하면서 환경은 변했지만 결국 사람들의 욕구는 변하지 않았습니다. 단지 그것을 좀더 빠르고 대량으로 시공간을 넘어 이룰 수 있게 만들어 줬을 뿐이죠. 그래서 우리는 모바일 환경의 다른 점이 무엇인지 다시 정의하고 이러한 모바일 환경에서 사람들이 현대카드에 원하는 것을 어떻게 제공할지 고민했습니다.
What people wants has never changed nevertheless technology innovates as time passes. It just gets to be faster, wider, and easier over the barriers of time and location. Hence we deep-dived what is fundamentally different in mobile from PC and how to provide what people want for Hyundaicard in this new circumstances.
-
Role
Senior UX designer / Cell leader -
Skills
Sketch
Invision -
Time
Aug 2017 - Nov 2018
Problem
현대카드의 모바일 웹사이트는 PC웹사이트를 단순히 작은 스크린에 우겨 넣은 것에 지나지 않았습니다. 사용하는 도구부터 (손 vs. 마우스와 키보드) 다른데도 말이죠. 모바일에 최적화된 사용성이 무엇일까요? 그리고 사람들은 모바일에서 무엇을 원하고 있을까요? 아무도 시키지 않고 생각하고 있지도 않았지만 UX랩에서 Bottom up으로 발의하여 진행하게 되었습니다.
Hyundai card mobile website as before was nothing but PC website just crammed all the information to the small screen although we use different input methods(finger vs keyboard and mouse). What is mobile optimisation, and what do people want from mobile? Nobody questioned and asked but we started bottom up and developed it.
Research & Ideation
세월이 변하고 기술이 발전했지만 순간을 기록으로 남기고 싶다, 음악을 듣고 싶다, 소식을 알고 싶다…등 사람들이 원하는 것은 변하지 않았습니다. 다만 이전에는 좁은 범위에서 느리게 일어나는 것들이 시간과 공간, 데이터 양의 제약 없이 무한정하게 가능해졌을 뿐이죠. 수단이 달라졌을 뿐 사람들의 욕망이 그대로라면 어떤 것을 욕망하게 할 지, 어떤 것을 선택해야 할지를 제시하는 것이 현대카드가 잘 하는 것이라고 생각했습니다. 그래서 현대카드 디지털의 방향성은 “From physical to digital world, INSPIRATIONAL EXPERIENCE”로 정하게 되었습니다. 이를 실현하기 위한 구체적인 디자인 키워드로는 1) Origin: 사용자 멘탈모델, 2) Immersion: 몰입, 선택과 집중, 3) Bold: 관습의 탈피로 구체화하고 현대카드 모바일 웹사이트 설계를 다시 진행하게 되었습니다.
Our Design Way
-
#Origin
오프라인 메타포
실제 카드 형태와 리플렛 활용
상담원이 옆에서 하나씩 설명해주듯이 -
#Immersion
높은 몰입감
액션은 한 번에 하나씩
한 눈에 전체를 파악할 수 있도록
트랜지션 효과와 애니메이션 -
#Bold
관습의 탈피
과감한 색상과 레이아웃
현대카드스러움
IA
Simplify for mobile, Logical and balanced, Mobile optimised navigation
Wireframes
3 big impacting factors first : Home, Card apply, Finance apply
Prototype
Final Design
이전 디자인
수정 디자인
현대카드 하면 떠오르는 카드 디자인과 컬러를 과감하게 배치
스크롤할 때 한 화면에 한가지 내용으로 집중되도록 동적인 컨텐츠 배치
팝업 대신 바텀시트로 진행의 컨텍스트를 잃지 않도록 제공
Bold color and layout design just like as Hyundaicard
Transition effects that are fitted on the whole screen one by one so that users can focus one contents each scroll
카드에 서명을 하면서 시작되는 신청화면
카드 형태를 살린 컨펌 버튼
Application begins when users put their names on the plate
Guide message and confirm button designed from the card radius shape
-
- 한번에 한 task만 진행하도록 정보 그룹핑
- 터치인터페이스에 맞게 드롭다운, 라디오버튼 대신 탭버튼, 체크박스 대신 On/Off버튼 사용
- 직관적으로 알 수 있는 은행 고유 컬러 제공
- Only one task provided when the previous one is done
- Button and on-off switch interface instead of drop-down, check box and radio button that are common in PC website
-
- KCB 신용정보 연동으로 복잡한 입력절차 해결
- 확인만 하면 되는 정보는 컨텍스트를 유지하도록 바텀시트로 제공
- Use Korea Credit Bureau data to put complicated information by one touch
- Bottom sheet to confirm the information in the context
-
카드 신청 완료 시 오프라인에서 리플렛이 발송되는 것같은 애니메이션
Animation display just like sending offline reflets