Genesis 2.0 Phase 2
Online Platform

UI/UX Design

제네시스 2.0 Phase 2 온라인 플랫폼 UI/UX 개편

글로벌 럭셔리 자동차 브랜드인 제네시스 웹사이트는 트랜디하고 인터랙티브한 디자인을 AEM (Adobe Experience Management) 기반으로 개편하였습니다. 또한 디지털 고객 경험을 개선하고, 온/오프라인의 연계를 더욱 강화하여 글로벌 템플릿으로 확장할 수 있는 기반을 마련했습니다.
클라이언트
현대자동차
오픈일자
2020.09
진행업무
UI/UX 디자인
서비스 지역
대한민국, 월드와이드 (KO, EN)
Mission
제네시스 브랜드 아이덴티티와 디자인 철학을 바탕으로 고유한 인터랙티브 디자인을 반영하고, 기존 컴포넌트를 개선하고, 추가하여 제네시스 고객에게 더 나은 디지털 경험을 주고자 하였습니다.
Strategy & Direction
글로벌 자동차 브랜드 및 최근 웹/모바일의 경향 분석과 Phase1 분석을 토대로 Phase2의 개선 포인트를 발굴하여 디지털 고객의 재방문율이 가장 높은 견적내기 (Build To Order), PIP (Product Information Page), 시승신청 등의 UX를 개선하였습니다.

그리고, 동적인 컨텐츠를 더욱 효과적으로 표현하기 위해 Phase1에서 사용되었던 컴포넌트를 Prototyping tool을 통하여 이해관계자들과 다양한 토론과 합의를 거쳐 약 90개의 컴포넌트로 추가 및 확장하여, 글로벌 럭셔리 자동차 브랜드에 가장 효과적인 엘리먼트와 인터랙션으로 더 나은 사용자 경험을 유도하였습니다.
Grid
제네시스 2.0에 사용된 그리드 체계입니다.
Typeface
제네시스 2.0에 사용된 서체입니다.
Color
Color 01
#ce2d2d
Color 02
#ad7b61
Color 03
#ffffff
Color 04
#cccccc
Color 05
#bbbbbb
Color 06
#999999
Color 07
#808080
Color 08
#757575
Color 09
#666666
Color 10
#4d4d4d
Color 11
#262626
Color 12
#000000
12 Colors
Icon
제네시스 2.0에 사용된 아이콘입니다.
제네시스 컨셉카의 소개 영상입니다.
Result
제네시스 2.0 Phase2에서 구축된 컴포넌트 및 템플릿은 최근 트랜드를 반영하여 사용자의 다양한 디바이스 환경에 맞게 최적화된 컨텐츠의 시각적인 표현이 가능해졌으며, 다양한 컴포넌트의 조합을 통해서 사용자에게 GV80, G80, G70, G90 등 각 차량의 특장점들을 알기 쉽게 전달할 수 있게 구현되었습니다. 또한, 표준 컴포넌트, 템플릿 및 향상된 최적화를 통해서 글로벌 템플릿으로의 확산을 더욱 효율적이고 효과적으로 적용되도록 구현되었습니다.
Home
제네시스 2.0 홈페이지의 히어로 컴포넌트의 데스크탑 버전 디자인입니다.
제네시스 2.0 홈페이지의 모델 라인업을 소개하는 데스크탑 버전 디자인입니다.
제네시스 2.0 홈페이지의 히어로 컴포넌트의 모바일 버전 디자인입니다.
제네시스 2.0 홈페이지의 모델 라인업을 소개하는 모바일 버전 디자인입니다.
제네시스 2.0 홈페이지의 컨셉카와 어워드를 소개하는 모바일 버전 디자인입니다.
제네시스 2.0의 85개 이상의 컴포넌트 디자인과 컴포넌트를 활용한 400 페이지 제작에 대한 영상 썸네일입니다.
제네시스 G80의 갤러리 페이지를 보여주는 데스크탑 이미지와 모바일 버전 디자인입니다.
PIP / The Brand
제네시스 GV80 디자인 페이지의 데스크탑 버전 디자인입니다.
제네시스 컨셉카 소개 페이지의 데스크탑 버전 디자인입니다.
제네시스 민트 컨셉카 페이지의 데스크탑 버전 디자인입니다.
제네시스 모델의 라이프스타일 이미지입니다.
Build To Order
제네시스 견적 내기 페이지의 모바일 버전 디자인입니다.
제네시스 견적 내기 상세 페이지의 모바일 버전 디자인입니다.
제네시스 견적 내기 상세 페이지의 모바일 버전 디자인입니다.
Safety Animation
주행 안전을 보여주는 애니메이션의 스틸사진입니다.
주행 안전을 보여주는 애니메이션의 스틸사진입니다.
제네시스 모델의 라이프스타일 이미지입니다.
Information-based Page Contents
제네시스 다운로드 센터 페이지의 데스크탑 버전 디자인입니다.
제네시스 공지사항 페이지의 데스크탑 버전 디자인입니다. 제네시스 검색 페이지의 데스크탑 버전 디자인입니다. 제네시스 구매 프로그램 소개의 테스크탑 버전 디자인입니다.
제네시스 커넥티드 서비스 페이지의 데스크탑 버전 디자인입니다. 제네시스 고객 센터 안내 페이지의 테스크탑 버전 디자인입니다. 제네시스 전시장 찾기 페이지의 테스크탑 버전 디자인입니다.
제네시스 커넥티드 서비스 페이지의 모바일 버전 디자인입니다.
제네시스 월드와이드 Change Region 페이지의 모바일 버전 디자인입니다.
제네시스 다운로드 센터 페이지의 모바일 버전 디자인입니다.

새로 시작하는 프로젝트가 있다면
지금 문의하세요

business@the-jey.com