re: Design

The launch of the new Rochester homepage went off without a hitch early yesterday morning, and the new design is now live for the world to see.

This is all very exciting, after about 14 months of planning, discussion, and good old fashioned work. Of course, the Web being the Web, there is always something new to do or something to change or fix. The old design was nearly five years old, and anytime something we’re familiar with changes there can be a little awkwardness or adjustment needed as we get comfortable with something new. We’ll continue to use this blog to share our thoughts about new ideas or changes as they come along.

Speaking of this blog, I owe you some more posts regarding the changes we made during the six-week beta period. The most obvious of these changes involves the homepage photography.

Originally, the entire photo served as a link. When you hovered your mouse anywhere over the photo, you got a little caption telling you more about that photo. And if you clicked anywhere on the photo, you went to an “About the Photos” page. This was a neat idea, except for the fact that it was very easy to unintentionally click on the photo and then get whisked off to some page with no idea why.

So on the new site, the “About the Photo” information can be found by hovering over the little camera icon at the top of the page. Ya see it? We’ve intentionally made it rather subtle so that it’s almost like a hidden Easter egg: if you spot it, it’s a fun little bonus discovery and it doesn’t overpower the page.

We’ve also included a five-star rating system of the photos, so feel free to vote for your favorites. The plan is that during the course of the year we’ll continue to freshen up these photos to show off the beauty of our campuses as the seasons pass or to highlight events throughout the year.

From the tuckered out but happy Web team, that’s all for now. Please take a moment to explore the new homepage and keep letting us know what you think.

–loriÂÂ

During the beta period, one of the more consistent pieces of feeback we received was regarding the design of the News and Events sidebar on the homepage.

The tabs are too boxy, you said. And while nobody commented on how simply and elegantly these were coded (nobody appreciates beautiful code anymore!) we agreed that visually they left a little something to be desired and that they were definitely less polished looking than the rest of the site design.

So we’ve zazzed them up a little bit, plus added some really neat jiggery-pokery under the hood. We’re using jQuery to handle the tabs and also send additional news items for those with taller browser window heights. Here is a quick before-and-after:

–lori

The beta version of the new homepage design has been live for about a month now and we’ve received lots of comments and hundreds of votes from visitors to the site. So thank you to everyone who’s sent along their feedback. It can be a little daunting opening up the design process this widely: when you ask people for their opinions, you need to be prepared when they give you their opinions.

We have made some changes, based both on feedback (through the beta site or directly) and our usability tests with new and prospective students and parents. I’ll go into these changes individually on this blog for the rest of the week, but in a nutshell:

• We’ve retooled the function and look of the news/events sidebar
• We’ve changed how the large, rotating photos work and updated the photo selections
• We’ve made some changes to the main navigation bar
• We’ve made some content changes to a few of the subhomes

We are currently what I would describe as the “lots of little fixes adding up to one huuuuuuge list” phase of the redesign, but are hopeful that the site will be live later this month. We’re busy as bees over here (or is that Yellowjackets), so please continue to check out the beta version of the site for new developments.

–lori.

A prototype of the new homepage design is now live at http://www.rochester.edu/beta/.

For this beta period, we’ve added commenting and “rate this page” functions for each page included in the beta, so please feel free to send us your feedback, either on individual pages or via the blog.

Some additional additions to the beta:

• If you click on the large photo on the homepage, you go to a page that lists all the large photos, with desktop wallpaper available for selected images. We plan to expand the ways visitors can use these photos during the beta period.
• The “Newsroom” is no longer a hard-coded mockup and is now actually serving up live news from all the University units, and live event information from the University calendar.
• For the “sub-home” art, we stuck with the darker background images but made them shorter so that more of the content below would appear “above the fold” for users with shorter browser windows.

We plan to conduct more usability testing during this period with more audiences — prospective students, current students, faculty, and staff for a start — and I’m sure will continue to make changes. So keep those cards and letters coming in!

–lori

Here at Redesign Central, we’re getting ready to launch the beta version of the new homepage redesign. The beta should be live next week, and we’re excited to see the site holds up “out in the wild,” as it were.

In the meantime, as a bit of an appetizer, here’s the collection of homepage photos that will be included in the beta release.

–lori

We’ve added a new feature to the planned homepage redesign: fly-up menus over the main navigation links.

Check it out here.

The new fly-ups accomplish a few things:

They expose additional content at the top-level, so users who have more of a specific sense of what they are after can be sped along their way faster.

