B2B Web Optimization: 140% surge in mobile transactions through responsive design effort

SUMMARY: In the spirit of the Web Optimization Summit 2014 kickoff, today's B2B case study from the article archives features David Ciccarelli, CEO and Founder, Voices.com, one of the agenda's e-commerce speakers.

We've heard Ciccarelli's story before, as it was in a B2B Marketing Newsletter in February. So before we all meet in New York, we wanted to get the scoop on what Voices.com has been up to in optimization since we last chatted, and as it turned out, the answer is quite a bit. Read the update unveiling how, after first going mobile, Voices.com is now going global.

by Allison Banko, Reporter

Check out "UPDATE: Mobile, then global" at the end of the article to see the most recent developments of Voices.com's optimization efforts. The original version of this case study was published in the B2B Marketing Newsletter on February 19, 2014.

CHALLENGE

"In a world … "

This short string of words is one of the most familiar phrases to shake the speakers of movie theaters. It sticks in our minds not because of a recognizable face or a scene, but a sound — a voice.

There's a whole industry devoted to finding the perfect pitch for any given job, and Voices.com is part of that process. The company serves as an online marketplace that connects businesses to professional voice talent.

"The clients are anyone from a Fortune 500 company that is working on an e-learning project, corporate training videos and so forth, right through to the small businesses looking to have somebody record for their phone system — and everything in between," explained David Ciccarelli, CEO, Voices.com.

The site sports bounds of sound, featuring more than 100,000 profiles of voice actors and actresses from around the world. Established in 2004, Voices.com had already existed a few years before the first iPhone hit stands. When Apple unrolled its smartphone, Voices.com adapted to mobile by creating a brochure-style website that directed visitors to click on a designated link to view the full website.

According to Ciccarelli, this simplistic style worked fine for a few years, but when the team began to notice a spike in mobile traffic, it was time to pay attention to the user experience away from the desktop.

In a one-year period, the company witnessed its mobile traffic grow from 5% to 20%. On top of that, the team noticed more than 80% of its mobile site visitors opting to view the full site.

"Obviously the mobile-reduced version was pretty lacking, which is why people just wanted to skip past it and get to the full experience," he said.

The increase in mobile traffic paired with the substantial number of visitors who desired to view the full site over the current mobile version served as Voices.com's spark for change.

"Those are the two data points that really drove us, realizing the challenge for us: We didn't have a mobile-optimized experience for the browser," Ciccarelli explained.

CAMPAIGN

Whether it was on the confines of a smartphone, the freedom of a desktop or the touchscreen of a tablet, Voices.com wanted to offer its consumers a consistent user experience no matter the medium.

To achieve this, Voices.com implemented responsive Web design. This technology allows content to adapt to the dimensions of various browsers to provide both an optimized and customized viewing experience.

Step #1. Build app and consolidate website sections

Voices.com wet its whistle by building a Web application for smartphones and tablets. The team began this process by creating a "mind map."

Ciccarelli described this process as a "brainstorm of all the pages or screens necessary to create a complete application."

When determining which pages were essential for the app, the team realized that many of Voices.com’s existing pages were redundant and could be consolidated or eliminated altogether.

For example, the site had separate areas for "payment history," "transaction history" and "billing history," yet they were all one in the same.

"We were going, 'Oh my goodness. No wonder. We're making it more difficult than necessary for customers,'" Ciccarelli explained. "We literally had three different words and three different sections to describe and present this same set of data."

To determine which pages to scrap and which to keep, the team asked themselves if the section or site feature was necessary to complete the main tasks of:

Auditioning

Searching for talent

Hiring talent

If it wasn't, it was removed.

"You're kind of pruning the hedge so that you can have it nice and flush," Ciccarelli said. "We focused on those critical few features, and then pretty much eliminated everything else."

In the process of creating the app, the team even went as far as saying if the feature wasn't needed on the mobile device, then it probably wasn't needed period — not even on the full desktop version of Voices.com.

Because the overriding goal of the optimization effort was to create a consistent user experience across all devices, starting with the smallest one allowed the team to determine which features were most critical.

"We started from that limited, constrained view and then built our way up," Ciccarelli said.

Step #2. Utilize the app's "mind map" for creation of the mobile browsers' responsive design version

With the apps for smartphones and tablets complete, the team was able to use the "mind map" they used for the apps in creating the mobile standalone version of the site.

Basically, Ciccarelli explained, the "mind map" was reused and repurposed for the creation of a mobile site done in HTML5.

Show and hide

Though Voices.com's mission was to achieve consistency across varying platforms, the team wanted to ensure its visitors were getting the most out of the site on each screen, as well.

So while unnecessary items were eliminated, there were still items deemed valuable that perhaps didn't visually fit across all screen sizes. For example, a desktop can support six or seven columns, but a smartphone can only support two or three. Instead of cutting out columns from all versions just because they couldn't fit on mobile, the team exercised what Ciccarelli pinned as "show and hide."

This entailed examining the intentions of visitors specific to a device.

The team asked themselves, "What is the stuff users need in order to advance to the next stage?" Voices.com ultimately opted to ensure the sections on each device were consistent. However, they exercised that "show and hide" practice on items such as images, which take longer to download on a mobile device than they do on a desktop.

For instance, a portion of the voice talent profile has an area that details what equipment the talent has in his or her home studio. This area is accompanied by icons signifying items like computers, software and microphones. But the team realized the icons weren't necessary on mobile though they look charming on a desktop.

The same was decided on large screenshots of particular pages on the Voices.com site that detail how the site works. These are included on the tablet and desktop versions of the site, but if a user is visiting from a mobile phone, the team assumed it was likely they already know how the website works.

"We were just trying to make [the site] pretty lightweight in terms of not downloading these various high definition images for the desktop," Ciccarelli explained.

Step #3. Redesign foundational elements of the website

After rolling out the responsive design, the Voices.com team realized they needed to convey consistent branding from a visual standpoint. This involved redesigning the following foundational elements of the website:

Header

Body content

Footer

The header was redesigned to serve as a platform for one-touch access to the menu. The menu icon was put at the top left-hand corner of the page and provides access to a sidebar menu when touched. Recognizing visitors come to Voices.com searching for specific professional voice-over talent, the team also added a search icon to this area.

The middle section of the site was allotted for the site's body content, which ranges from landing pages and lists to tables and profiles. During initial mock-ups, this area was left blank to allow the team to focus on the navigational experience of the website.

When it came to the footer, Voices.com executed some major cleaning. The previous footer had multiple columns of links, which really bulked up the bottom portion of the site. Looking at refining the footer to make it more mobile-friendly made the team realize this area needed to be whittled down.

"Trying to make that [footer] happen on mobile was a little bit ludicrous," Ciccarelli said. "No one needs to look at 40 links in a footer way at the bottom. We really just need the 'terms of service' and 'privacy.'"

The new footer was shaved down to include less than five links in addition to icons for Voices.com's social networks.

Step #4. Perform internal and external testing

Before launching, Voices.com conducted testing both internally and externally to gauge how the site worked across a variety of devices and browsers.

"It's one thing to say, 'Oh, it works great on a mobile device,'" Ciccarelli said. "Well, yeah, but using which browser? Or, 'Oh, it looks wonderful on a desktop.' Yeah, but does all this neat HTML5 still work on an old Windows XP with Internet Explorer 6 or 7?"

He explained that the team had a "giant matrix" of everything they wanted to test. This varied from functionalities to various elements of the user experience.

"That's more of the touchy feely stuff," Ciccarelli said. "How does the person feel about their experience versus does it just work?"

For example, was relevant data located at the top of the screen on a smartphone so the user wouldn't have to scroll down to see it?

After testing, Voices.com made those necessary tweaks based on related feedback.

"When we had the green light across all that, then we felt a lot more confident to go live," Ciccarelli explained.

Step #5. Educate and launch

