Found some old screenshots…

When I first came to Penn, the website for the Nominations & Elections Committee looked like this:

Old NEC site circa 2011
No, this wasn’t the year 1999… this was in 2011.

NEC website redesign

I set out to redevelop and redesign this, upgrading it from a static HTML site edited over SFTP to a WordPress CMS on Canvas. More importantly, the website redesign in 2012 needed to fit the rebranding that Penn underwent that academic year. In other words, I wanted it to look more like the university’s design. (An email to the Communications office responsible for web assets clarified that we could, in fact, do this.)

Most of the work was porting over Penn’s styles in CSS to a completely different HTML structure. There was a lot of struggle with conflicting styles defined by the Canvas framework/theme, which needed to be overridden. Any of the webdevs out there will know what a pain this was.

I also had to trace the logo (which we only had as a small ~200 pixel wide bitmap) and fix the awful gavel that resulted from the live trace:

NEC gavel automatically traced
This had to go.

Redesign, first iteration (never launched)

Trust me, this wasn’t ready for launch.

Redesign first iteration - home page
Still a little rough around the edges

The barebones of what would become the current site were already visible, and the basic typographic styles (which are still in use today) had been implemented.

Redesign first iteration - content pageThere was still a lot to be improved. For one, the design was awfully devoid of graphic content, and the site title stated under the logo seemed redundant.

Redesign, second iteration (launched Fall 2012)

Main subsection pages became illustrated with bright campus photo banners, consistent with the Penn theme, instead of a redundant site title.

Redesign second iteration - Elections Central

The logo at the top was updated to include an appropriate crest and drop shadow. At this point, though, the mobile view was still awful.

Redesign second iteration - mobile
The navigation was done in a form input control… not ideal.

Redesign, third iteration (deployed Spring/Summer 2013)

From this point forward, most changes were rather subtle, with the exception of an upgrade in the Canvas theme/framework which enhanced the responsive view for mobile/tablet devices.

In 2013, the header navigation dropdowns were updated to be in line with the VPUL navigation design. A HiDPI/Retina logo with hover-over glow effects was added. (There was a later, subtler change not captured by this screenshot, in which the font colour for top level navigation items was boosted to #ffffff white from its previous gray.)

Redesign third iteration - navigationThe changes weren’t merely aesthetic. Behind the scenes, I installed BuddyPress so that we could deliver dynamic member profiles and listings, including an individualized page for each member.

Redesign third iteration - BuddyPress profileThe footer was built out significantly, with added links both for navigating within the site as well as for finding related peer sites. The home page in this third iteration looks very similar to how it looks today at time of publishing.

Iteration in use today (Fall 2014)

The NEC site remains, in my opinion, the prettiest of all of the Penn Student Government branches, and I’m super happy with its role in presenting ourselves as one of the most professional, if not most technologically daring, non-tech student groups on Penn’s campus.

Redesign current iteration - homepageRedesign current iteration - content page

PSG website redesign

For many years, the website that serves as a portal to online voting as well as all the undergraduate student government branches collectively was also looking quite outdated and early-2000s-y.

Penn Student Government site circa 2011

By adopting LESS as a CSS preprocessor (in conjunction with some Git branching), I was able to adapt a customized version of the modern NEC theme to the red PSG site.

The tricky part here was actually filtering the existing blue image assets so that they would:

  1. look red;
  2. match the red of the official Web colours; and
  3. not look distorted or degraded after processing

There was also some experimentation with font/background colours so that visual cues like blue links could be retained, yet the site would overall look red.

Logo refresh

Before even experimenting with background images, I had to deal with the logo.

Old: unfortunately, I think this was the highest resolution we had.

Old PSG logo on darker maroon red

New: vectorized and re-typeset. Also notice the attention to detail in the exact radial gradient background behind the logo.

Refreshed PSG logo on brighter red background

There’s no real need for me to go into lengthy detail here, except to show you the final result. You can visit the site yourself.

This is the landing page that at least 4000 undergrads visited in the course of one week during the Spring 2014 elections, to vote and see the results:

PSG voting landing page

I’m pretty proud…

… of my handiwork. And I’m very emotionally invested in it.

What do you think?