Auto Parts Online Store

Device mockups designed by aleksandr_samochernyi on Freepik

Tools & Platforms Used

• WordPress CMS
• WooCommerce (WordPress e-commerce plugin)
• Elementor (WordPress website builder plugin)
• Jetpack (WordPress analytics plugin)
• Adobe Photoshop
• Baymard Institute research
• Google's PageSpeed Insights

Project date

📆  This project completed in August 2021.

Project Summary

The owner of this business, John Panem, (who is related to me,) saught an online presence for his custom carbon fiber car part services.

🚫  He couldn't sell through already existing online stores, like Amazon or Walmart, because he needed a way for his customers to:

• 1.  Request custom made auto parts
• 2.  Contact him directly for questions or concerns
• 3.  Optionally pick up their products in person

🏁  My goal was to create a very straightforward online store for his stockpiled carbon fiber parts.

➕  Additionally, it needed to:

• 1.  Allow for direct payments  💵
• 2.  Provide multiple ways to contact him  💬

My responsibilities

I created the WordPress website and integrated WooCommerce.

🙅  I did not create or edit the theme. (A theme is like a website "skin", i.e. the layout and main functionality of a WordPress website.)

🎨  I designed all the front page marketing imagery, i.e. the product visuals and carousel promos.

🔢  I helped the business owner add his first round of product data while simultaneously teaching him how to do it himself for future products.

◻️  I removed the backgrounds off all his original product photos, and replaced them with white for visual consistency in his Shop pages.

⚙️  I customized page builds with Elementor, and configured options that were available to change within the theme. As I'll explain more below, I improved specific UX points with these configuration options.

Challenges

🧭  UI/UX Challenges:

• 1.  The default compare feature in this theme works awkwardly. It also isn't needed because the products are not similar enough to need comparison by the user.

• 2.  The business owner isn't interested in keeping up with composing a blog, even if it could help with the store's SEO (search engine optimization). In general, he doesn't want to share much information about him and or the brand.
• 3.  In this WordPress theme, all product descriptions and additional information display below the product images—even on larger device screens—which users might not know they'll need to scroll to see.

• 4.  There is no default privacy policy, which gets linked to on the checkout page.

• 5.  Inconsistent typography and line-spacing in the default checkout form, along with other sections of the website.

• 6.  In alignment with Baymard Institute's findings for the best performing cart checkout UX, the WordPress theme did keep the entire checkout process on one page. However, that page is long and overwhelming for a user to fill out.

• 7.  The original theme, Ekommart, had a lot longer front site page with a lot more breadth in their variety of products. This caused longer load times and repetitive content since the Detailed by Panem product catalog is much more condensed.


Click to view the theme's full front page content.

• 8.  The site's shop pages' performance is slower than is optimal. The owner has been uploading non-optimized, full background feature images for new products, which could be contributing to slow load times.

• 9.  The site's search does not include a product's tags, nor descriptive words of the product unless those words are directly written on the product info page.

• 10.  There is very little consideration for accessibility across the site. Priority is given to marketing and visual appeal rather than being widely accessible by everyone.

Results

Accordion to the analytics provided by Jetpack, the Detailed by Panem website averages over 300+ visitors and 700+ views a month.

Screenshots

Updates

UI Improvements

• 1.  Removed the underline from all required asterisks in form labels (via custom CSS)

• 2.  Updated spacing and typography on checkout page (via custom CSS)
  🛠️  fixes item 5 under UI/UX Challenges
• 3.  Updated top page notification banners to match website brand colors (via custom CSS)
• 4.  Updated desktop/web screens dropdown login menu register link to have standard spacing and alignment

UX Improvements

• 1.  Updated the wording in checkout personal data paragraph to not link to a privacy policy page, but instead inform the user that it "will not be sold or used to contact you for marketing purposes." (via WooCommerce setting)
  🛠️  fixes item 4 under UI/UX Challenges

• 2.  Optimized and removed the backgrounds from all featured product photos (that were possible)
  🛠️  partially fixes item 8 under UI/UX Challenges
• 3.  On checkout, the shipping address section hides when "Ship to a different address?" is checked. Unfortunately, there isn't a way to default it to unchecked on page load.
  🛠️  partially fixes item 6 under UI/UX Challenges

• 4.  I removed the blog and about pages for the business owner, so he wouldn't need to maintain them.
  🛠️  fixes item 2 under UI/UX Challenges