KRANK GOLF | 2023 | WordPress, WooCommerce, Elementor, & UI/UX

My Role: I was the sole WordPress website designer, developer, and graphic designer for the Krank Golf Three Driver website. I designed all site elements, including typography, graphics, and colors, to align with the Krank Golf FIRE branding.

Project Description: To boost sales on the Krank Golf Formula FIRE 3 Driver website, I designed a user-friendly interface with a graphic that, when clicked, allows users to choose one of three pre-built FIRE Drivers or three single heads based on their average driving distance. This selection auto-populates the shopping cart and scrolls the user to checkout. For simplicity and optimal user experience, I consolidated the entire E-commerce site onto a single page, including the shopping cart at the bottom. This one-page design was so effective it was used for similar websites.

Client Relationship: Krank Golf has been my client for over 14 years. During this time, I have developed three primary websites, over 20 mini-sites, landing pages, and click funnels for them, in addition to creating hundreds of graphics.

Challenge: Create a UI/UX design for an e-commerce website that integrates all shopping pages into a single page, including the shopping cart. When users click on a relevant section of the graphic to select a driver that suits their needs, the site will automatically pre-fill the cart and scroll to the bottom of the page for checkout. Ensure all order information is sent to Krank's CRM, KEAP. Since the order data needs to feed into KEAP, a standard WooCommerce shopping cart would not be compatible.

Solution: Since building a single cart with six variations was not feasible, I designed and pre-filled six individual shopping carts, each corresponding to a different golf driver. To optimize performance, I layered these carts so that only the top cart would be visible at any time. I used JavaScript to create a functionality where clicking on a specific graphic selects the desired driver, bringing the relevant cart to the top and hiding the others. Additionally, I customized a WooCommerce plugin to create a smooth one-page checkout experience. By utilizing hooks and filters, I added detailed information about the purchased golf clubs to the cart, including the golf club options.

Client: Krank Golf

Date: 2023

• WordPress Development

• WooCommerce Modification

• Elementor

• Custom Web Design

• UI/UX Design

• Theme Customization

• KEAP CRM Order Integration

• Custom CSS3, HTML5, JavaScript, and PHP

• Child Theme

• Custom Graphics