redesign

Admittedly, this turned out to be a lot longer than I would have otherwise planned (and I didn’t even get to the underlying server software/functional changes), but felt it important to talk about all the details. For easier reading, you may want to print the text for reading in conjunction with the images on screen.

Each of the following images indicates a slightly different view of either the institutional home page or the draft law home page. I’ll begin with the institutional page and explain many of the primary elements and then note the changes to that default that would occur with moving to a school home page. One other caveat I must note, while the background color is nearly settled on the green, the other colors are still in flux and to be decided. To view any of the designs larger, simply click the image.

Institutional Home Page: Brook Brisson

Site Header (navigation/wordmark)

The site header (the top of the page through the yellow bar) will be used on every page, regardless of school, department or other page. (As before ~tilde accounts are considered personal space and are not affected by this change.) As you both probably know, it’s too easy to get lost on the site, and so every page would carry both the school navigation (yellow bar) and the meta navigation (yellow text across the top). The search function and wordmark are included with this section that will be carried through the entire site as well. (I’ll discuss the handwritten wordmark shortly.)

School Navigation

The school navigation appears closed here, but within any school site, will have is own sub-navigation with drop-down menus available visible (the expanded view is shown when dicussing the school home pages). While we know that many of our site visitors will not move from school-to-school very often, this series of the three schools together makes it very easy to not get lost, or if you do, get back to where you’d like to be.

The other benefit of having the school names/navigation together is a visual one. Throughout the meetings the consultants and I had with many members across the three schools, there was great concern about the siloing between the three schools and even within schools — in this design, the three names are closely linked not only with each other, but also in their visual support and proximity to the wordmark Lewis & Clark.

Meta Navigation

The meta navigation is another slice of the same thought. It essentially is composed of the elements that all three schools share. The About Us would have not only the institutional "about" but also "abouts" for each of the schools. (Where appropriate, the meta navigation has segmented content.) We have a number of Portland Oregon sites, between three admissions offices and alumni, etc., this navigation not only gives us an opportunity to eliminate the duplication of work effort, but also then create a richer Portland sub-site with our role in the community and even some fun elements. The other follow in the same vein and the new web content management system will allow New Media to give people all across campus the ability to edit these pages. So for example, none of the admissions office would lose their ability to help edit their Portland content.

Script Wordmark

You’ll note that the wordmark for Lewis & Clark is shown here in a hardwritten style. This is by no means something on which we’ve completely settled, but after talking with everyone and summarizing the experiences we had, the words that kept re-appearing in our discussions were handmade, organic, community, among others. For me, also being very new to Lewis & Clark, I learned about the unique paths that everyone here seems to take on their journey to us, as well as where they go afterward. Using the handwritten wordmark, particularly in conjunction with a main feature with a matching handwritten signature, is in some form, recognizing that this is Brook’s Lewis & Clark. At right is an example with the offical wordmark for comparison.

Internal navigation

On the right, beneath the school navigation is some new, primarily internal navigation. All the aforementioned navigation would be more externally focused than it is now, and to compensate and really, satisfy another major concern we heard across the campuses, we will be providing links to richer internal content.

The Source

The Source is the same site that public relations began to help communicate and create more community amongst faculty and staff. It may see some growth into providing more content on a more frequent basis and student-focused content, but that is yet to be decided.

The Green

This is a password-protected space for the LC community. To date, we’ve thought about housing carpool listings, a marketplace, a soapbox and other such forum-based content. (By keeping it password-protected, we do not have to monitor language, etc. and I would expect it to be relatively self-policing.) It would also create a virtual space where we might have groups be able to setup pages to help them organize and communicate to the community.

My LC

This is your own personal page for storing links and getting information directed to you. Upon login, we’d know that you might have one or more roles at Lewis & Clark and as a base, the system would suggest some popular links that might be of use to you. You would be able to add or delete links easily, and link suggestions would appear as dismissable notices. What’s more, on every page of the site, we’d have an "add to My LC" link so that you could easily store information pertinent to you. It would also be tied into the notices (as we try to reduce the amount of email we get), so that you would only see notices or annoucements which apply to you.

This function would not be limited to the LC community alone however, if you were an alum or prospective student, you would also be able to create a My LC. In the case of a prospective student, you might choose "Graduate School Prospective Student" as an option and then, not only would Becky Haas get an email noting the signup, but then, she would be able to push information of interest to their My LC. (Again, completely and easily dismissable by the recipient, so as not to be an annoyance and reduce usage.)

