Multipliers of Prosperity
Partnering with Wall Street Journal Content Studios, The Charles developed a site and content strategy that would not only transform the MetLife: Multipliers of Prosperity website into an extensive content hub, but also enable the content team to seamlessly update the back-end with little to no prior technical knowledge needed.
- Content Strategy
- Web Design and Development
Rethinking Native Advertising
The Charles's main challenge focused on reimagining how a native ad could match MetLife's brand aesthetic and transform into an extensive article-rich microsite. The Charles also standardized article templates for greater flexibility and consistency and to accommodate their diverse set of article needs.
The Multipliers of Prosperity initiative sought to have a more global reach; as a result, we made the site available in four languages: English, Korean, Japanese and Chinese. The multilingual, fully responsive site facilitated accessibility to a wider audience, consequently extending the impact of the program.
"The Charles designed a fully responsive site for multiple languages, allowing the site to be accessible to a wider audience."
Designing for a Global Audience
It was imperative that the site integrated a feature to support multiple languages. The Charles integrated a dropdown on the articles page, allowing users to filter by region. A language selector was integrated directly into the header so there was a clear focus on the multilingual feature of the site.
The Charles utilized Metlife's blue color palette evoking sentiments of stability and education as the topic of financial empowerment. The Charles then humanized the sites aesthetic using documentary style photography to contrast the Metlife brand colors.
The Charles focused on optimizing video for the site, implementing a full bleed header on the home page, providing a visual narrative upon first landing on the site. Using the video as background texture infused life to the page, and visually reinforced the positive light of the program.
The Charles created a flexible article template ensuring that MetLife could create articles that ranged from long-form text to multi-media articles with videos and images.
The Charles customized a Google map to match the MetLife Brand. Custom map markers were created to provide direct access to articles. This encouraged the users to explore the map, and discover content associated with each location.
To emphasize the impact of statistics, The Charles added animations so that on a user interaction numbers counted up. This animation gives a real time effect to the page, and showcases the progress and impact of the program.
The Charles custom-styled video players on the article page videos to match the minimalism of the site the resulting effect allows for a consistent brand message and brand cohesive. The Charles also integrated a dynamic video panel in the header of the article pages that eliminated a video pop-up. The container dynamically resized to match the dimension of the video for a more fluid, integrated experience. The Charles also integrated autoplay video into the articles, causing the videos to start playing once each one was in the user’s viewport.
A Branded Interactive Map
We further incorporated the Multipliers of Prosperity branding through a custom-designed map that leads the user to stories and articles. The map first appears on the homepage and uses GreenSock to create the panning animation determined by the position of the user's mouse. On the Explore page, where the map is the central focus, we integrated custom pop-ups for more direct access to content through the map.
A Dynamic Content Hub
The Charles built Multipliers of Prosperity on WordPress so that the client could have control of publishing and generating content. To accommodate this, we added a CSS so that styles could be consistently applied to article pages. Using the History API and AJAX to update the URL of the browser, we optimized load time as well as sharing capabilities, so users can always share the unique page they are on. This is particularly relevant when sharing individual articles. The benefit to using the History API is that content can be updated without leaving the page, optimizing the load because the styles are not being reloaded.