Theo & Sebastian: VOA 2.0 Design

modular-home-example

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.

 

Why:

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.

 

What:

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”.

 

1. PANORAMA

“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.”

panorama-home-example

‘Panorama’ Homepage Example

- 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.

 

2. MODULAR

“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:

 

- – - – -

(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.)

The following two tabs change content below.
April Deibert

April Deibert

April Deibert is the Multimedia Blogger/Producer for the Office of Digital & Design Innovation. Follow her on Twitter: @BBGinnovate and @AprilDeibert.

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *