Home

Custom News to Over 47 Outlets

Provided 47 news outlets a custom drag and drop Drupal theme.

Visit Site     DownloaD
Homepage design of Voice of America
Client
Voice of America
Agency
Mobomo
Category
User Experience
UI & Product Design
Design Services
Web Design
User Research
User/Usability Testing
Wireframes
Year Completed
2019

The Objective

In 2018, Voice Of America was wanting to migrate their CMS to Drupal and needed a new customizable theme for their 50 news properties. Mobomo took on the task to not only create the theme, but to migrate, and set up a system that manages all their properties. My role was the lead UI/UX designer for the project. Working with content editors across all languages in creating a customizable drag and drop layout builder. Focusing on creating a flexible design that was able to adapt to cultural nuances between the languages. 

I also created a customized Drupal theme that helps improve the usability and need for the 1,000+ content editors around the globe. 

  • Complete a UI audit of their current site documenting every template, element, and style currently being used.
  • Shadowed and interviewed Users content editors across multiple languages to better understand their process and how they used their current system.  
  • Wireframed concepts that provided content editors regions to drag and drop widgets to allow them to customize each section or site to their own taste.
  • Create interactive prototypes using Webflow to providing better insight into how the site will work and look on all devices.
  • Created a Style Guide / Component Library of all the UI elements, components, and widgets that make up the site.
  • User Tested the designs with global audiences using Try My UI. Running two series of usability testing each mobile and desktop designs with 10 users each.
  • Designed a Custom Drupal Theme showcasing the drag and drop capabilities and workflow.

Project Highlights

Early Concepts

After completing a UI audit of VOA existing site, I started to loosely sketch out potential templates and structure we needed to build for the new theme.

Photo of paper sketches tapped up on a wall


Designs

Our design theme can be broken into 15 unique templates. Some of the templates have designated areas where content editors can drag and drop widgets that allows them to customize each section. After we finalize the overall ascetics as a team, I moved the our wireframes into Webflow. This allow me to create an prototype that was interactive and responsive.

Screenshots of some the templates designed out for the site.

‍

Style Guide & Component Library

With every project, we create a master style guide and component library that make up the following designs. Using Webflow, I build out pseudo-living style guide that made up all the designs. This is used a reference guide for our developers see how the designs render and interact in the browser. The following image is made up a series of screenshots of only the style guide.

Image of the style guide used on the site.

About 

Voice of America

Voice of America is a U.S. multimedia agency which serves as the United States government institution for non-military, external broadcasting. It is the largest U.S. international broadcaster. VOA produces digital, TV, and radio content in 47 languages which it distributes to affiliate stations around the globe.

Explore These Projects 
No items found.