- 평가내역
WEB AWARD KOREA evaluation
등록정보
|
| 타이틀 | 한국씨티은행 | |
|---|---|---|
| Citibank Korea Inc. | ||
| 서브타이틀 | 씨티은행 | |
| Citibank | ||
| URL | http://https://www.citibank.co.kr 사이트보기 | |
| 소개 | 씨티은행 차세대 프로젝트로서 원소스-반응형웹으로 구현한 PC와 모바일 | |
| 키워드 | 씨티은행,글로벌 뱅킹,차세대 뱅킹,반응형 웹,웹 접근성,디지털 디자인 언어 | |
| 제작년월 | 2017.5 | |
| 등록구분 | 데스크탑웹 | |
| 후보등록분야 | 금융 부문 > 은행 등록분야 목록보기 |
|
| 소속사 | 한국씨티은행 | |
| 제작사 |
(주)플립커뮤니케이션즈 정보보기 |
|
| 제작사 제작진 |
|
|
| 웹사이트 설명 | 제작목적
씨티은행의 글로벌 디자인 가이드를 적용한 UI/UX를 구축하며 윈도우 이외에 매킨토시와 리눅스, 스마트기기 등 다양한 기기에서 접속이 가능하도록 한다. 또한 익스플로러 이외에 크롬, 파이어폭스 등 다른 브라우저에서도 접근이 가능하고, 위의 다양한 기기와 다양한 브라우저 사용자를 위한 옴니채널 구축으로 원소스-반응형웹을 구현한다. 기획의도 씨티은행이 글로벌 디지털 금융기업으로 성장함에 따라 여러 국가, 다양한 디지털 환경에서 명확하고 일관성 있는 편리한 사용자 경험을 위해 브랜드를 개선했다. 새롭게 구축한 디지털 디자인 언어(DDL, Digital Design Language)를 적용하는 '아시아 첫 디자인 선행'이라는 상징적 의미가 있고, 그런 의미를 갖는 만큼 UI/UX적으로 철저하게 가이드 기준을 적용하고 검증을 거쳐 기능적 개선을 더하는 데 중점을 뒀다. 특징 1. 원소스-반응형웹 디지털 시대의 디지털 금융을 활성화하기 위해 모바일 웹에 최적화된 UI를 기본으로 태블릿과 PC까지 적용했다. PC의 경우 넓은 해상도를 기반으로 화면을 구성해 와이드 모니터에서는 넓게, 작은 모니터에서는 반응형으로 작게 사용자의 모니터 환경에 최적화된 UI를 구현했다. 뱅킹 화면의 다양한 형태의 테이블에서 모든 테이블 유형을 분류한 후 자바스크립트의 반응형 테이블 가이드를 정의해 사용자의 다양한 접속기기에 최적화된 화면 UI를 배치할 수 있도록 했다. 2. 직관적이고 간결한 UI 사용자가 잘못된 선택이나 이탈 없이 쉽게 올바른 선택과 집중을 할 수 있도록 사용자 우선의 정보 재배치와 그룹핑, 페이지 이동의 최소화를 이뤄냈다. 이를 통해 명확한 상호작용과 피드백에 최우선으로 한 UX, 그리고 이를 뒷받침하기 위해 목적과 기능에 충실할 수 있는 직관적이고 간결한 UI를 구축했다. 3. One-Page UI 메인 홈을 포함한 콘텐츠를 구성하는 페이지에는 복잡한 꾸밈 요소 없이 사용자가 필요로 하는 정보 및 기능들과 고객 가치를 대변하는 실사 비주얼을 조화롭게 구성해 딱딱한 은행 웹사이트의 느낌을 탈피한 과감한 One-Page UI를 구성했다. 4. 전계좌 조회 나의 계좌 정보와 거래 내역 등 금융 정보를 한눈에 볼 수 있는 대시보드에서는 사용자 스스로 우선 필요한 정보를 최적화해 재배치할 수 있도록 Expend-Collapse와 Drag 기능을 적용했다. 이를 통해 최적화된 UI를 구성하고, 한 번의 드래그만으로 복잡한 프로세스와 페이지 이동 없이 간편하게 이체까지 가능할 수 있도록 구현했다. |
|
| 추가이미지 |
        
|
|
| 제작/구축 관련 자료 | ||