Tell the Meridian Hill Pictures

A Blueprint for the website landing page.

Overview of the main pages, a bespoke design on the NationBuilder platform.

Creative Brief

Crafted Product

🔗

Link to → Meridian Hill Pictures Meridian Hill Pictures is an award-winning documentary film studio based in Washington, DC. They are also friends and allies with Graphicacy.

Goal

The project began with a request to create an information graphic about what Meridian Hill Pictures (MHP) does. MHP was looking for Graphicacy to assist in finding visual ways (website design, information graphics, etc.) to help people understand what they do and what to expect (process) when working with them.

Upon review, the MHP team realized they needed to scale up the project more. The following text is from Lance Kramer, one of the MHP founders and lead producer:

"For that reason, I would like to pivot the focus of the project a bit from a discrete graphic/interactive element to a deeper, more integrated restructuring of our site. Despite its age, our website is still rather small, 116 pages, and I suspect there’s plenty of content that would not need to be migrated to our new site. To me, the greatest challenges and opportunities of the site revamp lie in the areas of information architecture and user experience—areas that Graphicacy is well-equipped to help us tackle.

Here’s an analogy that could be useful: one could imagine our site as a whole to be the interactive graphic, and our company’s mission, experiences, and work history to be a set of “data” that is in need of better organization and presentation. This must be done with the end goal in mind being to not only help audiences better understand MHP but to also move them to connect with us in meaningful ways (new client projects, partnerships, sharing our work with friends, etc).

Using NationBuilder imposes a few constraints on this process, the most important being the number of distinct page layouts we can include in our customized template (too many makes our development costs prohibitive).

With these things in mind, here's what I'm thinking would make sense for final deliverables:

Complete set of wireframes and user flow diagrams
Four high-fidelity page mockups, including: Homepage, About/Mission (ideally this format could double for a Services page as well), 2 types of interior pages - one for featuring projects, and case studies (more visual material), and one for blogs, staff bios, and other more text-heavy content.
Other graphics elements, potentially including: Supporting diagrams for the mission page (eg, Venn diagram, company history timeline), Lead/call-out box, and button styles Iconography for service/project types.

If we're all on board with this plan, here are some suggested next steps:

MHP provides 5 user personas based on key website audiences
Graphicacy/MHP work to sketch potential user paths based on these profiles
Graphicacy/MHP build out site architecture and wireframes

Role

👋

My roles: I designed the new website for Meridian Hill Pictures, a Washington, DC documentary film studio that explores complex social issues through people-centered stories.

Ben Kampas, Developer
Allison Buki, Project Manager
Lance Kramer, Meridian Hill Pictures (the client)

Process

Discovery

Observations

👀

The prior design of the website had a charming quality, thanks to the lively illustrations by Steven Weinberg. I wanted to preserve the friendly mood that these illustrations convey—even if we didn't use them to the same extent as MHP's portfolio grew. The MHP films needed to become the star of the website, rather than the art. But the spirit of the art, and what they convey, needed to be present in the redesign, too.

A sample illustration from Steven Weinberg.

👂

Based on our whiteboarding conversations (in the Discovery sketches, below), we realized that the goal of MHP is to build a measurable community through its website, social media, and newsletter. This means that all roads on the website should lead to a 'Contact Us' form, or a 'Join Us' button. MHP chose NationBuilder as the platform for this reason. This platform is like WordPress but also provides integrated solutions for community-building.

📊

Data

MHP Website Content.pdf165.8KB

🖍️

These diagrams, sketched by the client, were created in conversation with me and the Project Manager, Allison Buki.

These sketches were refined into some wireframes:

Concepts → Blueprints

Reflection

💭

From this experience, I learned more about the value of whiteboarding the user journey. This led to the discovery of the importance of getting people to sign-up and become a part of the MHP community. MHP is more than a film studio, it's also a participatory, citizen-driven organization. I also learned how to design a bespoke website using the NationBuilder platform. This is an important skill to have for working with other community-based organizations. Finally, all of my projects with MHP tend to go well. This highlights why people and compatibility matter in a creative project. Because we're all friends, we were able to work in harmony with each other.