You will note that we are, with intent, breaking one of our own rules about our brand here. We almost always spell out "Lewis & Clark" rather than use any abbreviation, and only then use the approved "L&C". However, as many community members know, no one speaks the ampersand when refering to themselves or a campus/school organization. Not using the ampersand for this feature is a specific recognition that if you have that level of relationship with us, we know that you don’t use the ampersand. For lack of a better term, it’s our secret handshake.

Blogs

This on is simple; we already have so many of our members that blog, we are simply going to show the richness that is already there.

Informational Content

Moving below the main feature, we have three primary areas for different forms of dynamic content — meaning always updated all the time. From left to right, they are: People, Headlines and Events.

People

If you’ve seen the new Expertise and Excellence appear on the home pages, you’ll recognize a lot of what were doing here. Basically, People simply has little blurbs and information on the great things that our community members are already doing, be it getting an award, speaking and an event, or being published. It includes all three schools and students, faculty and staff.

Headlines

This is the most recent news from a variety of Lewis & Clark sources.

Events

This is event-related content from on campus and off, so that we can include events held in Portland (among other locations). If you’ve noted the "On Campus" section of the home page, this would be very similar without the limiting name.

Site Footer / Photo Strip / Portland-scape

The site footer is exists beneath the informational content and like the site header is likely to exist on every page, in a very similar form. It holds all the basic reference and contact information, as well as the shield and official wordmark and one additional element. The colored band that marks it’s upper edge is actually a photostrip. If you were to move your mouse over the strip, it will move, highlight slightly or perform some other action indicating some additional action is available. (This is not something you might find on your first visit, or maybe not even until your tenth, but that is by intent. So you get that "Ah-ha!" experience when you do find it.)

Once clicked, the photo strip expands to fill the space that is currently yellow in the footer. You would be able to slide the strip left and right to see more images and likely click to expand an image further. For inside pages, the images available in the strip would likely be content-specific, or determined by the content editor(s) for that page.

Another option that we are also still considering is the use of this space (that which the photostrip currently occupies) to add an interactive Portland-scape. This would effectively help us bring in more of our “In and Of Portland” theme into the design, but it is still in the drawing-board stage.

Page Feature

Now returning to the center of the page and the primary content of the page. Between the above example and this one, you can see two versions of how this space might be used. We will begin using the short phrase "Uncommon Journeys" for some, but not all of the stories that we tell in this area.

Function

Functionally, they will either have built-in audio and video, which would be watchable right in the page, or link out to a text story with images. (I suppose we could also run a slideshow in the space as well — the intent is left open for the best adaptation for the story to tell.)

Timeline

Each story would be up for at least one day and could persist for as much as a week or so before being replaces, depending on the nature of the content. We

Design

As for design, we will be writing rules to define what images work best in this space as one requirement is that the "title" image must break the left boundary of the page. Naturally, building a resource of imagery is expected to be a challenge, but a doable one.

Content

Finally, as I hinted above, the content is not necessarily going to tell a story the we would call an "Uncommon Journey". Frankly, the consultants felt that there are always going to be things that we might want to feature and forcing that content into a specific container would only hinder us. So, while no ratio yet exists, I would expect that the Uncommon Journeys content would hover around fifty percent with the balance made up of other types of content.

Call to Action

Just to the right of the main feature (and beneath the internal content links) is the Uncommon Journeys call to action. We do know that building a content stream to supply us with stories for this section is going to be a significant (but not insurmountable) challenge, and at that same time, that building a better connection with our alumni and internal communities was hgihglighted as a significant need by both the market research and our own meetings in this process. The call to action helps with both.

Please reference the site header regarding the link between the signature (as shown in the Brook Brisson example) in the main feature and the word mark.

School Home Page: Kroger

What are the differences?

Whenever you are within a school site, that school’s navigation is open and available. It features sub-navigational elements, and each of which has a drop-down menu, so that you can quickly move throughout the site. (And again, since this navaigation would exist everywhere on the site, it’s much harder to get lost within a school site, or even between the schools, since the exposure of the navigation gives you an immediately visible response of where you are.

The main feature area is thinner, to allow for additional “above the fold” school-specific content. In addition, each school has a defined accent color for navigational and title elements.

The word mark at the top of the page varies depending on the school. For CAS, it will be written by a current student. For both the Law and Graduate schools, it will remain as the Goudy wordmark.