Overview
For over 30 years, On-Hold Marketing has been providing telephone on-hold messaging services to companies throughout North America.
Visit WebsiteThe
challenge
Leaf Design was involved with the previous version of the On-Hold Marketing website. Created almost 5 years ago, 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.
Some limitations of the original website included:
- A dated design with many visual inconsistencies that had crept into the content throughout the years
- Unfocused and lengthy content that prevented user engagement
- A lack of calls to action on key product pages
- The media player for audio samples was not working well on all browsers
- Limited attention to detail was focused on the mobile visitors experience
- An inflexible content management system that limited creativity when creating new layouts
The
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
solution
More efficient content
A significant change we made to the website was to the amount of content. After scaling down the page architecture, we helped craft pages that provided more succinct information. Content was broken up into more readable “bit size” chunks of information, allowing readers to better scan the pages. Additionally, the core pages better integrated visuals within the design, allowing for more reader engagement.
Previously an afterthought, the resources section of the website was promoted throughout the new design. Directing users to relevant resource articles helps to demonstrate On-Hold Marketing as an industry expert. Embedding calls to action at the end of articles, and offering further content for reading, helps readers learn more about the company’s service offerings.
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.
