Voice of America (VOA) is in the process of working with web design team Theo & Sebastian to re-design the desktop, tablet, and mobile user experience in coordination with the Pangea CMS. The team is attempting to look two years into the future to see what will best suit VOA audience needs.
The goal is to achieve a responsive design (which changes the design depending on device) and then later move it towards an adaptive design. (This means that the server side technology changes content depending on device.) The prime benefit for BBG is to have one design work on all platforms; this saves on design and development time and should make upkeep easier. It also allows one content management system to run all devices, so users won’t need a special mobile content management system.
With the guidance of VOA’s Internet Managing Editors, there are two types of experimental directions that are under evaluation. The design directions are “Panorama” and “Modular”. Theo & Sebastian will then come up with a third concept, based off of feedback on “Panorama” and “Modular”.
“Tandem display of news stream and a stage for features, articles, and for advanced, intuitive ways of browsing news and revealing social engagement and response.”
- Persistent news stream that scrolls independently from the rest of the page
- Distinct feature panel with leading story and carousels for editorial POV and multimedia
- Newsmap that reveals story
- Indicators of social engagement and popularity across geographies, with popularity gauges
- News sections scroll
- Indicators of social engagement and popularity
- Personal playlist with content saved for reading later
- Article view with links to map, social voice
- Related news based on local, regional and global impact
- For program sites, the left column is a news overview with clear engagement and social media components, while the stage becomes a rich program selector and player
Summary: Dashboard like news, program and media interface that crosses effortlessly into tablet browsing and distills well into mobile device constraints.
“A highly flexible and clear layer structure that adapts easily to the different site tiers in the VOA line-up.”
- Each layer is itself modular and highly adaptable to purpose and content
- Grid maintains clarity of structure
- Highly scanable, easy on a reader’s eyes
- Program pages with inline players, and prominent integration of social media
- Extraordinarily easy to curate and manage for editors and staff
- Indicators of social engagement and popularity
- Notably rich experience even for magazine / tier 4 sites
Summary: Hyper flexible, and CMS-optimized modular page structure, giving editors and staff extraordinary control to effect the best delivery within their respective tiers.
A Brief Summary from VOA Internet Managing Editors:
- Everyone was very enthusiastic about the “Panorama” look and found the large photographs, typography, and big areas of color exciting. However, from an editorial point of view, and with the resources VOA currently has, the “Modular” approach would be a much better match. The “Modular” approach also has the advantage of being much more adaptive/responsive design ready.
- Going forward, if VOA decides to go in the “Modular” direction, Theo and Sebastian will develop this concept into a true responsive design; with a mobile-first focus and a detailed plan for tablet and desktop display as well.
- Theo & Sebastian will also provide a broader pallet of color, text, and finish options within the refined design to allow for more design/branding possibilities.
Other related bits:
- A third round of reactions from VOA Internet Managing Editors is in the works.
- Both “Modular” and “Panorama” have the capability to use the @font-face attribute. @font-face was very successful for VOA Persian Service, so it will look great for Western-language services.
- There will be more HTML5 content produced after the re-design.
Examples of other responsive designs:
- Click here for desktop, tablet, mobile, and widget examples of the re-design.
- The recently launched Middle East Voices uses a Responsive design. It is responsive because it changes the design, but not the content.
- – - – -
(Thank you to Steve Fuchs for his 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.)
Latest posts by April Deibert (see all)
- A Snapshot of Journalism Labs: HuffPost Labs - May 21, 2013
- A Snapshot of Journalism Labs: Northwest University Knight Lab - May 14, 2013
- A Snapshot of Journalism Labs: New York Times Research & Development Lab - May 7, 2013
- Optimizing Thumbnails and Metadata on YouTube: An ‘Easy Button’ Guide For Journalists - May 3, 2013
- Part 2 of 2: International Broadcasting in the Era of Social Media - May 2, 2013