CASE STUDY: The New NGK Spark Plugs Website

Web Design, Web Development
7 February 2017

Industry leader NGK Spark Plugs required a high performance, cutting edge website with comprehensive tools and information for their large, engaged audience.

Looking to align their online experience with their overall successful brand presence, JTB Studios supercharged a dated, basic website to give users an immersive experience that leaves them as impressed with NGK’s digital presence as they are with their physical products.

 


 

The task of updating an existing website has its fair share of pros and cons for a web design team: they have the chance to perform a thorough SWOT analysis to determine what is and isn’t working, as well as the ability to propose updates that will capitalise on opportunities and reach the client’s objectives.

 

But they also need to be mindful of the existing audience who may be resistant to a drastic change in their online experience – and this is something the JTB Team kept front of mind when re-designing the much-loved Part Finder component of the site.

 Racing_Automotive_Web_Design_Melbourne_JTB2

Sitemap

Starting with the sitemap, the JTB Studios team updated the menu from a classic single structure to a primary and secondary navigation that highlighted the Part Finder.

 

“The main priority was to ensure that the menu was intuitive and allowed for clear direction for all user personas,” said JTB Studios Lead Designer, Aaron Fraser. “By segmenting the information into a categorised menu structure with Primary and Secondary Navigation, anything product-related is kept up-front and easily accessible.”

 

User Personas

As the site has a range of users with slightly different needs and objectives, the JTB team needed to identify each user group and how they use the site. User personas included mechanics, resellers and motorsport enthusiasts, and each persona used a slightly alternate journey to source their information needs.

 

“After we did our signature Creative Brief session, we realised that there were 3 distinct user journeys that needed to be accommodated with the re-design,” said Fraser.

 

This meant that the homepage needed to captivate and excite the Mechanic and Reseller personas, but the product pages were key for the Motorsport enthusiasts.

 

“Understanding how each persona used the site was critical to how the site was eventually designed,” explained Fraser. “The end result is a highly-intuitive site that satisfies each group.”

NGK-New-Website-PR

Part Finder

The Part Finder tool is the key point of difference of the site. Used by mechanics and car enthusiasts to select the right part for their project, updating the design and functionality was a large portion of the re-design and this was reflected in the double navigation.

 

“The Part Finder was so mission critical in this site re-design that it’s actually listed as the Primary Navigation, with the rest of the pages part of the Secondary Navigation,” offered Fraser. “Users come to the site specifically for the Part Finder, and it’s become a key reason for the pre-existing popularity of the site. Getting this right was one of the most important aspects of the project.”

 

When addressing the Part Finder, Fraser looked at it from a user experience perspective first.

 

“The Part Finder is mainly used on-the-go – and by that I mean on mobile devices. Think about it: you’re in the garage, working under the hood and you need to know what part you need. You don’t want to go inside and check your computer – you want that information in your hands. You want it now,” said Fraser.

 

“So I designed that feature mobile-first. When you view it on the desktop version of the site, you’re looking at something built for mobile, and you can feel how simple and easy it was to use. That’s the experience users want, so that’s what I designed.”

 NGK_Web_Design_JTBStudios1

Resources

With a comprehensive resources section, the site is a fantastic educational hub for home enthusiasts as well as professionals.

 

The simple, user-friendly interface makes simple work of structuring the information-dense product catalogue. Detailed, technical drawings explain a range of parts, making the site the perfect reference tool for both novice and seasoned professional.

 

Launched in December 2016, the site is ready for your viewing pleasure.

Blog

You made it this far
Let's chat
1300 66 99 58
88 Langridge Street Collingwood 3066

    Hi, my name is

    I'm from

    You can call me on

    and email me at

    I would like to chat about...

    (optional)
    (optional)

    Wow, so nice of you  
    We’ll be in touch shortly to learn more about your project.

    Projects

    Benchmarque V2

    Education Health & Medical

    Aquila

    Fashion & Beauty Retail
    3

    ELLA

    Education Technology
    4

    Westbourne

    Arts & Culture Education
    3

    NGK

    Manufacturing & Industrial Retail Technology Transport
    3

    CSB

    Banking & Finance Civic & Public Not-For-Profit