At INNOCEAN, I art directed and designed a variety of UI components and page content for Hyundai.com. This ranged from making revisions to existing components to creating all new components. And creating pages to explain product categories, new models, and new trims. Here's a selection of the projects I was involved with.
2022 KONA N Vehicle Pages
As art director, I worked closely with the creative director, copywriter, and product team to design the pages for the 2022 KONA N, Hyundai's newest performance model. We focused the content on features that give's a KONA N owner bragging rights both on the streets and on the track.
Vehicle Landing Page hero vignette video.
Vehicle Landing Page (VLP) hero vignette.
The N Design section on the VLP highlights unique exterior and interior features.
Powertrain Section on the VLP shows you the performance boost you get by going with the N model.
The Trim Detail Page (TDP) calls out the unique features of the N model.
Detail from the TDP page.
Gallery page features interior and exterior imagery as well as 360 views users can explore.
Detail from the Gallery page.
All Wheel Drive Category Page
I worked closely with the copywriter to create a category page for All Wheel Drive vehicles.
AWD category page hero.
AWD Drive Modes section explains features of Hyundai's HTRAC drive modes.
Vehicle Trim Carousel
The trim carousel is one of the most engaged with components on Hyundai.com. It's the first place where users can compare key features, price, and offers across trims for a specific model. It's also a jumping off point for building your own vehicle and exploring trim features. But the previous trim carousel was missing some key information like available colors, offers, options, and packages. I worked closely with the CD, copywriter, and UX team to redesign the carousel to give users more information from which to choose between trims.
Mobile comp of trim carousel component
Tablet comp of trim carousel component
Desktop comp of trim carousel component with 3 or more trims.
Desktop comp of trim carousel component with only 2 trims.
Desktop comp of trim carousel component with only 1 trim.
Desktop comp of trim carousel component with trims with 8 or more colors.
Desktop comp of trim carousel component for model reveal page.
Desktop comp of trim carousel component without fuel filtering.
Desktop comp of trim carousel component without offer.
