As the lead designer on OpenCongress, I collaborated with several other developers to redesign and rebuild OpenCongress from the ground up. Since OpenCongress was inherited by acquisition, it was in dire need of an overhaul in order to bring it closer to Sunlight Foundation’s existing line of tools.

There are a lot of complexities and inconsistencies around how Congress functions and around congressional data. It’s difficult to successfully design for a data-centric product without understanding how all of the moving parts are connected to one another.

A basic question like “How does a bill become law?” turns into “How do you visually represent how a bill becomes law?”, which then forces you to look at all of the potential steps that a bill introduced to Congress could take. It can get complex—many bills never make it past being introduced—if they do, the bill might get amended quite significantly along the way, bounce back and forth between chambers, or have alternate versions of the bill get introduced by the other chamber, etc. How do you simplify all of this into something an average person with little domain knowledge could understand? A lack of basic understanding on our part would result in weak design decisions that would ultimately be a disservice to the end user—not very user-friendly.

Our mission: To breathe new life into the outdated product and create a more useful resource for citizens looking to stay updated with U.S. congressional activity.

Design Research

Crafting a great user experience on OpenCongress was a high priority for our team. We intended the tool to be usable and accessible by the everyday engaged citizen, but to do this successfully, we had to first understand the needs of our users.

To ensure we were serving the needs of our audience, our team carried out several stages of explorative research, including conducting face-to-face user interviews across the country, in Washington DC, Chicago, and San Francisco. Synthesizing and analyzing the stories and insights we collected from the people we interviewed helped us to identify patterns in our users’ mental models. All of this helped to guide our thinking going forward, and enforced our human-centered development process.

From these insights, we derived sets of guiding principles, design principles and personas. We used these to influence our design decisions on OpenCongress, and to help guide new features and user stories.

Much more informally, we also frequently sat with Sunlight’s policy team to ask questions and often had entire explanatory sessions to understand how congressional voting worked, how committees were structured, how issues got assigned to bills, and so on. These were absolutely invaluable and necessary to produce well-thought-out user experience and designs.

Branding

Fresh branding was an essential part of the redesign. I spent upwards of two months redesigning the new OpenCongress logo—revitalizing the logo while at the same time attempting to maintain part of its roots. Sketch after sketch, this went through many iterations of design and feedback until I had defined a direction that fit our considerations, including an emphasis on stronger shapes, cleaner lines and modern typography.

For the logotype, I chose the sans-serif typeface Effra for its clean, modern lines yet humanist touch. It offered a simplicity and minimalism that would not alienate users. The logomark is composed of two main components: A geometric gesture of the U.S. Capitol Building, which elicits a strong cognitive association of federal level government, and an upwards-facing chevron cut from the negative space to evoke a sense of progress and change. A five-point star anchored in the center serves as a throwback to the original OpenCongress logo.

After the overall design direction was defined, the logotype and logomark went through several additional iterations of refinement. The final logo for OpenCongress was carefully crafted out of grids and geometric shapes until the overall composition was visually solid and balanced.

Information Architecture & UX Design

For each major user story we created, I created corresponding wireframes with carefully considered interactions, content hierarchy, and alternate states. I established navigation and other kinds of interfaces through these wireframes: a timeline and card UI for showing data with other related information and calls to action, a sorting and filtering UI for directories of information, and a commenting UI for bills.

Through many iterations of wireframes and prototyping, we learned what features might work—or not. User stories and features evolved as some wireframes proved some ideas to be difficult to implement effectively with the resources at hand. (In one instance, we realized it was not worth pursuing an attempt to overhaul an entire commenting system for facilitating discussion—the types of conversations we wanted to encourage were occurring organically elsewhere on better supported platforms.)

These wireframes defined the architecture of OpenCongress, and informed our visual design and development needs down the line.

Visual Design

As an exploration of visual design direction, I created composites of various elements to explore the overall direction of the redesign before diving headfirst into mockups.

Using element collages allowed me to rapidly explore different types of components before investing resources into mocking up full views around them. I was able to loosely define an early direction on typography, color palettes, generic components like buttons, alerts and tooltips, along with more product-specific components like pieces of a commenting interface and a timeline view.

By building on the visual direction from the element collage and the architecture of the user interface from the wireframes, I was able to quickly develop high fidelity mockups of different views.

Every component in these mockups was designed to scale appropriately across different sized screens to provide the best possible experience for a user, whether they’re accessing OpenCongress on a desktop or a smartphone. To that effect, I designed a small, medium, and large sized version of each view to demonstrate how each component would adapt for the given screen real estate—useful in guiding the front-end development of those components later on.

I followed a clean, minimal aesthetic that would add clarity to the complex layers of data in each view. In one complex component, we needed to show an overview of the House of Representatives with information pertaining to its current status. As a solution, I designed a dashboard-like panel to bring some visual sanity to the sheer amount of data and information that needed to be included in that single component.

Front End Architecture & Pattern Library

As we began to work on building out front-end components, it became clear that we needed to standardize front-end conventions for better collaboration. I advocated for use of BEM naming conventions in our markup and Sass to make components more modular and reusable—this was readily adopted by the team. I also researched and helped to introduce other best practices into our front-end development process.

To help facilitate the use of the new architecture, I developed a styleguide and pattern library to document each component as we built them out. Since the pattern library lived in the same codebase as the application and we referenced the same CSS/SCSS used in the web application, we essentially had a living pattern library—changes made to any component styles were reflected in both pattern library and application. These UI patterns were documented so that going forward, as we built new components or modules, we could reference and build upon existing patterns instead of reinventing the wheel.


This project is no longer in active development. Please read Sunlight Foundation’s post on the consolidation effort of their products and tools. However, I have open sourced the design work and the pattern library, and they live on in a Github repository—help yourself.