VOA Pronunciation Guide, Reimagined for 2013

VOA Pronunciation Guide-1

Innovation is not only exploring the future, it is also rethinking the present with new tools.  ODDI’s redesign and retooling of VOA’s Pronunciation Guide (originally developed circa 2000) relaunched in April.  The project team’s code name for the guide, “Juicy App,” refers to the fact that, just like a juicy red apple, the pronunciation guide was ripe and ready for the next step in its digital career.

VOA’s Pronunciation Guide was the first of its kind on the Internet.  The database has nearly 7,000 entries, most of which have an attached audio clip. Along with showing the pronunciation of the word in text format, the audio clip allows you to hear what the name should sound like. VOA Special English broadcaster Jim Tedder says that using the correct pronunciation of a name shows that the speaker cares about his listener.  It also builds credibility, which is very important for a news organization

The primary aim of the redesign is to make the pronunciation guide more friendly and universal by making the design responsive; so that a single design is accessible via phone, tablet, or desktop. A secondary goal is to update the back end of the site: Ajax is now used to streamline code, Twitter Bootstrap now provides a new framework, the site has moved to a cloud based host and Google Analytics code has been added.


Twitter Bootstrap jumpstarts development.

Twitter Bootstrap is an easy way to get a responsive website up, running fast, and saleable to any device. Like other tools, it does end up making many of the sites built with it look similar. But, it is easy to customize with CSS, logos and images to add branding and uniqueness.

Bootstrap is simply an HTML, CSS and JavaScript framework. It uses 140 icons in dark grey and white from Glyphicons, has built-in buttons (with pre-defined colors and sizes) and a vast selection of reusable components, like dropdown menus, pagination, tabbed navbars, progress bars and default thumbnail sizes. The components are easy to implement without thorough knowledge of JavaScript, but you do need to be comfortable with HTML and CSS semantics.

To build the VOA Pronunciation Guide, we started with the Basic Marketing Site template and designed our site with that structure in mind—adding color, logos and functionality where needed. The template is simply HTML with CSS—nothing fancy. We added a custom CSS file on top of Bootstrap’s starter CSS to add our custom styles. Using Bootstrap’s built-in components and JavaScript (including the breadcrumbs, search, modals, tabs, buttons and dropdowns) helped the project move quickly.

pronunce-before-afterBefore (image behind) and After (images in front) re-development.


Migration from local server to the cloud.

The VOA Pronunciation Guide was originally served from a locally managed web server connecting to a locally managed database.  In order to take advantage of flexibility, maintenance, and cost savings, the new application is served utilizing Amazon cloud services.  The files were moved to an Amazon EC2 instance connecting to an Amazon RDS instance for database services.  Amazon Simple Email Services are also used for management and notification purposes.  The application code was completely re-architected and rewritten to migrate from a closed proprietary language to a standard, and more open, LAMP stack (Linux, Apache, MySQL, PHP).  Twitter Bootstrap stepped in again to help with new functionality such as paged data navigation and type-ahead search results.  Audio playback was implemented using the open source jPlayer plugin.  This allows the VOA Pronunciation Guide to play back audio files seamlessly across devices and platforms.


A product of agile development.

The new guide is a product of the ODDI new agile project framework.  These feature a team-based collaborative approach to setting goals, daily scrum meetings and constant collaboration in person or online using new project management tools.


To explore the VOA Pronunciation Guide further, visit http://names.voa.gov/.


- – - – -

Questions? Comments? Post in the comments section below or tweet us @BBGinnovate.

- – - – -

Thank you to April Deibert and Lynne Venart for their contributions to this post.

(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)

The following two tabs change content below.
Steve Fuchs

Steve Fuchs

Steve Fuchs is the Manager of Design for the Office of Digital & Design Innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *