Custom News to Over 47 Outlets

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.

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.

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.

‍

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.