Overview

The Advance Auto Parts Headlights Landing Page was designed to improve the online shopping experience for customers searching for replacement headlights and lighting solutions. The goal of the page was to simplify product discovery, support DIY users with educational content, and create a more organized shopping experience for both experienced customers and first-time vehicle owners.

In addition to the UX/UI design process, I also developed the page using HTML, CSS, and JavaScript in Visual Studio Code, translating the design into a responsive and functional front-end experience.

‍

Goals

1. Improve product discovery and comparison for headlight products.
2. Create a clean and organized shopping experience.
3. Support DIY users through educational content and tutorials.
4. Encourage cross-selling through related maintenance products.
5. Develop a responsive and user-friendly front-end experience.

‍

Features

1. Featured Lighting Solutions: Highlighted headlight products with simplified comparison opportunities.
2. Educational Content: Included installation videos and maintenance resources for DIY users.
3. Cross-Selling Opportunities: Recommended related products to help users complete repairs in one purchase.
4. Responsive Layout: Optimized for desktop and mobile browsing experiences.
5. Clear Visual Hierarchy: Structured layouts and typography to improve readability and navigation.

My Responsibilities

UX/UI Design

• Designed the overall user flow and shopping experience for the landing page.
• Organized content hierarchy to improve product discovery and usability.
• Created responsive layouts focused on readability and conversion optimization.
• Designed product sections that simplified comparison between lighting solutions.

Frontend Development

• Developed the landing page using HTML, CSS, and JavaScript in Visual Studio Code.
• Built responsive layouts and reusable UI sections.
• Implemented interactive front-end components and page structure.
• Ensured consistent spacing, typography, and visual alignment throughout the page.

Accessibility & Usability

• Applied accessibility-focused design practices including readable typography and clear content structure.
• Improved scannability through spacing, hierarchy, and organized product groupings.
• Created touch-friendly and user-friendly layouts across screen sizes.

‍

Tech Stack

• HTML
• CSS
• JavaScript
• Adobe XD
• Visual Studio Code
• Responsive Web Design Principles

‍

Results

The final landing page created a more organized and user-friendly shopping experience for customers searching for headlight solutions.

• Improved product discoverability and comparison.
• Supported DIY users with educational and instructional content.
• Encouraged cross-selling opportunities through related products.
• Delivered a responsive and modern front-end experience.
• Combined UX strategy, UI design, and frontend development into a cohesive e-commerce solution.