Hero image


interactive timeline design – celebrating 60 years of audio-technica

Get in touch


World-renowned audio equipment company, Audio-Technica, reached a landmark year in 2022, celebrating their 60th year. Following this milestone we embarked on a comprehensive campaign to celebrate.


long-form content

Our content marketing team initiated a project called ‘Our History’, aiming to delve into Audio-Technica’s rich heritage, iconic products and innovative achievements. Inspired by the timeline on the Hong Kong version of the brand’s website, we set out to create a captivating long-form piece.

Collaborating closely with the Audio-Technica team, our content specialists gathered the necessary information and collaboratively crafted an overview of the company’s history. We began with a concise summary, including key dates and products, and then expanded it by adding compelling narratives and creative content in the brand’s unique tone of voice.

Initially, the plan was to feature this piece on the newsroom section of the website. However, our PR experts pitched the idea of a digital timeline as part of the 60th celebrations. Both our team and the client saw this as a fantastic opportunity to merge both concepts and create the “ultimate” timeline, showcasing Audio-Technica’s remarkable journey.

interactive timeline

At this point, our creative team took the reins, condensing and adapting the long-form content to suit the interactive timeline format. This timeline would replace the existing “Our Story” page on the Audio-Technica website. While it was crucial to present the brand’s complete narrative, the initial document was lengthy and required trimming to ensure it worked effectively in this new format.


streamlined storytelling

Summarising and selecting the most important aspects from Audio-Technica’s extensive history to create a concise interactive timeline.

user-story balance

Achieving a harmonious blend between user-friendly navigation and effectively conveying the brand’s captivating narrative within the interactive timeline.

collaborative execution

Coordinating and ensuring effective communication throughout the design and implementation process with the Audio-Technica team to bring the interactive timeline to life seamlessly.


our approach.

Given Audio-Technica’s exciting and extensive seven-decade history, we wanted the timeline to honour each decade and emphasise their collective impact on the brand’s growth and success. To achieve this, we designed a sticky decade navigation feature within the page. This enabled users to quickly jump from one decade to another, facilitating exploration of the brand’s entire history without the need for endless scrolling. The decade navigation feature also gave the timeline page a distinctive identity, offering a unique and interactive experience separate from the main e-commerce site. Subtle animations of the copy and images, along with a monochrome colour palette, were incorporated to evoke a sense of nostalgia.

Our approach involved utilising Adobe XD for seamless and collaborative page design. By sharing prototypes with the client, we could demonstrate how the page would function and where elements would link to. This collaborative process allowed the client to experience the page firsthand and provide precise feedback. Once the design received approval, we handed it over to the Audio-Technica team for implementation, and we are incredibly proud of the final outcome.

more like this.