School of Architecture + Urban Planning

About

The Dean for The School of Architecture and Urban Planning (SARUP) at UWM asked me to serve as Project Leader for the redesign of the school website. The current site was a poor reflection of the school visually and the web architecture grew organically without any strategic plan. I led a committee of three Architecture Professors and the head developer, and reported directly to the Dean to address three issues:

  1. Rebrand the graphic identity for the school and website
  2. Organize the web content
  3. Design the new website and showcase fresh work from the school

The process from design to launch occurred in the span of one year with a launch in the Spring of 2010. As of January 2016 the website is still in use. While it could probably use an update to make it mobile friendly, overall I would say that the site has aged well over the last six years.

Me

I diagrammed the existing web architecture and produced the results in a flowchart as seen here. I then worked with the committee to present a flowchart with an improved and efficient organization of the content, seen here as well.

After organizing content the committee wanted to fast track into the color designs to meet deadlines. I produced a set of mockups as requested, but we quickly realized that we had to go through the iterative process of wireframes. I worked with the committee through numerous wireframe iterations until we had a layout for the content that everyone agreed on.

While doing this I formed student work groups to investigate the SARUP identity. We held Deep Dive sessions to produce taglines and visual elements that could be used to inform a website design that spoke to the students.

One of the problems the committee and Dean wanted to solve was how to showcase current student and faculty work that was produced every semester. We ended up finding a solution by integrating a Flickr feed into the Gallery. The solution was to gather student work at the end of the semester in digital format and then upload it to Flickr, tag it, and organize the content into albums. This content is then fed live into the website. It has the secondary benefit of archiving all of the student content.

The school hosts guest speakers and events but it was challenging to broadcast this information. Emails could be sent to the student and faculty body to announce these events, but many people who did not attend the school but who were in the local architecture community were interested in attending these events. A live calendar feed was therefore incorporated into the website so that anyone could stay informed on upcoming events, plus review past archived events.

As one might expect, once we entered the stage of graphic design, there were strong opinions from a committee composed of professors at an Architecture school. Designs were investigated down to the pixel and no element was left untouched. Discussion was had on every element’s design and its affect on the user experience and the perceived brand identity of SARUP. Milwaukee is a blue collar town and SARUP UWM reflects this sensibility. Therefore Gotham Condensed was chosen as the font for titles and headings. Various colors were explored, but in the end, a variation of UWM’s black and gold was the final choice.

Existing and Proposed Web Architecture

Wireframes

Final home and 2nd tier page

Design iterations

Related Projects