In 2005 I collaborated with Khoi Vihn (a founding partner and Design Principal at Behavior Design) as a contract information architect to redesign the Media Matters for America website.

The organization had launched only a year prior in 2004, but with the explosion of political blogs beginning to make a dent in online conversations (pre-social media), their platform couldn’t handle or take advantage of the overflow of new traffic. If you’re not familiar with the media tracking platform, here’s how they describe 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 senior research fellows who were mostly in charge of the position pieces on the site. While the incoming goal of the engagement was centered primarily around re-architecting the site to make specific content more findable and visible to users, the team knew that they were posting blindly to the web with only the hope of satisfying audience needs.

Who Actually Needs Monitored Media

In leu of a large research budget, we decided the next best thing was to run a session with our staff of in-house political consultants and subject matter experts. Armed with sticky pads and markers, we set up shop in their war room in downtown Washington, DC and started in at the beginning:

• What do we know about the people who come to the site today?
• What do they visit often? What do they do there?
• As bloggers, how can we better serve their needs?
• Who isn’t currently aware of MMFA that should be aware?
• Is there a chance to develop programs or community around misinformation?
• etc.

When designing an information heavy, public website—as opposed to a task-oriented, internal application—it can be a slippery task to craft design personas that will present even pseudo-exacting context scenarios.

In this case, we were able to start the conversation with a solid understanding of a user base that had particular needs (political bloggers), and then extrapolate outwards to see if similar users might exist with even more discrete goals. Our generic “embed and share” user began to show enough tendencies for us to divide the profile into three primary design personas:

• Jonathan Kenney represented the archetype of a journalist that MMFA knew was using the site for research purposes. Upon fleshing out his experiential and career goals, we recognized the opportunity to design a program that fed content into his topic-specific research needs
• Jackson Martin represented the scores of political bloggers that were on the rise at the time. This was pre-social media, but the scenarios were similar: Make content findable, digestible and shareable.
• Efrat Zori represented the mass of anti-war and left leaning activists who simply didn’t appreciate being lied to. MMFA can become a community for her to spend time both commenting and sharing media tips.

Somewhat outside our purview, and deeper into the objectives of MMFA itself, lay a fourth potential persona. Dharia Hsin represented a political staffer who was dealing with the media, putting out fires and suggesting policy strategy to her congressman. We believed that she might also be pegged strategically by MMFA as a conduit to share misinformation research and video with her boss to assist movement on the hill.

Moving From Strategy To The Interface

Once we had our personas in play, we crafted a number of scenarios that positioned our users within their daily context and imagined, in the most optimal manner, how they might interact with MMFA. This narrative exercise allowed us to design solutions without the constraints of the interface. We then walked the client through each scenario, and made changes where necessary. Once we were in agreement on the strategic approach concerning user needs, I began to document lower-level scenarios—following key paths throughout this yet-to-be-sketched interface.

The key paths began to resemble functional requirements, but not as an out-of-context collection of direction; rather, much more of an an organic semblance of explicit interface needs steeped in user goals—from particular widgets to search results hero campaigns to column requirements. We used this process to iterate internally and then with the client, eventually leading to design sketches… but with a twist.

As I began low-fidelity template sketches that were heavily laden with modular features, I visually assigned our personas to each content area. From the home page to content pages to search results, it helped to communicate the bridge between the strategy work and the interface to the team.

Form there, as my sketches gained in fidelity and Khoi, probably the most renowned grid designer on the web, worked with the team to establish interface details and a more sophisticated palette, I iterated module placement, widget behavior and a metadata scheme.

Previously, MMFA wasn’t tapping into tagging as an approach to make their content more available, either internally or externally. We made it a priority that all content published—research, video, article, etc.—would have an explicit approach to tagging, which helped the team align more closely with the citizen media launch spots (think: Technorati) of the time.

In the end, the MMFA team loved the work. Our strategy improved their community building efforts and laid the groundwork for MMFA to become the go to place for both bloggers and journalists looking for misinformation in the media.

Ten years after launch, not only can you experience the vast majority of the architectural foundation we put in play, but the domain has skyrocketed in popularity. The advent of social media most definitely fueled such an explosion, but our thinking at the time didn’t limit the domain when a new vehicle for discovery appeared on the horizon.

There aren’t many examples of domain designs that have stood the test of time for more than a decade. That’s very gratifying.