Presidential Hopefuls

Highlighting candidates for the US 2020 elections through a minisite for the Yale Politic

A decade of bringing the American presidential candidates in the 2020 race into life.

Leading a tech team, we worked to deploy a minisite and framework for features and specials at the Yale Politic.

Roles Front-end, Creative Director Visit Visit the Politic Hopefuls Team Chiara Amisola, Lawrence Wang, and Chris Yao

Context

Humanizing candidates over a decade

As the Technology Director for the Yale Politic, Yale's political publication since 1947, I set out to bring to life a series of interviews done over the past decade in preparation for the Presidential Elections through a minisite.

I was given a prompt to find a way to present and highlight this collection of selected interviews that the publication had done in the past years. With my team of two technology associates, we proposed a minisite to present the interviews.

Before the minisite, most Politic specials were only highlighted in compilation posts and served identically to the rest of the content on the website. With the minisite, we wanted to also establish a framework for features and specials for the rest of the Politic's work.

Because we're still in the process of better archival and presentation for the website's articles, another goal I wanted to set was converting a feature page to readership for the site—and more exploration of the website' materials/content.
Thus, I established goals that involved 1.) onboarding the two technology associates, 2.) building a framework for future projects, and 3.) using the page to generate more reads for the Politic's interviews and political materials.

Inquiry

From spotlight to reads

We worked across two weekends to craft the minisite. I took on the role of also guiding the two new technology associates about the general overview of the development process — which proved valuable even for a "mini" project; covering the importance of prototyping, introducing the fundamentals of web development, and version control. We successfully aligned ourselves and worked through the development process.

Our main design considerations were minimizing the scrolling + clicks it took to get users to an interview, and also presenting information in a way where users would go back and continue reading the other interviews.
We also wanted to be flexible and create a framework that we envision could be used for different cases. Because of this, we discarded some of the more 'visually-geared' presentations to focus on practicality and reusability. I guided the team in building the components and assets to put these materials together.

Visual Choices

With the Politic's general color scheme being black/white, we wanted to follow the look and feel of the website to show its connection—but contrast it with an inverted white-on-black look that would suit a special series. One of our decisions visually was to stay true to the type of the Politic's overall branding, keeping the Georgia typeface (the publication's logotype) in and using it for accents along with our main typographical choices.

Visually, we were concerned on the focus of humanizing candidates, while also thinking about how to highlight all of the content we were provided in a just way. We thought of equalizing the candidates by blurring their identities on the landing, whilst going for duotone techniques with grain and soft color manipulation to liken the piece to what would be on newspapers and print publications.



Development

After establishing the look of the website, we built the base of the websites and continued to add visual components. We went through various iterations in deciding how to best visualize the eight candidates that were featured.

Mobile-first

Because most of the Politic's readership is on mobile, we engineered the product with a mobile-first mindset. Considerations we had were ensuring that candidate information would ideally occupy the entirety of the screen height, and clarity on click-throughs to the articles themselves. For example, we let the candidate name and photos also direct to the article.

Candidate listings

Visually, we wanted to make it clear that there were an assortment of nominees that the Politic had content for. This is part of why we wanted to make the figures in the landing graphic blurred and out-of-focus.

We decided to incorporate two methods in which users could view all candidates: a menu with candidate names especially for mobile that would scroll the user down, and a visual selection of the candidates below the introduction text.

Context and material highlights

Because we were working with interviews that were years old, we wanted to be conscious about the selected excerpts on the page. We had chosen snippets and worked with the main editorial team on best practices and choices for the articles.


Framework & System

After engineering the bulk of the site and starting optimization/cleaning of the code, we had also started prioritizing reusability and documentation.

To achieve this, I worked on an inventory of code and design components and frameworks that could be used for next iterations, along with the documentation we had worked.

Insights

New life to words

This project was incredibly fulfilling to work one! On launch, many alumni were drawn back to the work and had applauded its new presentation. I personally thought a lot about the importance of not only preservating content, but also uplifting materials once again especially in spaces like the Politic where poor communications and design can minimize, or at worst - completely conceal/destroy the creations of others in the past.

Tracking

From the reception of the post, we were able to increase the readership of these articles by over 100% based on analytics previously. To maintain this, we're interested in finding a way to continue highlighting interviews and potentially intertwining the feature page with new political developments and campaign updates.

Team Alignment, Education, and Development

Another gratifying aspect was teaching this entire design and engineering method/process with associates. I hadn't conducted intensive development-driven alginment meetings nor development sessions in a while, so this was a great refresher and also helped me articulate the nuances of my process more. Overall, a relatively simple prompt with a now continuous means for growth and development.

A decade of humanizing candidates.


Visit the Presidential Hopefuls