Case Study: On-Hold Marketing Website Redesign

Client Background

About the client

For almost 40 years, On-Hold Marketing has been providing telephone on-hold messaging services to companies throughout North America. Along with full interactive menu systems, On-Hold creates a pleasing experience for telephone callers. If you’ve ever been put on hold, chances are you’ve heard one of their custom messages.

A Canadian company, in business since 1987
Supplier of interactive voice menus for phone systems
Provides on-hold messages for customers with music and custom announcements
A customer base of nearly 10,000 all throughout North America

Visit Website

Where We Started

The challenge

Leaf Design was involved with the previous version of the On-Hold Marketing website. Created almost 5 years prior, the design was in need of a refresh. More importantly, most current day “best practices” had not been incorporated into the aging website, and therefore it was not being used to its full potential.

A dated design with many visual inconsistencies throughout the content
Unfocused and lengthy content preventing high user engagement
A lack of calls to action on key product pages
Technical issues with the audio samples media player
Limited attention to detail on the experience for mobile visitors
An inflexible content management system limiting creativity when creating new pages

How We Collaborated

Design process

This project started off with a very deep dive into the company’s analytics data. We wanted to fully understand what areas of the site were performing well, and which had room for improvement.

While traditional analytics data is helpful, it only paints a picture of the “average” of your users. To provide additional insight, we captured real-time screen recordings of actual users, allowing us to watch how the website was being used. It helped us answer questions such as:

How far were users scrolling down a page?
Were visitors trying to click on non-existent links, hoping to discover more content?
Were visitors going in circles searching for the information they required?
How long did it take users to complete call to action forms?
Were users having trouble playing the audio file samples?

Armed with the detailed data, we started working on a more streamlined page architecture. Utilizing the client’s existing brand guidelines, we begin on the creation a modern page design that provides excellent contrast, allowing us to highlight the key service offerings that On-Hold Marketing sells.

In part due to the extensive planning and research, the design process resulted in very few revisions.

1. Design brief

Although already familiar with this client’s preferences, we developed a design brief document that outlined our approach to this project.

2. Wireframe

Key elements of the page were arranged into a simple wireframe. Prior to a full mockup, this allowed us to rapidly make adjustments to the layout.

3. Initial concept

The Home page quickly shows an example recording to visitors, and highlights the benefits of on-hold message. An overview of their process highlights how simple the process is.

4. Final concept

Minor, but effective tweaks were made to the banner and “How It Works” panels. The idea for including current clients was dropped.

The Results

Our solution

A flexible content management system

One of the requirements of this project was to put more power into the hands of the client when it came time for adding and updating content on the website.

Rather than forcing rigid templates on the client, we developed a flexible content management system that lets the client create pages with a wide variety of content elements. Website authors are able to select from a variety of content “panels” including:

Single and multi-column text panels
Half text / half image panel
Client testimonial panel
Expandable FAQ sections
and much more …

After filling in a handful of fields, everything is automatically formatted to match the original design. This ensures that all pages look cohesive. The drag and drop interface we provided allows for easier edits as well.

An improved audio player

With their entire business related to audio, it was imperative that users be easily able to sample the different voice and music options that the company offers. A custom interface to play sample MP3 audio files was created.

Organized by type and genre, the front-end interface uses AJAX to quickly load the various music and voice samples. The audio player loads files almost instantaneously and works on just about every mobile and desktop device with a speaker. A fixed position audio player bar highlights the currently playing track, along with scrubbing and volume controls.