Pioneer DJ Help-Center Design / Redesign
Manufacturer of DJ and Music Production Equipment.
Manufacturer of DJ and Music Production Equipment.
Zendesk
Trello
HTML
CSS
handlebarsjs
Figma
Invision
Zeplin
Photoshop
Illustrator
Since launching their first product for professional DJs in 1994, Pioneer DJ has been widely recognized as a leader in the DJ scene, specializing in the production of professional DJ equipment, music production tools, and audio installation systems.
Pioneer DJ had several existing support sites, including a knowledge base (pioneerdj-help.com), a community forum (forums.pioneerdj.com), an internal knowledge base (pioneerdjuk.com) - all hosted on Zendesk, and an external FAQ site (faq.pioneerdj.com) on a separate server, offering tutorials and troubleshooting articles in both Japanese and English.
The company aimed to consolidate these disparate platforms into a single, unified support site (support.pioneerdj.com) that would provide end users with a comprehensive self-assistance and download library, available in multiple languages such as French, German, Italian, Spanish, Portuguese, Japanese, Dutch, Polish, and Russian.
One of the primary challenges faced by Pioneer DJ was that their support team frequently received inquiries related to common problems, which could have been addressed using the existing knowledge base and community forum. However, many end users were unaware of where to find the relevant information and resources already available across these platforms.
As a result, the support team spent a considerable amount of time handling routine issues and repetitive requests, rather than focusing on more technical tickets or those requiring urgent attention.
I initiated the project by conducting a comprehensive audit of the Help Center's content. It became apparent that the FAQ material had been developed by various individuals and originated from different language sources, such as English and Japanese. This led to inconsistencies across the multilingual sites, as some original articles lacked their corresponding translations.
Another challenge was the sheer volume of content in the article library, which included over 130 products and 7,500 FAQ articles, not to mention the additional materials found in the Knowledge Base and Community Forum. This vast collection of information made it extremely difficult to efficiently map and index, maintain, and keep up-to-date. Consequently, over time, the system became plagued with outdated content, broken links, and misplaced site references.
The Help Center presents multiple options for obtaining information, with four separate sites available. This often leads to confusion for users as they try to determine the best source for answers. It becomes unclear which site serves as the primary source of information and the Knowledge Base.
Navigation within the menu can also be ambiguous. For instance, the distinctions between DJ Products, Knowledge Base, and Product FAQ are not readily apparent.
Users may struggle to identify the correct path when faced with a product issue, which not only results in a confusing experience but also demands a significant amount of effort from the customer. This is largely due to the vagueness and lack of clear direction within the Help Center's structure.
The "Contact Us" link was prominently displayed on the global homepage, making it easy for users to bypass the Knowledge Base and FAQ sections. This immediate access to assisted service, such as the "Contact Us" page, inadvertently encourages users to abandon self-service options.
As a customer, if I am overwhelmed by a confusing design and unclear pathways to self-service resources, I may be more likely to give up searching and click directly on the "Contact Us" page. The global homepage is just one example of where site navigation can contribute to users opting for assisted service instead of self-service.
To address this issue, it is crucial to focus on reducing failure points throughout the self-service user journey. By guiding users more effectively in navigating the website, we can prevent self-service fallout and encourage them to make use of the self-service platform.
The primary challenge stemmed from insufficient coordination between the external and internal Knowledge Bases. This disconnect led to a deficiency in both contents and the development of tools that could be utilized at the customer service level, such as macros and the internal Knowledge Base.
The Pioneer DJ site exhibited an outdated design style and inconsistencies throughout its various components. A noticeable disparity existed between the main site and the FAQ site, which further emphasized these issues. Upon examination, the FAQ section was found to have several critical maintenance concerns, including untranslated content, outdated materials, broken links, unclear or incomplete articles, and poor indexation. Additionally, the presence of multiple brands led to inconsistencies across similar content and weak brand cohesion between the different sites.
The primary objective was to redesign the support site in a way that would enable users to efficiently resolve their issues through self-service channels, thereby reducing the volume of ticket requests for the support team.
Key areas of improvement included enhancing the navigational experience, improving searchability for end-users, updating and creating new content, and aligning the visual design of the support site with the overall brand.
We established a set of self-service goals, which included increasing the self-service score and reducing the number of tickets generated across all six language support sites.
The ultimate goal was to create a single, comprehensive Knowledge Base available in multiple languages and scalable to additional languages. This would provide customers with the resources necessary for effective self-service through easily searchable content and AI assistance. Additionally, the project aimed to design a brand-new Help Center with a distinct Pioneer DJ-branded appearance.
We initiated the process with a discovery phase, which involved auditing all Pioneer DJ websites. After gathering the necessary information, we began developing an appropriate content architecture and mapping the customer journey experience. These discovery activities allowed us to conceptualize the Help Center and generate various new ideas for content and presentation through low-fidelity design sessions. These ideas culminated in the creation of a new site with a clean, modern appearance.
My initial responsibility was to thoroughly comprehend and analyze the available information. Additionally, I sought to identify gaps in translated articles between English and Japanese within the FAQ section. To accomplish this, I collaborated with a temporary consultant who assisted in auditing the Japanese content (over 7,000 articles), which we then compared to their English counterparts.
Subsequently, I reviewed the existing content, rectifying any inaccuracies or incomplete information and archiving outdated articles as needed. Once the articles were updated and corrected, I organized the content into distinct categories and established a clear content hierarchy.
We embarked on a complete overhaul of the Pioneer DJ support site to create a streamlined self-service experience for users, aimed at reducing the support ticket volume. Our primary objectives included enhancing the site's navigation, improving searchability, updating and creating new content, and aligning the visual design with the overall brand.
We started with a discovery phase that involved auditing all Pioneer DJ websites to identify inconsistencies and gaps in content, particularly between English and Japanese translations. We then developed a content architecture and mapped the customer journey experience, which guided our redesign efforts.
To ensure a cohesive, multilingual Knowledge Base, we collaborated with a temporary consultant to audit and compare Japanese content with its English counterpart. We reviewed and updated existing content, archived outdated articles, and organized the material into clear categories with a well-defined hierarchy.
The result of our efforts was a new, modern site with improved navigation, enhanced searchability, and a consistent brand appearance across all platforms, ultimately delivering a more user-friendly and efficient self-service experience for customers.
Following the consolidation of content and resources from various Pioneer DJ brand support websites (faq.pioneerdj.com, forums.pioneerdj.com, pioneerdj-help.com, pioneerdjuk.com) to support.pioneerdj.com, we were left with over 7,000 articles, including tutorials, announcements, and troubleshooting materials.
Our main challenge in organizing a clear structure was to make these articles accessible to the end user within three clicks from the homepage. With more than 70 products, it was inevitable that certain articles were specific to particular product types or models, while others were applicable to all product models. We aimed to avoid repetition and potential issues in identifying related articles for future updates and maintenance, thus avoiding the creation of multiple versions of the same article. To achieve this, we separated individual articles from those that served multiple devices within the same product type.
Consequently, we developed a two-pronged approach to navigate the content. Users can explore the content for individual products or navigate through content organized by shared topics for a specific product type. This method ensures a more streamlined and efficient user experience when accessing the support site.
Customer journey and customer experience design until the point of contact
In the existing site, the customer journey begins outside the customer service resources, and this is where the primary failure point in our customer service journey lies: site navigation.
When we discuss site navigation, we are specifically referring to the website's function that assists customers in finding their way around, with the ultimate goal of helping them find solutions to their questions or problems. Navigation can be considered the gatekeeper to all self-service capabilities, as customers must locate these tools by navigating the website.
Reflecting on the user experience from a customer's perspective, it becomes evident that a significant volume of users is being lost through the website's navigation to self-service resources. From the moment customers land on our website, some factors lead them to opt for assisted channels instead of resolving issues via self-service. Customers are directly accessing our phone number or choosing to send emails.
Throughout the customer journey, users are lost and opt for assisted service instead of self-service resources provided on the global site.
Identify the quick fixes and solutions to improve your site navigation experience. To enhance the site navigation experience, consider implementing the following quick fixes and solutions:
Additionally, it is essential to provide a well-structured customer journey through the website.
An ideal site navigation scenario should offer customers a direct pathway to a self-service resolution, regardless of where they land on the website.
Utilize menus and breadcrumbs to guide customers efficiently to the appropriate self-service resources, avoiding designs that may erode their confidence.
From the global home page, guide users to the customer services and support page, then to the self-service resources, ultimately leading them to a self-service resolution.
To optimize the site, we initially focused on high-volume issue types, refining search results for these areas. We began by utilizing keywords that highlighted key subjects in article tags, titles, and opening paragraphs.
We delved into the analysis data to understand the search performance of the support site, examining the terms used in searches, results generating no articles, article clicks, and articles without clicks. This information allowed us to further enhance the site's search capabilities and improve the overall user experience.
We collaborated with one of Zendesk's language partners to efficiently translate all English articles into the primary languages supported by our live agents, which included French, German, Italian, and Spanish. Subsequently, we established a system to monitor the structure of the new Help Center, tracking the status and progress of article translations across all sections. This approach ensured that our multilingual content remained consistent and up-to-date.
Developing and contributing to content standards, tone and voice, terminology, and content quality;
Created a glossary of technical terms and translation (driver, firmware, output, DJ performance mode, etc).
Understand the need for new articles, prioritization of such new content, and monitoring of the performance of each language support site (English, French, German, Italian Spanish, Portuguese, and Japanese).
Liaising with the Head Office in Japan for any software updates and future product releases.
Ensure articles can be found, so end-users can solve their own issues, saving themselves time.
Discover what issues need to be addressed with the creation of new articles. Discover what queries are unanswered due to lack of content or poor search results.
Liaising with the Product Planning team in Japan on software development and future product releases.
Product Planning - Article Drafting - Translation - Publication - Support Agents Feedback - End-User Feedback
I completely redesigned the Pioneer DJ support site from scratch, encompassing landing pages, browsing sections, article pages, contact sections, and the design system. This process provided us with a unique opportunity to define the appearance and ambiance of the custom-branded support experience.
I developed UX/UI mock-ups, wireframes, and full-page designs for the support site, catering to both mobile and desktop experiences.
Throughout the redesign, we integrated Pioneer DJ's brand language across all design components to ensure easy recognition and a consistent user experience.
From the outset, it was crucial to establish a seamless transition from the global site to the support site, ensuring brand consistency across all touchpoints.
To achieve this, we incorporated various UI elements throughout the support site, including colors, fonts, product images, and icons. This approach created a cohesive visual experience for users and maintained brand identity across the platform.
We developed a recognizable navigation design incorporating established brand graphic elements in both UX and UI. By making categories more distinguishable, customers could easily understand their purpose, which contributed to a more approachable and user-friendly support portal.
We redesigned the structure, assigning unique icons and detailed descriptions to the main categories, thereby offering end-users a more informed and intuitive navigational experience.
The article indexation and listing were also revamped, enabling end-users to conveniently access and open all articles within a section on the same page.
Additionally, I was responsible for creating new layouts for each article type and their corresponding HTML templates, ensuring mobile-responsive articles and a seamless user experience across devices.
Article design
Typography, Colours, font weight, Components, and buttons, interacting SVG Animation
Creation of video tutorials and animated GIFs
I took responsibility for the custom design of icons and UI assets, as well as sourcing and editing images for product landing pages. This ensured a cohesive visual experience and maintained brand consistency throughout the site.
Creation and addition of Pioneer DJ's unique design features in the articles adding functionality and brand recognition
The project's outcome included the following achievements:
However, it's essential to consider the metrics you want to extract from your Knowledge Base, as this will influence its construction. Since the contact link was placed in the footer on the homepage and not within each article on the support site, we were unable to track button clicks effectively. As a result, we could not generate an accurate report pinpointing the exact failure point within the support site that prompted customers to submit ticket requests.
