The Human-Centered Approach Behind Media Matters for America

SUMMARY

In 2005, I joined forces with Khoi Vinh to rearchitect and design Media Matters for America (MMfA), a progressive watchdog platform combatting conservative media bias. Through strategic workshops with research fellows, we modeled user archetypes and devised context scenarios, fueling a design strategy to empower people in their use of media while making content findable in a rapidly expanding online marketplace of ideas.

My emphasis on structured tagging and Khoi’s interface design infused into each page content discoverability. The effort earned industry recognition, and fortified MMfA’s role as a trusted misinformation watchdog while forging pivotal media alliances.

KEY LEARNINGS

User archetypes drive usefulness - Identifying and modeling design personas through collaborative workshops allowed us to frame nuanced user needs. While we didn’t have the budget to speak to actual users, this approach ensured our design decisions were aligned with internal knowledge of their diverse audience.

Context scenarios meet expectations - Crafting context scenarios for each persona bridged the gap between unspoken expectations and how the interface might support human needs. By envisioning the future on paper, we aligned the team on the platform's potential impact, and prioritized specific scenarios for implementation.

Structured tagging increases content discoverability - Adding structured tagging to all published content significantly improved content discoverability, supporting the needs of citizen media. This early adoption of tags enhanced user engagement by making content more organized and accessible while reflecting the changing expectations of netizens.

Collaborative design process - The collaboration between information architecture, interaction design, and interface design, represented by Khoi’s UI grids and visual aesthetic, contributed to a more sophisticated interface for MMfA. The simultaneous delivery of low-fidelity sketches and interface patterns rounded out a cohesive design strategy, creating an interaction model focused on findability and readability.

Design strategy impacts more than the UI - Our approach not only improved MMfA's content discoverability but also strengthened its role as a trusted misinformation watchdog. The results were evident in evolving media relationships with major networks like CNN and MSNBC, showcasing the impact of effective design to forge alliances and establishing credibility within the media landscape.

BACKGROUND

While founding dotmatrix studios in NC, I had feelers out for new client work when an opportunity to collaborate with Khoi Vihn, then Founder / Principal at Behavior Design, manifested. Within a few weeks we had begun our engagement with Media Matters for America (MMfA)

MMfA had launched within the past few years, but the platform couldn’t take advantage of the increased traffic demands due to the explosion of political blogs. This is how MMfA described themselves:

Media Matters for America is a Web-based, not-for-profit, 501(c)(3) progressive research and information center dedicated to comprehensively monitoring, analyzing, and correcting conservative misinformation in the U.S. media.

The team we worked with was led by a handful of mid-30’s senior research fellows in charge of producing long-format content on the site. Our specific engagement was centered around establishing an extensible UI that could handle the projected scale of their operation, firming up design language and patterns, and re-architecting the site to make specific content more useful, findable, and visible.

Identifying Opportunities

MMfA’s available analytics didn’t provide much insight into the ‘why’ of their user’s engagement. They had solid assumptions around general use, but I was interested in the nuance of how MMfA could support a deeper thread of needs across their community of users. In lieu of a research budget for a mixed-method study, I decided to run a workshop with their staff of research fellows, political consultants, and subject matter experts to brainstorm the ecosystem—what archetypes are in play and how might we best serve them?

Armed with sticky pads and markers, I set up shop in their war room in downtown Washington, DC and started at the beginning:

• What do we know about the people who come to the site today?

• What areas do they visit often? Do we know what they do there?

• How might we better serve their particular needs?

• Who might not be aware of MMFA that should be?

• Is there a chance to develop programs or community around misinformation?

• If we had a magic wand, how would you want MMfA to exist in this ecosystem?

We were able to start the conversation with a solid understanding of their primary users, political bloggers, and as we documented various goals and behaviors we extrapolated to explore analogous users with more nuanced needs.

By the end of the workshop, our original ‘share and embed content’ user led us to enough variations in patterns for us to model three primary and one secondary design personas.

• Jackson Martin represented the scores of political bloggers that were on the rise at the time. This was pre-social media, but the scenario was similar — make content findable, digestible, and easily shareable.

• Jonathan Kenney represented the journalists that the team knew were engaging for research purposes. We recognized an opportunity to design a program that we believed could push topic-specific research content into a journalist’s dashboard to improve research capabilities.

• Efrat Zori represented the mass of anti-war activists at the time who didn’t appreciate being lied to. We believed MMfA could become a destination community for discussion threads and engagement with media activism tips.

• Dharia Hsin represented a congressional staffer who deals with the media, puts out fires, and introduces ideas to her congressperson. We believed that staffers could be part of an outreach campaign by MMfA in sharing misinformation content with their bosses.

In our review with leadership, I was questioned how I knew that these were the full set of market needs. The language of hypotheses wasn’t second nature to me in 2005, but my answer was in the same ballpark: It was an educated guess. We didn’t know anything with certainty, but we believed in the cumulative knowledge of the room and this human-centered framing would help the team make more precise decisions moving forward when users engaged with the new platform.

NARRATIVE DESIGN TO THE INTERFACE

Once we were aligned on our set of user archetypes, I began writing context scenarios for each, positioning their individual needs and the potential of the MMfA platform.

Context scenarios allowed me to map out a interactions that supported goals without any platform constraints, align with the team on value to the MMfA mission, and prioritize certain scenarios while backlogging the rest for MMfA to use moving forward.

I walked our clients through each scenario, participated in discussions around impact and feasibility, and made changes where necessary. Once we were aligned on how we could support these specific archetypes, I documented key paths that would serve as requirements for soon to be designed interfaces—everything from content widgets to search result hero campaigns to page templates.

Simultaneously, I delivered low-fidelity template sketches with modular areas representing features, content blocks, and visual hierarchy, each with assigned thumbnails of appropriate personas to communicate how we had taken the strategic results from the workshops and the resulting design personas & context scenarios, and integrated our thinking into UX of the interfaces.

The previous version of MMfA didn’t leverage the use of tags as an organizational and discovery device. We made it a priority that all content published—research, video, articles, etc.—leveraged a structured approach to tagging, which improved user discovery and helped the team align with citizen media launch spots during the tag frenzy of Web2.0.

As my sketches gained fidelity with module placement, widget behavior, and a metadata scheme, Khoi, who had become internet famous for his UI grids and minimal visual aesthetic, worked with the MMfA team to establish interface patterns and a more sophisticated palette.

Results

Our strategy and execution improved MMfA’s efforts to build relationships, positioning the non-profit as the go-to destination for bloggers, journalists, and politicians searching for right-wing misinformation. Tentative media relationships with CNN and MSNBC evolved into to repeat opportunities for MMfA research fellows to provide context to their framing on multiple broadcast shows

By the time Facebook launched the following year, people interested in sharing misinformation clips were searching MMfA for the latest examples and sharing videos at a high clip, making MMfA the go-to destination for such content.