Bipartisan Policy Center
A comprehensive site that makes it easier to grapple with the hardest issues facing the nation

Audit: Discovering the Why

We don’t like to design without a lodestar. Our first step was to focus intently on who the BPC is. We met dozens of staffers, read through the BPC’s prior qualitative research on their current site, and performed heavy online analysis of the BPC and their colleagues in the marketplace of political thought. We arrived at several core findings about the intrinsic qualities of the organization and how it can best position itself for maximum influence. We also established a tactical plan for how we would express these qualities. Most importantly, we established a vision for the project that would guide us the rest of the way.

We also worked closely with the BPC team to establish a final site structure that made the most sense. In our final audit report, we listed every page and piece of functionality we expected to include in the new site. The document we delivered was nineteen pages (with two appendices). We like for every detail to be transparent and open to everyone involved in the project.

UX: Establishing the What

In our User Experience (UX) phase, we built on the foundation of our Audit to outline the final structure and functionality of the site. The BPC has thousands of excellent blog posts, reports, and other content going back to their founding in 2007, and the existing site’s structure was complex. We brought in the outstanding Eric Miller, a favored Cantilever collaborator, to help us wrangle all of this chaos into a streamlined flow.

One major decision was to reorganize content by policy area instead of content type. We decided to build policy area pages which could act almost as stand-alone homepages for the team working on that topic.

We then established layouts for each and every page and major feature on the site. The result was a comprehensive book that we could use not only to inform design, but to ensure the client felt comfortable with where we were heading.

We built the book in InVision with hotspots, so it could be used as a clickable prototype. We user-tested the prototype with six outsiders, who gave us unique perspective we took as opportunities to improve the site.

Midway through the UX process, the client encouraged us to be more innovative and novel with the homepage. We had originally conceived of a traditional magazine-style homepage layout, but they felt it was important to make a splash, and we agreed. We figured out a concept where the BPC logo would take center stage, disintegrating into shards which then reassemble into icons that represent their core policy areas.

During UX we also performed a full review of all the content that would be on the site, along with its associated fields and metadata. We codified the structure into a Content Model document built with Airtable which served as a key touchpoint for our eventual backend development process.

Visual Design: Discovering the How

In visual design we re-approached the pages from a new axis. Based on the brand qualities we identified in our audit, how should pages look? Aesthetically, the political space is just opening up. For years, anything to do with politics used the same dry, predictable motifs. With BPC we wanted to convey the uniqueness of their mission. We brought on the exceptional Rina Miele to help establish the direction.

We created two mood boards demonstrating wildly different approaches, both of which we felt were fits. We tested the mood boards with outsiders, eliciting reactions that helped the BPC decide which one to commit to. Ultimately they chose a look that emphasized diversity, clarity, and balance.

We then implemented the mood within the framework of our UX. We were joined by the talented Brian Kuperman of Rekupe who helped us take full advantage of the new look. The result was another clickable prototype containing a gorgeous mockup of each final page, which we could then user-test to validate our assumptions and discover latent flaws.

We also created a suite of illustrated page “themes” that mirror the BPC’s focus on diversity and creative problem-solving. Their key articles can be decorated with any one of the twelve looks, creating a vibrant and fun user experience.

Development: Putting it all together

While our design was clear and everyone was excited about it, we knew development would be a major challenge. The client’s existing WordPress CMS was complex, with content that was authored in several different systems over the many years of service the legacy site had put in. Though the client wanted to stick with WordPress, we created a totally fresh, simple editing experience for the BPC’s authors, so the data structure was totally different. Especially when it came to media and relationships, migrating the content cleanly was a major challenge. With several clever techniques discovered by our backend engineer Adrienne, we established a migration strategy that got the vast majority of the content and media ported over cleanly. Nonetheless on any new site project there is a mountain of new and changed content to work on, and our clients Ashley and Ben at the BPC did a fabulous job of working through everything to create a cohesive final experience.

We simultaneously began building the frontend code. The site uses our latest CSS and Javascript methodologies to create a nuanced user experience with less code than other comparable sites. We also utilized enterprise-grade caching techniques, invented a novel asset management method, and took advantage of Cloudflare to create a lightning-quick user experience while lowering their hosting costs significantly.

We also focused heavily on accessibility, trying to ensure that users on any device and with any level of physical ability can easily navigate the site and take advantage of what BPC has to offer.

We partnered with inventive developer Brian Burkett to bring our unique homepage concept to life. The final product speaks powerfully to the BPC’s approach and influence.

We stitched the content and the frontend together with our innovative WordPress backend approach, nicknamed “Boxfort.” The codebase is modular, maintainable, and scalable. We build sites so that they can keep growing and evolving over time, and BPC is no exception.

Finally we tightened up all the connections and tested the site heavily. QA is a strength of ours and was critical for a site of this volume.

Outcomes

The new BPC site is assertive and dignified, but also fun and approachable. We are proud of how well we captured the essence of their mission. Ben, Ashley, and the whole team at BPC were outstanding collaborators. Without their insight and hard work, the project could never have come together as strongly as it did. We look forward to maintaining and growing this innovative platform for years to come and being a part of shifting our political conversation back towards collaboration and progress.