Heritage Foundation

Guide to the Constitution

Heritage Foundation built an online site dedicated to their commentary and essays on the US Constitution. EightShapes designed and built the site from the ground-up, interpreting it less as a content publishing platform and more as an app with the Constitution as the focus.

Techniques used: collaborative brainstorming, visual design, information architecture, interaction design, responsive design, production HTML/CSS/JavaScript

Design Challenge

The Heritage Foundation of Washington DC wanted to publish its Guide to the Constitution – available as a printed book – online as a free product. The site’s experience had to make the Constitution and related essays engaging, easy to read, and relevant for the foundation’s wide audience.

EightShapes understood that this was more than a simple “port to web page” or “render book as blog” exercise. These approaches miss the opportunity to provide a task-focused and content-specific experience that was optimized for user needs and the Constitution’s content.

Solution

While our initial explorations used “classical” site design approaches, like a blog, we quickly understood that these did not serve the Constitution effectively. EightShapes facilitated a structured brainstorming session with Heritage stakeholders, which revealed a broader range of ideas. Subsequent iterative sketching and prototyping pivoted the project to a cleaner, simpler and more focused “app-like design”.

EightShapes proved the concept through prototypes of increasing fidelity, including an overall visual style, gaining stakeholder approval. By experiencing the product through a coded, browsable interface, stakeholders didn’t have to interpolate anything about the design. Instead, they understood the interactions through three interrelated, basic page prototypes:

  • Navigating the Constitution itself.
  • Revealing supporting material like commentary.
  • Searching through Constitution snippets and full text.

By using an app model the site was already optimized for tablet-size touch experiences, notably iPad. With the basic structure, layout, and visual style in place, our team focused on the responsive design:

  • transitions
  • orientation switching
  • dynamic content loading

Finally, EightShapes also built out the javascript framework including all scripted interactions and back-end integration. While such front end development is not typically an EightShapes offering, this project afforded a unique opportunity to pair with our client to extend our services.