Design Tips

College website gets a makeover

Eloine

I’m excited to be able to show a sneak peak of my colleges new website due to go live on Tuesday! I originally revamped the site in 2003 and it was good for the time but then the content outgrew itself. This new launch was a year in the making with the first half of the year doing nothing but usability testing with our various audience profiles with several different navigation structures. You can read about the process of the usability study here. The main goal was to have a website that was easy to find information and still provided a rich user experience.

Below is a screen capture of our old site. It’s wasn’t even our school colors but the main problem with it was the navigation. The navigation was figured out by a committee in upper management and never really tested with the actual people who would be using the site. You will see that we have “student services” and “student resources” as two major buttons. These two buttons lead to confusion on the part of the student wondering where the information would be located. The question pops up in their head as to what is the difference? To those in academia though student services is considered a department and under it are various services that report to student service managers and deans. This is a problem when listing things under that heading because the managers then say that doesn’t fall under student services when to a student it clearly is a service. By renaming this headings and taking out the term student services all together and just defining a group of users we solved that problem.

Old site

Old college website

 

For the new site I created beta versions and I conducted tests on groups of faculty and staff, on managers and on current students. I then conducted tests on multible feeder highs schools throughout the area that might be potential students so see if they could find the information they needed. Great care had to be given that I didn’t lead them when asking questions as they navigated through the site.

Once all the testing was done and data was tallied and suggested changes were made it was a process of converting thousands of pages through out the site. The original site was created in CSS and HTML but not in a way that it was easy to swap so many pages needed to be manually generated. During this time a little house keeping was also in order to make friendlier URLs where the web address was just shorter and more intuitive. Not an easy task since I had to find where all the possible link references for readdressing might be. I manage about 40 user connections to the college site so in addition to changing content I needed to keep track of content that is being changed without my knowledge.

Never-the-less below is a screen shot of the new sites home. Most of the large display graphics rotate and change on reload so you’ll get something different each time. There is more real estate for news and events in effort to keep the site fresh. You can view the live site here.

New site

New website showing that much of the content is dynamic

 

One of the things I am most proud of is being able to deal with an enormous amount of information that is both an improvement to the navigation of the site but is also a menu system that is ADA compliant (something colleges and government sites have to worry about) and is approved in usability testing. The menu system is called “mega menus” that many large scale sites are deploying because you can organize content in categories much like you would in a grocery store where content is grouped in isles for an easier fine.

In addition to the pages with grouped information specific audiences they don’t have to leave the page they are on if they didn’t find what they need there. All they have to do is hover over the other buttons and .5 seconds (enough to determine they meant to hover) a menu will appear giving them an idea of what content is there. This is called “hover intent” and it allows the user to quickly scan the site without having to leave the page they are on. web users can see this navigation on every page of the college website.

Page showing mega menu and then showing the hover intent

The rest of the site is full of college specific information so nothing very showy but I do like the page with the maps and also the development of our college success stories.

The map before was a flat map that didn’t give you a sense of scale. By making it more in perspective it is easier to see where things are in relation to each other. I used zoomify in photoshop so that the user can zoom in on certain areas of the map to see detail

The user can zoom in on the various parts of the map

The student success page features a jquery/CSS based slider of the newest success stories. I wanted to stay away from flash since many of our students access our site from mobile devices.

jquery and CSS slider

A real effort was made to have almost all pages have a uniform look throughout the site. Many sites do a redesign but it doesn’t go past the first top level pages. We didn’t want to launch until all pages of the site looked like they belonged.

Example of a subsite page

Estimating time by weighted average

Eloine

Anyone who knows me is going to find it extremely strange that I of all people should post a math formula! When it comes to managing your projects though there doesn’t seem to be any way around it. Your client is always going to want to know how long the project is going to take. You’re going to want to know too since you don’t really want to work for peanuts. It’s difficult at times when the projects are complex and lots of factors involved. I was discussing this with a friend the other day and it made me remember a formula they taught us that I think it pretty useful. I thought I would share it with you just in case you haven’t heard of it and are having trouble figuring out how to estimate your time on a project.

It’s called the Program Evaluation and Review Technique (PERT). It’s a pretty simple formula that goes like this:

 

Expected time  =  ( Optimistic  +  4 x Most likely  +  Pessimistic ) / 6

The time you would tell the client is the expected time after you factor in the optimistic time (time it would be done if everything goes smoothly) plus the mostly likely that you are sure it could be done (x4) plus the time if everything goes wrong. Then you would divide all that by six and it comes up with a pretty accurate number of a length of a typical project!

Floating in the clouds

Floating in the clouds

Eloine

Ever want to put type in a cloud in photoshop?

In this tutorial I am going to show you how to make your text float in a cloud but really you could do this with any object.

  1. Start with a good photo of some clouds or download the source files at the end of this post to try it for yourself. Make sure there are areas of the clouds that are very white so you can get it to wrap around better. I played with the level in the photo to adjust for this slightly.
  2. Make sure that your clouds are on the bottom layer in photoshop. This will work with CS4 as well at CS5. I am not sure about CS3.
  3. Click the T tool and type something. This will make a new layer of type but you won’t see any clouds around it yet. 🙂
  4. The next step is to couple click on the type layer to bring up the layer styles. Make sure the settings looks follows with slight adjustments on the slider for the effect.
  5. The most important thing is the area I have circled above to blend the underlying layer if. You’ll need to split that white point slider by holding down the option key on a Mac or the Alt key on the PC and you can split the slider. Notice as you slide the lighter areas of the cloud will waft around the type.
  6. Perhaps you like the effect but some portion is covered up more than you would like. Your not done then so you can do a little more adjusting by duplicating your type layer and making a mask of only what you want to show through.
  7. After duplicating the layer and making sure it’s selected click the “layer mask” icon in the layers palette.
  8. Fill the layer mask with black and then select a soft brush that has white as the foreground color and paint on the mask the parts of the type that you would like to reappear.
    Download the source file here. (3.4 mb)