Presidential Hopefuls

See the Site ↗︎

<aside> ⏲️ Time Frame: November 2019

</aside>

<aside> 🛠️ Tools: Figma, HTML/CSS, Javascript, Adobe Photoshop

</aside>

As a critical election year neared, the Yale Politic wanted to chronicle their series of interviews over the past decade to offer more insight into the presidential candidates. The Tech Team was tasked with the creation of a minisite that would present the interviews in a meaningful and accessible way.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b0f70e27-1ee2-4f2d-9882-0345028d0585/hopefulslayout.png

Under the leadership of the team lead, we aimed to expand readership for the magazine and build a template for future feature projects. Personally, I was responsible for the landing page design, as well as content and asset generation.

Concept

According to initial sketches, the landing page would showcase several prominent interviewees, with their photos and names, as well as an impactful presentation, which differed from The Politic’s usual, more muted style.

Prototype

The landing page was prototyped in Figma, originally featuring a large, bold font with black and white motif to capitalize on the preexisting design language of the magazine. In a similar vein, the candidate photos are prescribed a black and white treatment. To equalize and humanize the candidates, I conceived of the technique of blurring and adding grains to the portraits through Photoshop.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/efdea21f-3510-4238-9c73-50660e745bb9/hopefulsfigma.jpg

Implementation

With the goal of encouraging readers to go through all the content, we implemented a system of horizontal slider and vertical scrolling, such that all interviews with minimum clicks and scrolls. For typography, Canela was used for headings as it brings a kind of elegance different from the magazine’s usual Georgia, and Sailek was chosen for the body.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9e01c1ce-0006-4314-b819-e9d7aaab8ee5/hopefulstype.jpg

The site was developed with a mobile-first mindset to account for The Politic’s largely mobile readership. On mobile devices, clicking the fixed header brings up a list of all the candidates, allowing quick access without excessive scrolling.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b0184a21-5701-4d28-b713-7e01cb06c5c3/hopefulsmobile.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/524af89e-b2f6-4e65-8ada-f82005eb38d8/hopefulsbanner.jpg

Results