Yale Art School Website Redesign

Balsamiq Mockups

Arpil 30, 2016

Curious case of Yale Art school

This is an attempt to identify existing problems in Yale Art School website and trying to come up with a functional and aesthetically appealing website both of which are missing at the present moment.

Present Version of the Website

The website looks like a work of amateur developers and designers and it’s actually is to one’s surprise.



Course Page


What's wrong with the website

With a little research on internet I came to know that the developers had revamped the website as a wiki even though wikipedia looks a lot better than this though it has its problems. They claim that anyone can edit the pages and possibly even the HTML/CSS.

Problems to address

  • The logo is missing here and a person cannot immediately figure out which organisation this website belongs to.
  • The website navigation is not properly designed. Links ordering is not perfect and unnecessary links such as home is at the bottom.
  • The tiled background pierces the eyes and is unnecessary distraction to reading.
  • A lot of space can be utilized on the right side which can be effectively used.
  • The typography and color scheme can be improved drastically to make it visually appealing.

The Solution

Working through the problems identified, here are a few wireframes addressing the above problems.

Wireframe 1 - Homepage


Visible navbar with university logo in center, explore menu button to the left and login button to the right.

Problems Addressed:

  • Better navigation menu with links in ascending order of importance.
  • Card based layout segregates the information without dazzzling colors.
  • Right column hosting calendar and important activities thus using available real estate.

Wireframe 2 - Admissions Page


Admissions information is using tabs to categorize admissions, fees and aid information. Then user is presented with sub categories to the left. The second content column is scrollable and the left column follows the active link as user scrolls down.

Wireframe 3 - Course Page


It has a similar structure as the admissions page. The navigation is still easy as user can make use of the breadcrumbs on the colored panel or can always access the global navigation through the explore button.