megan alison mccrink




New Women of Congress

design, art direction, and some development

After every congressional election since 2018, POLITICO highlights the new women joining the House of Representatives. In 2021, there are more women in the House than ever before. I collaborated with the writer, photo editor and developor for this story.

You can read it here


the timeline 


We built this story on a tight timeline (overall less than one month) to accomodate holiday time off.   

December 1: Initial Brainstorm with the developer 

December 4: Mock-ups sent for feedback with tweaks set by December 7 

December 7-11: Developer starts to build the bones of the build based on the mock-up since they are out the week after.

December 11: Photo samples of the photoshoot come in, with photo selects by me and the photographer due on the the 14. 
December 14-18: I lay out the pacing of the build on the backend via Google sheets and push to the server via Kitchen Sink. I also work to make any CSS tweaks.

December 21-22: I work with the developer to make the final touches on the build and send to the design director final approval by EOD December 22.

December 23-24: Final feedback incorporated and the story gets final approval.

January 1: story publishes.


the design and build

 
Phase 1: Sketch 

This story was built on POLITICO’s interactives server, so I had to work closely with a developer to build design and build this story. We drew and improved upon the first edition of this story from 2019

Before I took the lead on the design, we brainstormed using freehand on Invision: 



Our quick freehand from Invision

We wanted this story, unlike the original, to have an organizing principle to it whether it be via a table of contents, or simply organized by party. We also wanted to play up the size of the photos and let them take center stage. There were a few women we were unable to photograph, so we also discussed what approaches we could take to make their quotes feel equally important. 

To further break away from the original, we also wanted to play with a slightly off grid style to create a fun, visual rhythm. 


Phase 2: Mock-ups 

After our discussion I moved to Sketch to create high-fidelity mock-ups. I am able to get buy-in earlier from editors when I show them a more fleshed out approach to our builds. This also helps address bigger changes that are possibly needed on the earlier side, rather than down the road.

 

A sample of the mock-ups in Sketch

After completing the mock-ups, I uploaded them to Invision for feedback. I used photos from our 2019 story in the mock-up since we used the same photographer.

This was the first time our team used InVision to collaborate and get feedback on the project. You can look closer at the mockups and comments on Invision here (password: 2020 women).


Phase 3: Photo selection

Once photos came in from the photographer, I worked with the photo editor on photo selects. This helped further solidify the pacing of the story. 

I mocked up photos based on four photo treatment possibilities:

 
Screenshots of the mock-ups for photo selects

After, I updated the mock to reflect the proposed pacing of the story. 
 


Screenshots of the mock-ups after photo selects were made

This helped pinpoint what style tweaks I’d need to make in the developed build.


Phase 4: Updating the CSS styles
 
While the developer was on vacation, I worked via Google sheets on the backend to create the pacing of the build.

The Google sheet where all the info for the build was stored. 

Then, I uploaded these changes to Kitchensink so I could look at the build and make CSS style changes to get it closer to my mock-ups.


I did this via the inspector on Google Chrome, and then added to a CSS sheet via Atom so the developer could copy and paste it into their backend.
 

The final product


The final product delivered a visually striking introduction to these new women of congress. 

We ultimately decided to forgo a table of contents since we thought it might be overly repetitive to the reader.


Instead, we displayed all the women at the top of the story, where the reader could scroll through to see them all. Then the story is organized between Republican women and Democrat women.



On hover at the top and on party splash pages, the reader can see the congresswoman’s name along with her district and state. If the reader clicked on a congresswoman, they can jump to her photo and quote. 



To keep the reader even more engaged, we added some light animation to the story. The animation makes it seem like they are making their entrance into Congress.
 
This story is responsive. I always consider general breakpoints too. I take this into consideration while building out CSS styles.

The story received a lot of great engagement and feedback. It has almost 123,000 unique readers with an average engage time of 1:11 (An average POLITICO story receives 24,000 unique readers and 48 seconds of engaged time). 

The story also got a special shoutout: