Presidential Hopefuls
Context 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.
Team 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.

Politic Header

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.

Politic Sketches

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.

Politic Prototype

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.

Politic Final 1

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.

Politic Final 2 Politic Final 2 Politic Final 3

Results
  • Learned the fundamentals of web development. Introduced to prototyping with Figma, version control, and responsive design.
  • Practiced the process of design thinking. From conceptualization to sketches to implementation, the process turned out to be a constant compromise between vision and usability, creativity and human-centered thinking.

Details

Previous Project

Other Projects

Spotlist

↑ react app to get information about any spotify playlist

Breathe

↑ minimalist New Tab browser extension for meditation

© 2020 code & design by me 满载星海 from LA

I'm a student at ☉ Yale studying the intersection between computer science and design, along with economics and politics. I like basic things such as watching Chinese TV, making Spotify playlists, collecting song lyrics, and yelping. If you'd like to find out more about the interesting personality I never knew I had, you can check out my basic opinions, my basic art, or go find me ↗︎ while I get lost in space.

4:06:48 PMI hope this summer breeze would last more than a season.