LeadRev
Automotive Lead-Gen Pages
Hey Bēhancers,
Welcome to my first project! I am the Sr. SEO Strategist at my automotive marketing agency, and recently started our unofficial UX team to create the below product (LeadRev). The design is 100% Adobe XD and Photoshop. Below I walk through my layout choices, as well as my XD workflow for scaling the project across the various auto manufacturers, utilizing the symbols and global colors features inside of XD.
Overview and Page Goals
This lead-focused landing page is designed to capture customers whose search terms indicate they are at the bottom of the car buying cycle. All bottom funnel elements for this model, including inventory, incentives, and CTA's are easily accessible to shoppers here.
There is a huge focus on branding in the tabbed copy with the Why the RX tab and the Our Guarantee tab to instill trust and transparency. The Testimonials use a Google Review API and the Directions section has an embedded map which we are tracking as soft conversions for on-click events.
Lead-Gen Focused Landing Page for Lexus (Desktop)
A/B Testing
Below, layouts A, B & C were testing variants for the placement of key elements including the incentive, countdown, model image, and trust building tabs. I prefer the broken grid image of layout B, but the client ultimately opted for layout C, which will have the hero offer fixed on scroll.
Scaling
The scaling goal of this page is to create one for every car model... OMG what!? Yes. To adhere to the unique styling guidelines of each manufacturer, it was also necessary to create a different stylesheet for each one. OMG... #crazy
UX Challenge: In Adobe XD, the symbols panel assumes global styling, so to properly utilize that feature, I would have to create a different XD file for each unique stylesheet, but I definitely wanted to keep it all on one file...
Solving for X
The issue I experienced with XD is that we are not able to name or rearrange the colors, fonts, and symbols. As a result, I am left to discern between the nuances of Porsche Red and Jaguar Red, by manually going into an element and cross referencing it with the global assignment. Likewise, I wasn't able to upload custom font packages, so Porsche's font, Porsche Next, had to wait until the development stage.
Work Flow in XD
UX Solution: Given the functional similarities between each page, I decided to use the symbols panel to store the core building blocks that comprise each page, then populate that across each make, ungrouping the symbols and reassigning them once they are modified to the styling of a specific make.
Each manufacturer's LeadRev page is comprised of the following elements:
1) four building blocks - created symbols for (see below!)
2) a unique font package - created a character style for
3) and a unique color theme - added as a global color
Mobile Version
The mobile version below features the same elements above the fold.
The initial view on the left shows all of the main elements in large form. The right shows how those elements will be fixed to the top on scroll using media queries.
The goal is to keep the CTAs visible while creating a sense of urgency as customers browse the dealer's inventory below the fold.
Which one is your favorite? Thanks for reading and keep an eye out for more digital strategies and posts to come!
