Designing a Quiz About Police

I build visual and interactive stories on the FRONTLINE digital team. My role as designer is to define the user experience, execute the visual design and build out the front end styles. FRONTLINE is investigative journalism, the design needs to support the the high quality reporting and help deliver the story.

We collaborated on a small team to build the police quiz — reporter, designer, developer — that’s a typical combination for us. First, the digital team brainstormed project directions after watching an early cut of the film, Policing the Police. The film follows the troubled Newark Police Department as it tries to make reforms. One thing that stood out to me in the film was the gray area around police stopping a person on the street. What makes a stop constitutional, or not? I didn’t really know. So I proposed an experience that would shed some light on this.

My early ideas were more ambitious, as early ideas tend to be — a 4th amendment game, or a police stop simulation where the user can add different events to the scene. Back to reality, there were two weeks before the film airdate deadline. We decided to build a quiz based on the historical court cases that define a constitutional police stop. FRONTLINE had done an insider trading quiz in the past, so we followed this model pretty closely.

We build our interactive stories in Tarbell, a static site generator. This allows us to build out custom experiences faster and pull them back into our main site with an iframe. For this project, we moved straight into a working wireframe prototype — a process that’s gotten easier as we’ve built up a styleguide of reusable components.

The FRONTLINE web styleguide

The most challenging design problem on this project was the illustrations. They needed to pair with quiz questions, which would explain the events of the court cases. The visual style on the FRONTLINE site is stark and impactful, the type is clean and minimal and photos are displayed large, edge-to-edge across your device. These illustrations needed to feel at home within this world. So I tried some different approaches.

Illustration style directions

#4 would have been the more obvious choice since we’ve used similar clean icon illustrations for past stories. I pushed for #2. The hand drawn style was more interesting and I thought a better fit for this content, and it would allow me to try out this animated effect:

Draw the same illustration 3 times with slightly different lines and play it back over time in an animated gif — that’s how I created this effect, known as a line boil. In traditional animation it was seen as an unwanted flaw, a byproduct of imperfectly redrawn characters frame after frame. Today it’s added as a stylistic effect, to create a sense of movement in an otherwise still scene.

The main challenge with these illustrations was to figure out the right moment in each scenario to visualize. We chose these court cases for a reason. Each one added something important to the legal body of work that defines search and seizure. There were key phrases in each case like “stop and frisk” or “reasonable suspicion,” and there were important scenes like an officer stopping a car or a person making an anonymous tip on the phone. In the end it was about simplifying the most important aspects of the case into a solid composition with a minimal amount of detail. Here are a few of examples:

A case about illegal immigration and footprints in the desert.

A suspect running from an area known for drug activity.

A routine traffic stop that turns up a firearm.

Because of the growing tensions in the country around race and policing, I had to be extra careful about the illustrations presenting any biases. The illustration style is purposefully minimal, it lacks details like facial features or even fully drawn bodies. Scenes are simplified and abstracted so only the most essential elements are shown. I used black and white only, with a light gray wash to add some depth and shadow. I tried to be as consistent and neutral as possible. Most of the figures are drawn with a black outline, the police uniforms needed to be black, I needed a good balance of black and white in each scene to create enough contrast for the composition.

Questions about race did come up on twitter for a couple of people, for this illustration in particular:

Overall I think the illustrations are successful at being neutral and fair. Here I chose to abstract the event quite a bit leaving just a figure with some additional arms to show a pat down. This case had the added complexity of the officer being undercover, so showing a uniformed officer would have been inaccurate.

We’ve refined the FRONTLINE brand to be clear and consistent in the digital space. The base styleguide acts as a neutral canvas for each visual story to build on, it’s an exercise in embracing the parent styles but deciding when to break away from them. For this story, the typography and UI all follow the FRONTLINE styleguide to a T, and the illustration style is more unique to this feature.

Elements from the police quiz design system

I think of each visual story as having it’s own design system, derived from the base FRONTLINE styles but with the potential to be styled more uniquely to fit the content and tone of the story.