Hyundai Motor N Brand
Official Website

Responsive Web Design UI/UX

Hyundai Motor N Brand Official Website

Seamlessly blending brand identity and the premium experience of the Hyundai N brand, we brought the site to life by redefining a story-driven design language that reinforce its new "Feel the Feeling" brand message, and further communicated the emotions and the excitement of driving Hyundai Motor's high-performance N models by implementing a more functional and sophisticated design.
Client
Hyundai Motor Company
Date
Sep. 2017
What we did
Responsive Web Design UI/UX
Region
Worldwide
Video thumbnail image of N brand - first page.
Mission
Our primary goal was to bring the emotional sensations of Hyundai N's high-performance driving experience to an ever-widening audience in a fun and exciting way. For this, we reconstructed a responsive framework in our content and design strategy and set our minds on providing an engaging informative narrative that motivates the user to easily discover and deeply explore the site's dynamic contents: from behind the story and brand video to detailed information about the N vehicle line-up and its technological innovations.
Strategy & Direction
Embracing Hyundai Motor's dynamic N brand personality, we reconfigured the site using fluid grids with a flexible UX design structure to provide greater usability and an optimal browsing experience for today's mobile users. Streamlining the user flow with emotional delight, we further elevated the visual experience by overlapping image and typography and used the N brand's unique sky blue and red colours to communicate a clear visual identity.
Grid
Grid system for N brand page.
Typeface
Typeface for N brand page.
Color
Color 01
#e63312
Color 02
#aacae6
Color 03
#ffffff
Color 04
#000000
Color 05
#04478b
Color 06
#dceaf5
Color 07
#444444
Color 08
#c7c7c7
8 Colors
N brand vehicle and two models.
Result
Our creative UI/UX design helped to create a recognizable identity for the Hyundai N brand and effectively provided an enhanced digital brand experience in which users can intuitively engage and "Feel the Feeling". Ultimately driving the N brand forward and building on its global audience, we have successfully established a flexible and cohesive framework to ensure that users are well-informed of the site's dynamic content while they continue to seek for more excitement of the new connected brand experience.
Origin Page of N Story
Tablet design for N brand Origin page.
Mobile design for N brand Origin page.
Motorsport image of N brand vehicle.
N-Gineers, Technology Page of N Story
Web design for N brand story page.
i30 N Page of N Cars
front view of blue i30N on the construction
Feel the feeling.
left side view of blue i30N on the construction
Measured in BPM not RPM
red and white logo of i30N
front view of blue i30N with man
left side rear view of blue i30N
Making your heart beat with an emotional driving experience.
front view of blue i30N with walking man
right side top view of i30N
front view of i30N with two man
left side front view of blue i30N
Web design for i30 N introduction page.
Web design for i30 N introduction page.

High- Performance Powertrain to Feel the feeling

right side front view of blue open door RN30 with skidmark on road
N brand concept car.
Concept Page of N Cars
Video thumbnail image of N brand's concept car page.
Web design for N brand concept car - first page.
Web design for N brand concept car - second page.

E-mail us your inquiries to start
a new project

business@the-jey.com