Custom Performance Engineering is an aftermarket parts manufacturer, specializing in direct-injected turbocharged vehicles.
Project Details
Client
Custom
Performance
Engineering
My Role
UI/UX Design
Wordpress eCommerce Design
CSS3 Styling
Front End Development
Tools Used
Adobe XD
Wordpress
Adobe Photoshop
Adobe Illustrator
Problem
Custom Performance Engineering presented a very large scale project that I headed both the design and development. Their webstore was outdated and extremely clunky to get to through to the cart process. Also, with highly anticipated product releases and sales, the site would frequently crash, leading to a horrible customer experience.
Solution
The first order of business was to update the website shopping cart to a more modern Wooceommerce ecommerce system. In addition, the front end of the website was rebuilt to follow their branding. All of the pages with information that isn’t updated frequently are static HTML to improve load times and reduce server load. When recreating the customer journey, I focused on making sure getting to a product was as quick and accessible as possible.
Design
Custom Performance Engineering has several pages that explain their process and what sets their products apart. Since this information might not be important to general users, every static page has a call to action to help guide customers to the product pages for their particular vehicle.
Product Pages
Every product page features a PayPal Checkout button to streamline single cart purchases. For mobile users, Venmo is also shown as a quick payment method.
Vector Illustrations
Custom Performance Engineering sells parts worldwide, with that in mind, we knew that we would have to use graphics for each vehicle. Since certain car models may have different names or varying model years in parts of the world, we wanted to make this as graphically accessible as possible.
I created a custom illustration for each supported vehicle along with it’s most common model name and US year range. Changinng from text to images reduced the on page time for the Ford section by 20%. This was verified using Google analytics over the period of 3 months.
Simplified Checkout
Another area that needed to be streamlined was the checkout page. Previously the page used the same overall theme as the rest of the website. We noticed that users were spending a lot of time on this page and that frequently carts were abandoned. To help reduce this, I implemented a simplified checkout and cart page.
The only link on the page is back to home and the flow of the page makes it easy to check out and the form is autofill friendly and can be auto-populated when a user is logged in with their Google account.
Copyright 2022 Trip Ulvila