LC Redesign: Visual Design

• 6 August 2008
• David McKelvey

What follows is a discussion of the website visual design in its current state spanning the four home pages (institutional plus the three schools). It begins with the institutional home page and highlights the major elements and functionality, and then proceeds to the school home pages. To see any of the designs below in a larger size, simply click the design.

Institutional Home Page: Brook Brisson

Site Header (navigation/word mark)

The site header (the top of the page through the tan 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 many of you have probably experienced, it’s too easy to get lost on the site, and so every page would carry both the school navigation (tan bar) and the meta navigation (text across the top-right of the page). The search function and word mark are included with this section that will be carried through the entire site as well. (I’ll discuss the handwritten word mark shortly.)

School Navigation

The school navigation appears closed by default on the institutional home page but you will be able to click through to any of the primary sub-navigation from the institutional home page. (The navigation operates differently within any school site; see below.) The views at right show the expanded navigation from each school.

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 WW 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 word mark 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.)

Another example is that 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 offices would lose their ability to help edit their Portland content.

Handwritten Word Mark

You’ll note that the word mark for Lewis & Clark is shown here in a handwritten 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 word mark, particularly in conjunction with a main feature with a matching handwritten signature, is in some form, recognizing that this is Brook’s Lewis & Clark.

The handwritten word mark would not be used throughout the site, but only in conjunction with appropriate content. (The school home pages also treat this element differently, so see those notes below.)

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 dismissible 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 announcements 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 sign up, but then, she would be able to push information of interest to the prospective student’s My LC. (Again, completely and easily dismissible 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 referring 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.

Portland-scape

Still somewhat in the draft stage is the Portland-scape directly beneath the informational content. This would effectively help us bring in more of our “In and Of Portland” theme into the design. We’re still playing with both the design and the functionality, but from the current mock-up, you should get a sense of where we are heading. (Suggestions? Make a comment.)

Site Footer

The site footer is exists beneath the page end and like the site header will be present on every page. It holds all the basic reference and contact information for the main site, as well as the shield and official word mark. Sub-sites are likely to include additional information pertinent to that site/page/content, but a good portion of this content will remain.

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 slide show 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.

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 and story content 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 highlighted 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 Pages

What are the differences?

From the designs are right, you can see that many of the same elements on the institutional home page design persist through to the school home pages, so the following is a discussion of what’s different.

Word Mark

Unlike the institutional home page, the word mark at the top of the page varies depending on the school rather than the content in the feature area. For the College, it will be written by a current student. For both the Law and Graduate schools, it will remain as the official Goudy word mark. In each of these cases, this is an important distinction based on the primary audiences of each school.

Navigation

First of all, 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 navigation 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.

Feature Area

Each of the main feature areas is thinner, to allow for additional “above the fold” school-specific content to be determined by each school. For distinction, each school has a defined accent color for navigational and title elements. (We aren’t fully committed to the colors shown, but they are proving to be our favorites to date.) Also, to facilitate easier content development, the main feature are does not break the left-hand barrier out of the “page”.

Informational Content

As you might expect, the informational content is tweaked to each school’s need. This is not only in the actual content, but also the groupings that are made. For example, “People” doesn’t persist through, although similar school-specific content might.

Portland-scape

To keep the home pages consistent with their enclosed sites and pages, the Portland-scape remains only on the institutional home page.

Filed Under

• Information Design
• Redesign