Shops Landing Page Design
Role Marketing Designer, 2023
Client RepairPal
Scope Website Design, Illustration, Animation
RepairPal is the hub for all things auto repair. Through our integrated platform, you can do it all — find a trusted repair shop or dealership, troubleshoot your car’s symptoms, get accurate estimates for your repairs, and much more!
As the Marketing Designer at RepairPal, I’m at the forefront of product marketing efforts, bridging the gap between product and marketing to craft captivating visuals and marketing assets that effectively communicate the value and unique selling points of RepairPal and our products.
The Shops Hub Page is a landing page for shop owners who are interested in becoming RepairPal Certified and would like to schedule a call with our sales team to learn more about the road to certification.
Final Design
Process
Discovery
RepairPal’s Marketing Director requested a variety of animated assets for the Shops Hub Page. Instead of creating animations for the current page design, I wanted to approach this project with research-driven decisions and a clear goal since this page is frequently visited by potential customers (shop owners) interested in becoming RepairPal Certified.
Also, I thought this would be a great opportunity to update the page design since the product team updated the design system, and RepairPal’s website is being redesigned.
During the discovery phase, I spent most of my time researching landing pages, specifically on conversion, but from two perspectives — the copy used within the landing page and the design elements.
Below are some key points I gathered from both perspectives —
Clear value prop and CTA
Social proof
Visual
Landing page research checklist
Iteration
Since the landing page would be built in HubSpot, I decided to create the page design in Figma because it’s easier for me to iterate and explore different layouts and components. The page design went through many iterations but I had two goals in mind —
Design supporting visuals that don’t compete with the content
Drive sales
Iterations on iterations
Animations
To add visual interest to the page, I animated the hero graphic and a variety of icons. Since my goal was to drive sales, I wanted the animations to be subtle so that they don’t compete with the content.
The animation portion of the project required some additional steps because the assets were created in Figma and to ensure the best quality, I wanted to export them as SVGs using Lottie.
Animation process
Hero Graphic
Animated Icons
HubSpot
Behind the scenes
Once the animations were finalized, I started building the page in HubSpot. This step in the design process was straightforward since the page design and assets were already created. However, this was my first time building a landing page in HubSpot, so it required some trial and error and lots of Google searches.
I decided to clone the current page in HubSpot and update each section one by one. This was helpful for me to keep things organized, and after building a few sections, I felt more comfortable with the functionality. Also, to ensure that the updated page design wouldn’t impact SEO, everything on the page, besides the animations, was created in HubSpot.
Before and after