MasterCard
Data visualization/ Interactive page design
Overview
The Washington Post's WP BrandStudio & Mastercard partnered in 2019 to produce a series of content exploring how technology can help communities achieve inclusivity and sustainability in the digital age. The three-part multimedia program includes original reporting, documentary-style video, and interactive data visualizations.
KPI/Objective
Creating an interactive, nonlinear data-visualization piece explains everything readers need to know about the American workforce is for 20 cities, an innovative tool for Metropolitan area leaders, mayors, and policymakers to better understand their city in order to have better decision making.
Campaign objectives: To amplify Mastercard’s Center for Inclusive Growth’s efforts to help metropolitan area policymakers across the United States achieve inclusivity and sustainability through data and to introduce CFIG as a relatable partner to achieve these goals.
ProgramKPIs: Engagement and lead generation
Content KPIs: Engagement
Audience:•Metropolitan area leaders, mayors, policymakers, local and regional decision-makers
Role
Interactive Designer, Design strategy, art direction
Design
A Roadmap for Growing Good Jobs, intends to show that tailored data can help cities drive dynamic growth that also creates opportunities for the local workforce. This tool is meant to help policymakers map their opportunities and prioritize them based on their unique strengths. Regional leaders may pursue different goals, three of which the visualization may inform: to diversify their economy, foster job quality, or pursue job growth.
Through the design process, visually I decided to use an illustrated approach to make the data visualization with a more personal touch at the same time. I added an avatar function for the page because through user testing, I realized our users love to have annotation side notes for complicated execution, while not intervening in the smoothness of their experience
Research
- CLEAN UP THE DATA
I teamed up with an outside data visualization expert and our editor cleaned up the data and have a better understanding 2 main indicators in the data.
Economic Complexity Index (ECI): is a metric that describes cities and their implicit capabilities by the complexity of the industries it hosts.
Strategic Index (SI): It is a measure of a city’s overall potential to grow by developing new industries
- SKETCH
After we cleaned up the data, I collaborating with the vendor, created the sketches and wireframe, showing the best way to represent each key indicator data points.
Economic Complexity Index represented by color shade. The darker the color more complex industries they have
The Strategic Index will be represented as particles surround the city. the higher the value the more, the closer the particles to the bubble
Median hourly wage is represented by size of the bubbles. The bigger bubble the higher the wage
Pivot
After the first round of feedback, we realize what clients really need is an interactive tool that could actually show the insight they have for the research, instead of conceptual data visualization, They want the experience actually showing the insights, instead of readers conclude the insights themselves, because it may stop people further explore the experience.
- COMPETITOR RESEARCH
The economist + Siemens: Reimagine the Game
Pro:
Looks futuristic and peak interest right away
Visually really appealing
Well structured layered information
Con:
Not showing the meaning behind the data
User can’t utilize the data as a tool
A lot of efforts need to be put in to understand the UI due to lack of the instruction language,
Google: your plan your planet
Pro:
Looks clean and fun
Visually really attractive
Seems a fun way to learn the information
Con:
UX is very confusing, with too many interaction choices, and is unclear how to navigate especially in mobile view
There was no indication how many activities there were.
Not very informative, with all the efforts
Sitemap
To simplify the information, I teamed up with our content editor and cleaned and re-organized the raw data from 25 cities. We also layered all the information into the hierarchy, so that we could highlighting the information, which tells the client’s story. This process allowed us to build a design piece easier for users to interact with and could use as a long-term research tool.
- DESKTOP
- MOBILE
