Yukon Gear and Axle offers more than 4,000 select auto parts as a top-tier manufacturer. Their range of product offerings spans diesel trucks, off-roaders, rock crawlers, circle track racers, drag racers, high-performance street vehicles, and general upgrades. Yukon manufactures high-performance ring and pinion gear sets, posi-traction units, lockers, chromoly axle upgrades, differential rebuild kits, hubs, driveshafts, diff covers, and more.
Big Commerce is a major online eCommerce platform offering website templates, eCommerce hosting, payment processing, high volume sales funnels, and offers custom templates designed by their handful of premium design partners, of which our team at Pro Marketing Works (Peter James Studios) was their pick for this project.
Yukon Gear and Axle approached Big Commerce in order to come up with a simple website solution for their hundreds of auto parts partner dealerships. These partners were all over the country, with drastically different brand styles and website needs ranging from high end 4x4 project shops, to rural small-town distributers and mechanic shops.
They needed an eCommerce template that they could customize for each partner business that would do three things:
Allow a customer to input their vehicle type and search for parts based on the differential gear ratios for their vehicle.
Allow customers to easily special order parts from Yukon through any of these distribution partner websites.
Be fully customizable for each distributer partner, while staying within the confines of the Big Commerce platform requirements.
USERS & AUDIENCE
Yukon Gear and Axle customers ranged from individual vehicle owners & casual 4x4 enthusiasts, to professional race car operators, 4x4 mechanics and technicians. Each distributor parts shop had a specific niche and style within the auto parts industry and wanted their website to reflect that.
The website template needed to be easy enough for anyone to use for searching for parts, but also provide specific details and information for professionals in the auto parts trade.
My role was as LEAD UX| UI DESIGNER for the main eCommerce template as well as LEAD DESIGNER on the individual customizations for each partner website. Not only did I create the main design template in collaboration with Yukon, but I also was responsible for the start to finish website design customization and implementation, working with each partner company individually.
I worked closely with the dev team at Big Commerce, the marketing team at Yukon, and with our small team at Pro Marketing Works- our front-end developer and our lead strategist.
SCOPE & CONTRAINTS
Our project constraints were as follows: Staying true to Yukon’s branding guidelines, designing within the coding limitations of Big Commerce’s back-end platform, and delivering a UNIQUE website design to each partner company while using the same template layout.
I worked with over 30 different auto parts partners over a 2 year time period, and did extensive website and product design work with each.
Graphics needed to be top quality and all vehicle photos needed professional photo retouching.
MY PROCESS AND WORK FLOW:
My first task was to meet with the marketing team at Yukon and the Dev team at Big Commerce to understand the scope and limitations of the design. I was able to a get sense for what was needed and where to begin.
Yukon provided USER RESEARCH DATA and feedback for us about what wasn’t working for their current partners- mainly, each partner had their own differential gear calculator and it was very confusing for customers and also for Yukon. In addition, I conducted my own user interviews with owners and clients of the individual parts shops to get an empathic sense for their needs. I created 6 main user personas and learned as much about them as I could.
Next, using a collection of vehicle photos from Yukon and other distributers, I created a library of vehicle graphics to be used on the partner websites. License plates needed to be replaced with Yukon branding, all shadows and reflections added, and backgrounds removed. Several examples are shown below:
MY USER PERSONAS
Race Car Driver
Classic Car Restoration
Rural Shop Owner
We were tasked with creating a new User Interface Design for the differential gear calculator which was the hinge pin of the parts ordering process. Together with the dev team at Yukon, we created a new search tool called The Diff Wizard. This tool would allow customers to enter their vehicle information and receive recommendations on parts that would fit their particular vehicle whether it be a factory replacement part or a part for a customized vehicle.
Through our research and investigation, we found additional needs that users desired- The customized 4x4 and ‘rock-crawler’ category of trucks was by far the most popular use of these products. Customers overwhelmingly wanted to know what type of gears they would need to order for their lifted/mod 4x4 project. They also wanted to order LOCALLY whenever possible- We updated the search specifications to include local area available parts FIRST and added a section for zip code.
We learned that users wanted a streamlined shopping experience with reliable parts information without having to call Yukon directly for advice. With the vast array of possible vehicles this was a UX challenge where we really had to dive deep into the parts inventory and utilization of those parts for different purposes. We learned so much about the auto parts industry, specifically the hobby and profession of 4x4 competition, racing, and classic car restoration.
OUTCOMES & RESULTS
DESIGNS BY LOUISA FIRETHORNE
As a result, we prototyped 3 possible interfaces for the Diff Wizard, and 5 possible website template layouts for homepage, parts category pages, and product detail pages. Among these, and through a process of revision, we isolated a winning template, one that could be used over and over again for every partner website but customized to look completely different for each partner store.
We then began to reach out to each Yukon partner and assist them with the website customization design for their unique business branding. This was essentially and individual website design project each time, and we worked with over 3o partners in 2 years.
We were so successful in implementing these projects and working with the auto parts distributors that we got recommended for many more website design projects in the industry. Pro Marketing Works opened a new service side line with streamlined websites for clients in the automotive parts industry. This new service was dubbed APeC (Auto Parts eCommerce)and I was chosen as the Senior UX Designer to lead the new business architecture and fulfill new design contracts with Big Commerce. I also did all of the graphic design work and new website for APeC, creating a portfolio of our work, creating email marketing campaigns and materials to share our new services.
Yukon loved our work so well, we earned our Gold Premium title at Big Commerce and became one of their exclusive design partners. We received numerous feedback emails expressing gratitude for the new website designs and the seamless interaction between Yukon and thier client networks.
User testing and website traffic data confirmed a lower bounce rate on the homepage (containing the Diff Wizard) which indicated ppl were successfully using the new differential gear search tool. We also saw an increase in sales across all partner site while also reducing the number confused calls received by each distributor shop.
Additionally, our team won dozens more design jobs in the auto industry including product photography, logo and branding development, packaging design, and commercial graphics. Most of this business was direct word of mouth sales traffic from Yukon distributor stores we helped in the web design process. We considered this cascade of projects and delivery- an all-out success!