Genesis 2.0 Phase 2
Online Platform

UI/UX Design

Genesis 2.0 Phase 2
Online Platform UI/UX

Using Adobe Experience Manager (AEM) and re-thinking the Genesis digital platform as a global luxury brand, we focused on optimizing the online customer journey that seamlessly connects to offline customer experience and strategically constructed a flexible framework and sophisticated design elements as a core foundation for the site's global rollout.
Client
Hyundai Motor Company
Date
Sep. 2020
What we did
UI/UX Design
Region
Korea, Worldwide (KO, EN)
Mission
Aligned with the Genesis brand identity and design philosophy, we aimed to deliver an enhanced digital experience by developing existing components as well as new components, and by implementing a unique interactive design for Phase 2 website.
Strategy & Direction
Through Phase 1 analysis and our research-driven approach with our dedicated team, we identified key points of improvement and found new creative ways to further improve the User Experience (UX) for key pages with high return rates such as Build To Order, PIP (Product Information Page) and Test Drive application page.

We liaised closely with our client and stakeholders to create a content-rich website that is dynamic and worked with the prototyping tool to effectively create the elements and interactions for over 85 components.
Grid
Grid system for Genesis 2.0 page.
Typeface
Typeface for Genesis 2.0 page.
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
Set of icons used for Genesis 2.0 page.
Introduction video for Genesis Concept Car.
Result
The renewed Genesis 2.0 Phase 2 website reflects the latest design trend, using the components and templates to creatively express both visual and text-based contents across different devices. The features of Genesis line-up such as GV80, G80, G70, G90 etc. are clearly communicated with the combination of dynamic components that enable users to better engage with the Genesis brand and its online contents. Moreover, the overall result of Phase 2 components, templates with UI/UX optimization is easily adaptable with cohesive guidelines and can be easily expanded for a global rollout.
Home
Desktop design for hero component on Genesis 2.0 homepage.
Desktop design for introducing the Genesis model line-up on Genesis 2.0 homepage.
Mobile design for hero component on Genesis 2.0 homepage.
Mobile design for introducing the Genesis model line-up on Genesis 2.0 homepage.
Mobile design for introducing the Genesis concept car and awards on Genesis 2.0 homepage.
Video thumbnail image of Genesis 2.0 created with more than 85 components for more than 400 pages.
Desktop image and Mobile design of Genesis GV80 Gallery page.
PIP / The Brand
Desktop design for Genesis GV80 Design page.
Desktop design for Genesis Concept Car Overview page.
Desktop design for Genesis Mint Concept Car page.
Lifestyle image of Genesis model.
Build To Order
Mobile design for Genesis Build & Price page.
Mobile design for Genesis Build & Price detail page.
Mobile design for Genesis Build & Price detail page.
Safety Animation
Still image of safety animation for Genesis model.
Still image of safety animation for Genesis model.
Lifestyle image of Genesis model.
Information-based Page Contents
Desktop design for Genesis Download Center page.
Desktop design for Genesis Notice page. Desktop design for Genesis Search page. Desktop design for Genesis Financial Program Overview page.
Desktop design for Genesis Connected Services page. Desktop design for Genesis Customer Support page. Desktop design for Find a Service Center page.
Mobile design for Genesis Connected Services page.
Mobile design for Genesis Worldwide Change Region page.
Mobile design for Genesis Download Center page.

E-mail us your inquiries to start
a new project

business@the-jey.com