Web Re-Design Project: Fordham.edu

Fordham.edu as it exists now:

I propose a redesign of Fordham University's website. As is, the site is visually boring and concepually convoluted. It was important to me to create a more visual navigation system for the site. (This idea carried throughout the evolution of the design, as shown in the posts below). My design streamlines the look of the site while making it interesting and engaging for every user--prospective and current students, faculty, alumni, and staff.

This is my final homepage design:


The books--clickable--are links to the main sections of the site. These have been re-organized in this new design, and so some do not exist on the original site. This was done to eliminate redundancy in the site and make it easier to navigate.

When one of the books is clicked, the whole stack minimizes into the bottom left corner of the screen. This is shown below, as if the "Schools & Departments" book were clicked.


Note that this design is intended to have no need for scrolling. The wide format allows a lot of information to be displayed at once.

We also see, on the above page, the way it will be navigated. When the mouse hovers over one of the sections, the little glowing circle will appear at the beginning of the title (See "Departments"). Here, it is illustrated as if the mouse is hovering over the "English" department link. This abridged department list is made up of the most popular departments at Fordham.

Another way in which an individual department can be accessed is through the menu on the right hand side of the page, shown below as if the mouse were hovering over the letter "E" in that list, and then over "English".


This, then, is what the English department's homepage would look like:


Also note that next to the books, on the bottom of the screen, there will be a path of links so that the user can easily go back to any previous page. When the books themselves are clicked, the user will be returned to the homepage.

Overall, I think this new design is more attractive, and much easier to navigate than Fordham's old site. If this design were to be implemented, more in-depth thought should be given to the clear inclusion of all the site's many pages information, or even entire site simplification.

For an evolution of this design, see the posts below.

Original Concept

This concept, though very basic, was formed with the aim of simplifying Fordham's home page. I thought it was important to single out the main links in an eye-catching way. It is essentially a sketch of an idea I went on to develop further.

More

This is a further fleshing-out of my original concept, which includes two additional pages. The first page is the home page, and I had envisioned that the boxes would be animated to press down like buttons when clicked.



The second page is made as if the user had clicked the "Academics" on the home page.



The third page goes further, and shows what would happen if the user had clicked "Fordham University Lincoln Center" on the Academics page.

The Next Step

It needed more. It lacked color, and still felt like a sketch. This was my solution to make it feel like a more professional site. I clarified some of the ideas behind the way I wanted it to operate, including a search bar. The first, second, and third pages are still conceptually similar to what they were before.

The NEW DESIGN

I thought the other website I had designed was a little too conservative. I know, how exciting can a school's website be, right? But I thought I'd try something totally different.

This is the home page:



This home page is virtually the same as the final home page, except this one is designed vertically. This one also included an animation: The books are still the main links, but when clicked, there would be an animation of the book sliding off of the shelf towards the user, then opening. The next pages would be inside the book, as below, (when "Schools & Departments" link is clicked):



In this, I focused on a different next page. When "Discover Fordham" link is clicked, the user would get a version of the existing "Discover Fordham" page that I created for more user-friendliness:

And Finally...

Though I definitely preferred the new design, I chose to scale back on the book metaphor. It made more sense not to have all the information inside a book, both visually and conceptually. I also decided to give the pages a wide layout because more information could be viewed at the same time. Once again, here are my final designs: