Nissan required an innovative and engaging experience more worthy of their brand. As more markets were joining the AEM platform, Nissan enlisted Designory to reimagine a more interactive approach to storytelling on its website.
Working closely with the global clients, the site was overhauled. From UX and SEO to navigation and site structure, we transformed all elements with a newly interactive and updated look.
Nissan Global’s homepage was completely redesigned from the top on down. Starting with the global navigation - as it affects every page on the site - all was decluttered and pixel-shortened to push content higher above the fold and the client’s KPI right up front. The page was then divided into three main parts: The Home Carousel for major announcements and regional priorities. The newly designed Lineup Carousel allowing the entire lineup of up to 22 vehicles to be accessible right from the home page. And Mosaic Link Tiles for the regional markets’ needs, whatever they may be. New AEM components were specifically designed and strict style-guides were sent to the regions with the release of the new home page, on best-practices, component uses, number of slides per carousel, and the CTAs hierarchy. The new design gave the homepage a much needed UX upgrade and a thoroughly updated look and feel.
A key element of the global navigation update was introducing Mega-Nav, allowing user-access to the entire vehicle lineup without scrolling even one pixel. Driving traffic directly to the vehicle pages and deeper into the conversion funnel eliminated a friction point that previously existed when driving the user to visit a lineup page. The addition of Mega-Nav reduced homepage drop-off by 53%.
MOBILE FIRST APPROACH
Working very closely with the UX team, we designed all pages with a “Mobile First” approach according to the latest user behavior findings on mobile devices. Adding adaptive options not only for assets, but also for copy, all new and updated AEM components were optimized for mobile devices allowing the mobile view to be optimized to the max.
VEHICLE LANDING PAGES
We were able to develop a multitude of new components - including auto-play video components, interactive components, and data driven components - utilizing valuable information acquired while working for years on the Vehicle Landing Pages (VLPs) for Nissan North America and Nissan Europe. Being privy to this specific knowledge and unique experience, we were able to completely redesign and restructure the VLPs according to the latest industry trends, UX and SEO best practices, in addition to creating global templates to fit all the region’s needs, while elevating the UX and the UI. The style-guide was expanded to include the VLPs and audits were conducted to ensure the regions were adhering to the new guidelines. We saw an 11% rise in conversion rate.
Along with updating existing components, we also created a multitude of new components in order to modernize the website. Adding new functionality and interactivity to the site with the help of our SEO team, we unified not only the visual language, fonts, sizes, CTAs, hover states, etc., but also the H tags. A new Atomic Design System was starting to form.
The wireframes were designed by the team in the Los Angeles office and sent to the development teams in London and Costa Rica. Initial designs were then sent back for review and QA before entering the beta phase.
The digital brochure program was initially created for Nissan North America with plans to expand it to other markets in the future. The digital brochure took a more granular look at the vehicle features and allowed the freedom to organize the content according to lifestyle mega-benefits. Central to the program was the recognition of a gap in information available to shoppers - a clear presentation of a vehicle’s “grade walk” or trims, giving the user the opportunity to see the vehicle in a different light, ultimately leading to a higher conversion rate. The program also presented a bigger budget for asset production which could be shared with the website.
Shooting the product videos so that we could edit down segments highlighting features supporting the website, as well as the newly developed autoplay and interactive video components, resulted in the videos not only being part of the extensive gallery, but the entire website ecosystem.