Though Voices.com underwent a massive responsive Web design, the underlying service of the site didn't change.

It was the same feature set complimented by a cleaner interface and optimized user experience. But, because the look of the site did change, the team wanted to ensure its consumers understood what was different.

To tackle this, Voices.com did some pre-launch marketing. The team filmed a webinar that was posted to YouTube and had user guides drafted as well.

"We did a lot of the prep that ensured it was going to be a successful launch," Ciccarelli said. "In fact, everybody in the company would agree that it was the most successful product launch that we've ever done."

RESULTS

Voices.com's reimagined website courtesy of a responsive Web design effort resulted in:

46% increase in mobile visits

16% increase in average duration of visits

140% increase in transactions

180% increase in revenue

65% increase in e-commerce conversion rate

The team met the goal of giving their customers a consistent journey regardless of their desired device whether it was a smartphone, tablet or desktop.

"I do think it's one of those things that’s often underestimated in terms of what can happen with mobile in terms of having that optimized experience," Ciccarelli said.

He attributes much of Voices.com's success in this effort to the company’s mobile-first approach. The team began the project by designing to the constraints of a smartphone and because of those limitations, the features deemed most vital to the user experience were given precedence throughout the entire process.

"At this stage, it's imperative that all organizations regardless of size can deliver that consistent brand experience by having a mobile-optimized look, feel and functionality," Ciccarelli explained. "[This way] they can both attract and engage new prospects as well as their existing customers that are revisiting their site. You want to give them further reason to refer you and engage with you again."

UPDATE: Mobile, then global

Though Voices.com was now optimized for mobile, the team soon recognized it wasn't optimized for global use. The site features more than 100,000 voice actors who stem from all over the world speaking more than 100 different languages. In fact, 17% of the job postings on Voices.com are in languages other than English. Yet, the Voices.com site was presented through an English platform.

So if there was a Spanish-speaking client looking to hire a Spanish-speaking voice talent on Voices.com, they encountered friction on the site due to the fact it wasn't presented in Spanish.

Ciccarelli explained that in order for Voices.com to grow and expand geographically and attract more of those non-English-speaking jobs, the site needed to present the content in the corresponding languages, correctly translated. This meant more than just adjusting the text or copy on the Voices.com pages; it required tailoring key sections such as the featured talent seen on the homepage to a new market.

"You don't want to be writing things through Google translate and just putting it live on the Web," he said. "I think you want to have some protocol as to making sure the content that is published is appropriate and speaks to the professionalism of your organization."

Ciccarelli added that the team felt the mobile optimization effort was a precursor to moving into some of the other geographical markets where visitors may be accessing the Internet through mobile devices. Now that the Voices.com site was optimized for mobile, it was time to take it to the next step.

After looking at data showing that 30% of the U.S. speaks Spanish, Voices.com opted to launch a Latin American (Spanish) version of Voices.com using a multilingual CMS as its first step at a global optimization effort. On this version, the "Featured Voice Talent" on the homepage includes demos of Spanish speakers and search is optimized around Spanish-speaking profiles.

"When you search for a talent by a particular keyword — someone that sounds funny or sarcastic — then we're actually going to only be searching the Spanish-speaking talent," Ciccarelli explained.

Moving forward, Ciccarelli said optimizing for a French site would be a "natural next step." He explained that while it's the actual website of Voices.com being optimized, the multilingual effort spans beyond that.

"The strategy is more than just a content play, it's actually a full-out business strategy of expanding geographically," Ciccarelli said.

Ideally, if Voices.com finds there is enough of a market for a certain region, the company would also work to find in-house resources such as customer service and support staff that can successfully interact with customers in those various global markets, Ciccarelli said.

"I think we can move more in that direction to create a really crafted, unique experience to that locale."

Ciccarelli will be presenting "Mobile Optimization: How a B2B e-commerce company used responsive design to increase revenue by 180%" at Web Optimization Summit 2014, held May 21-23, at The TimesCenter in New York City.