They retain a prominent link to the sub-homes, so users who want to browse through the content for more context can do so.

And they provide a visible reaction to user behavior (”when I hover over this, something happens”) that is especially important for our prospective student audience. Our research shows that these kids are very “tactile” when navigating a new site. They pour over the site, looking for items that respond to their touch, and this gives them their sense of how to proceed.

–lori

In the last few posts we’ve talked primarily about the graphic design of the new homepage, subhomes, and templates. That’s because lately that has been where most of our efforts have been directed. Plus, it’s fun.

But “underneath” the graphic design of the site there is another type of design: information design – or information architecture – is the art of designing the structure, hierarchies, and relationships of the content and functions that make up a website.

As the old saying goes, “You can’t hang the drapes before you build the house.” (Well, maybe it’s not an old saying, but it is a saying because I just said it.) The information architecture discussion and work has to happen first because it informs the graphic design.

Our new redesign relies on a simple persistent navigation scheme (“persistent” because it will “persist” through to the subhomes and templates) that uses similarly large concept “chunks” (Academics, Student Life, etc.) to create the initial structure. And yes, “chunks” is the technical term amongst information architecture circles. A secondary menu features a mix of audience-specific navigation and task-driven navigation.

With that architecture in mind, the design can now go to work making the primary navigation look like it is primary, and the secondary items look secondary. In this way, things like font choices, sizes, weights and colors are not just aesthetic decision, but actually help create meaning and structure. They say, “These items go together. This is more important than that.”

–lori

Taking into consideration some of the comments we received about our latest revisions to the sub-homes, we’ve created a couple of alternative ideas for your viewing pleasure.

In a nutshell the comments lamented a loss of sophistication to the design because of our change from a section of large type as a graphic element to a silhouetted image and some simpler titling. To some degree, I felt the same way but for a different reason. It was obvious from our usability testing that the large type idea wasn’t serving the purpose it was intended to; that of a graphic element and informative copy. No one was reading it at all. Thus the change. My feeling about the loss of sophistication was that it was due to the color change of the page background, and not only the imagery. I think the dark column and colorful photo and high contrast title added visual clutter to the page. So we’ve produced the ideas below. These are just samples, but if it were to move ahead, all of the sub-homes would be treated similarly.

The first one, utilizes the same artwork from a previous version, but the color has been removed and the type style changed. You can view the page here and a thumbnail below:

The second one maintains the lighter color of the page background, but introduces a stylized drawing of a university architectural detail to highlight the page. Different appropriate drawings would appear on each of the sub-homes in this design. You can view the page here and a thumbnail below:

The thinking here is that these designs simplify the page a bit and make them more unusual, helping to return a more “elegant” feel.

- mike

In the current homepage design, there is a set of templates used by administrative departments and some academic departments. Here’s an example of a site in the current templates:

As part of the redesign project, we’re redesigning the templates as well. Here is that same page, in a new version of the template, which follows the color scheme, graphic design, and persistant navigation of the homepage and sub-homes:

The current templates are coded as fixed width, 800X600 tables. The new templates are also fixed width, but optimized for 1024X768 screen resolutions, and are also rendered with a CSS layout, as opposed to tables. This makes them much more flexible and friendly on mobile devices and screen readers.

The plan at the moment is to create new graphics and stylesheets for the “old school” tables, and then slowly migrate sites over into the new world of CSS. We also intend to create a small library of header graphics (the only one we’ve created so far is that carved building detail) and even create some custom headers for departments that request them.

–lori

Back when we posted our first homepage mockup, we also included some mockups of second-level pages. which we’ve dubbed “sub-homes.”

The idea behind the graphic design was to swap out the “big photo” for “big text.” Since the introductory text on these kinds of pages is often just “happy talk” that simply serves as a graphic element anyway, why not really make the text a graphic element by providing text that was both interesting looking and interesting. And hey, maybe people will even read it!

Guess what? They don’t. Our usability test subjects uniformly ignored our carefully crafted, beautifully presented text — which was chock full of interesting information (Did you know there are no required classes? You would if you read this.) — in favor of anything that responded to the hover or click of a mouse.

So while the content and organization have stayed the same, the graphic design is now significantly different, and — I think — improved. Behold:

Before:ÂÂ
ÂÂ

After:

You’ll notice we’ve lifted a few important phrases from the “big text” and featured them in the new graphic, still with the goal of trying to convey important information about the University — to people who are not already familiar with the University – in a quicker and easier way. On these pages, it’s more about looking and less about reading.

–lori