The Redesign Process - Step 0

Rumor has it that our university is about to begin the process of redesigning our home page. That's the 'future endeavour' that the title of this blog refers to... and it's about to begin! The first meeting of the new "web content committee" (bad name, I know) is scheduled for this Friday.

Praise the Lord! But...

But, as we all know, if the process gets off on the wrong foot, it will very difficult to correct things and snatch success out of the jaws of failure.

Here's just one example of how we could get off on the wrong foot: "I've never liked the gold stripe on the home page. Whatever we do, we should get rid of that."

If that's the way things start, success will be very difficult to achieve. Why? Because arguing about design details that are based solely on personal opinions leads nowhere and can accomplish nothing positive.

The truth is that "design" (i.e., graphic design) is actually a very small part of the redesign process (no offense to graphic designers).

The real work of redesign isn't as simple as blurting out your uneducated opinions on color and layout.

The real work of redesign is more about realigning your site to better meet your users' needs and your university's goals, messaging, branding and strategic priorities than it is about flash animations and pretty pictures.

Build the House Before you Hang the Drapes

Think of the Web site redesign process like building a house. You can't hang the drapes before you build the walls, and you can't build the walls until you have a floor plan, and you can't draw a floor plan until you know the needs of the family that will live there.

Likewise, you can't choose the design elements before you've built a wireframe of the site, and you can't build a wireframe until you've developed an information architecture for the site, and you can't develop an information architecture until you understand the needs of your users and the goals your organization has for the site.

So step one cannot be a discussion of your opinions of the existing site or what you think should be in the new site. It should be all about asking questions. Here's just a few:

• Who are our users?
  
• What do they want on the site?
  
• What do they do on the current site?
• What do they like about the current site?
• What do they hate?
• What problems do they have with the current site?
• What/who are we competing against?
• What are they doing?
  
• What do our users like about other sites?
• What are our goals for the site?
• What do we want our home page to accomplish and for whom?
  
• What is our brand and how will that be applied to the site?
• What is the message we want to communicate on our home page?
• Do we even have the proper stakeholders involved in the process?
  

Notice that your opinion doesn't appear in any of these questions. That's because at this phase, it isn't about you (sorry!). It's about beginning the process of aligning your institution's goals to your users' needs.

Once you start to ask these questions, you'll realize that you need to gather some actual data and talk to some people in order to get answers to these questions.

That will be the topic of my next post.

Chico's New Online Photo Catalog - Likes and Dislikes

In my other life, I'm a professional photographer, with several Web sites (here and here). So when our department decided to put our internal photo catalog online, I was volunteered (er...recruited) to do the development for it.

I have a lot of experience with stock photography sites (since my work is carried by several - excluding royalty free and microstock, may Allah strike them dead in His infinite mercy), so I know what I like and dislike in online photo sites.

Now, I didn't shoot any of these photos; that's not my job on campus, but we do have a staff photographer who does official campus photography for everything from faculty portraits to events, receptions, general publications and the University Catalog.

The backend of the catalog uses Portfolio 8.5 server. For my personal business, I use iView Media Pro, but Portfolio is pretty similar overall. Both have pros and cons, and I'll refrain from Portfolio bashing.

Initially, we had a lot of problems with hardware, permissions and networking, but once we resolved all that, I was able to begin work on the Web front end. We went with the built in NetPublish tool which uses a JavaScript-based API. I've decided that I like it.

Even though it's still in serious beta mode with lots of missing pieces and content (particularly payment and policies), you can look at it here: http://images.csuchico.edu.

What I Like

It seems a bit weird to review a site that I developed, since mostly I pick at other people's sites. It also seems like tooting my own horn a bit to say, "Look at this site I did! I think it's really cool!!"

But I actually do like this site. I just wish I had time to redo my business sites to match.

OK, so here's what I like...

Number of Results per Page
You can change the number of results that you view per page. Though the default is 16, I like to view as many photos as I can on a single page. Oh, and it remembers your preference from search to search, but only for the current session (Portfolio limitation).


Dynamic Page Width
I hate static width layouts of image thumbnails. I have a 1600 pixel wide monitor at home and two 1280 pixel monitors side-by-side at work, so why can't I use all that space to look at thumbnails? With this site you can. I just organized the thumbnails in divs so that they automatically wrap to match your browser window's width. Cool!


Pop Up Image Previews
We used OverLib to pop up image previews when you roll over each thumbnail. An awesome way to quickly browse through photos. I used the Portfolio NetPublish API to add some pertinent info to the pop up. No more having to go to a separate page to see larger versions of each photo. Super cool!!

Popup Image Information
Our graphic designer was particularly worried that people will want images that aren't big enough to be reproduced well at the size they want in the medium they want. We went around a bit on the best way to do this. I ended up adding an OverLib popup that calculates the dimensions that each photo can be used at different resolutions. It's simple and clear, but doesn't take up space on the page.


Bigger Previews
If you want to see an image even bigger, and view even more detailed info (such as EXIF data, exposure data, etc., if available) on the image, you can click on it and go to a detail page. Nice to have.


Thumbnail Pop Ups on Check Out Page
I hate stock sites that don't let you see what you're buying on the check out page. I also hate stock sites that show a huge list of thumbnails on the check out page - it just makes the page too long when you have to scroll and scroll to see your total cost at the bottom. So I used OverLib to make pop up thumbnails.


Issues

OK, it isn't perfect. Here's a partial list of what still needs work.

• We still have problems with vertically-oriented RAW images not being rotated correctly (that's a Portfolio limitation)
  
• We still have a lot of missing previews (they have to be rebuilt manually)
• The left nav menu is static, so there are a lot of categories listed that currently have no photos in them.
• OverLib does a weird flickering thing sometimes that drives me nuts
  
• We still have a lot of crappy images cluttering up the catalog
• We need better keywording (we're working on that)
  
• We're still fine tuning the advanced search (Portfolio's search is limited and not very smart)
  

You might not like that there's no automatic download, but we really can't allow that since there are a lot of photos of staff and faculty that shouldn't be freely available. And anyway, the idea here is to try to bring in a little money from departments on campus for the use of photos that we took.

Let me know what you think.