![The WhiteBoard [home]](http://www.lclark.edu/global/images/transparent.gif)
Information Design
LC Redesign: Strategy Phase Complete
- 6 August 2008
Prior to my arrival here at Lewis & Clark, the institution went through a very significant strategic communications process. This process highlighted communication issues that we as an institution needed to address to be more successful in communicating to our various audiences. (Haven’t seen this? Read the Message Platform.) Long story short, one of the major initiatives to come out of this process was the need to redesign the website, and in particular to bring its design and content in line with who we are as LC.
So, we went through an RFP process to get some help with what we expected would be a major effort and after six proposals and two presentations, we selected White Whale (WW), a small company that consults on educational web design and development. Frankly, they seemed like the coolest, smartest people around and in mid-March when we began to work with them, we learned our expectations were right on.
The first thing we did was set out what out goals were for this phase of the project — the strategy phase. Specifically, we outlined three primary goals:
- complete a visual redesign of the home pages, to make the site better reflect who we are as a community;
- re-architect the navigation and content to make it more accessible and again better reflect us; and,
- assess the future of our content management system to decide what features or abilities it should have, and whether Trillium would be able to fulfill those needs.
The goals above are the big picture, and each has developed a number of elements that are also significant, but we’ll tackle those in the discussion that is to follow.
And what is to follow? There is a lot of discussion to come here — White Whale started us off with meetings across the three campuses with all kinds of people and the discussions that we had have formed a good part of the direction this redesign has taken. Since that time, we’ve worked through the major goals above completing our strategy phase and are ready to present all of this for comment from you, the LC community.
So, without further adieu, we’ll start with the visual design in the next post, then bring in further discussions on the navigation and content, as well as Trillium in the next few posts. And look for posts from Jason Pontius, president of White Whale will be jumping in here to author and comment as well.
I do hope you’ll participate. We’ve spent a good bit of time talking about ampersands and word marks, in addition to how to foster “community” and reduce the siloing that occurs both without and within the three schools that are Lewis & Clark. But that isn’t enough, we want your thoughts, impressions and opinions on this redesign.
Join us.
David W. McKelvey
Director of New Media
Public Affairs and Communicationsmckelvey@lclark.edu
Filed Under
LC Redesign: Visual Design
- 6 August 2008
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
11 people have already made the whale happy; but who couldn’t be happier?(Go ahead, make a comment…)
Carla Almaraz: How about a portal?
- 13 May 2008
Here’s another recent comment regarding the redesign from Carla Almaraz which I’ve excerpted:
“Here’s my $0.04 (allows for inflation). My biggest grumble is that the entire school website is directed at an external audience. I’ve been told that the reason for this is that ‘people search for things.’ Trying to find a department is next to impossible, especially if you don’t know the formal name of the department. If we just had a single portal to navigate to all the internal departments, that would be so helpful.”
Carla, thanks for recognizing that the external orientation of the website is not likely to change — after all, we need to make the site the most friendly to those who have the least knowledge of us, our organization and our taxology. While a good website architecture can help solve the simple problem of identifying and navigating to offices and departments (and I expect to have that post redesign), your suggestion of creating a space where you would be able to find all the things in which you are interested is also on the table.
And now, I’ll make an important distinction that your email touches indirectly. You’ll note I didn’t use the word Portal with a big “P,” or even portal with a small “p,” because like content management system (CMS), they can mean so many different things.
At this point, we are not considering firing up a huge piece of Portal software that intends to be everything to everyone. We are very seriously considering creating a personal space (or spaces) where you would be able to find links, news, and other information directed at specific “internal” or “community” audiences and where you might be able to customize the page to your needs. How this will be designed and deployed is yet to be seen, but we see the need and think it will help everyone navigate through the site far more easily.
Filed Under
One person has made the whale happy; will you?(Go ahead, make a comment…)
Bill Penn: Rethinking Trillium, the Calendar, Email-lists and Design
- 13 May 2008
Bill Penn recently took the time to email about some of his frustrations and suggestions for the redesign. His comments relate to both technical and design issues, and I thought them instructive, well-organized and well worth including here. Thanks to Bill for allowing me to post his email — it follows with my comments inserted where appropriate.
—
David,
Please find some comments here on the web site redesign.
I maintain a moderate corner of the law school’s web site, the Public Interest related pages. These pages are spread out between different areas, some is in its own corner, the LRAP, and most of the rest is located in career services, with a tangential relationship to the student group PILP. There is also probably something out there in the admissions department or development department about public interest scholarships that I need to track down.
Because of this distributed nature, I have had to create my own snazzy navigation bar and menu. You can see this in the one area that I have gone through and re-designed, the LRAP page : http://www.lclark.edu/org/lrap/
This was a pain in the tuckus to put together as the only css available to mortals is inline. This means for the flashy hover color changes I had to resort to javascript, and I had to put together and hand edit about four pages of html, most of it repeating.
Comment 1: The ability to maintain at least document level css would be a godsend in a new cms even if the css that users are allowed to create is forced to be subservient to a site wide css. Additionally, my need to create two levels of sub menus shows a need to allow content creators to have some way of creating and maintaining themselves sub-navigation levels.
Response: While I haven’t yet figured out how the CSS will or will not be available to edit/modify, I’d expect that any modifications would happen in conjunction with New Media, as we’d want to preserve the over-arching styles as much as possible, while working with the office/department in question to give them input/ownership over the design. In any case, inline styles would not be necessary (nor allowed) and your navigational solution, while inventive, wouldn’t be necessary, since the design would include it directly.
-
I saw a comment about different contexts for different users. The law school career services has five contexts in its site, students, graduates, graduates and students from other schools, prospective students, and employers. The result is that most of the contexts other than students is under-maintained, and largely blank. Much of the information that is valuable for one context is valuable for another, so that brings me to:
Comment 2: Contexts can seem like a great thing, but if a high percentage of information overlaps contexts, it is better to have a page or three that branches off to serve that community than to maintain five separate areas.
Response: Indeed this is true — part of White Whale’s work is help us re-organize the content into a structure that makes sense given the audiences and the available information for them. Where information is specific to the audience (and exists), segmentation can make sense. Where it doesn’t, we’ll do something different that does.
-
Event overlap is horrific at the law school, something is needed to integrate the personal, event and web calendars into one. Something is needed better than the current ems calendar, and something better than meeting maker is needed preferably with the ability to view multiple calendars in one window, and the ability to turn on and off individual calendars and a snazzy ability to plug a calendar into a web site. (Think google calendars, or Apple’s calendar server and ical Outlook finally supports ics and ics subscriptions, so an Apple calendar server could do nice things.)
Comment 3: Calendar management and display of calendars on the web site should be considered.
Response: Separate from the redesign, we have purchased EMS master calendar (which interfaces with the VEMS calendar used to schedule space) and we hope to deploy that as the “authority” of scheduling, where we might push content in and pull it out for display/use in the website. EMS Master Calendar includes a web interface, but we may opt to do something different, depending on the web redesign. And as you suggest, this may also include a mash-up of web services, or at least the ability to push to them and their formats. By default, EMS Master Calendar publishes RSS feeds.
-
Much of the site parts that I manage and I imagine most of the law school’s web site involves chunks of largely static information, and small bits of news updates.
Comment 4: An ideal cms would allow for the integration of blog like (hot news) sections of pages with more static elements, the blog like parts could rotate out to a news archive so people could look back at past postings. Perhaps users could have a central bucket of blog/news postings that they merely apply a tag to for them to appear in the proper place or places on the web site. A blog section of a page could be told to pull the latest entries from one or more tags… I could see myself using all public interest tags for the public interest home in a condensed headline only format and then in the individual areas just using the tags for that area in a full or summary view.
It would also be nice for end users and allow for a transition away from the 1,000,000 daily mailing list e-mails if these blog/hot news sections could also be served out as rss feeds. News updates offerings and events should be a pull technology like a feed, alerts and warnings should be a push like e-mail. The design and ability of the web site stretches beyond its bounds to other areas of our work.
Response: My thought exactly, and one I’m hoping to employ in the redesign. News would be a shared resource and able to populate any page on the website, depending on the selection criteria for that page. And, since the Source has been well received, we’re thinking about how we can extend the same form of service to other groups on campus in the redesign.
-
Comment 5: NO TABLES, please, tables were a bad idea when Trillium was made, heck I remember people deriding the use of tables for formatting back in 1996, but still there are unneeded tables in the Trillium page design!
Response: Exactly my plan. Tables will only be used semantically — that is, for tabular data only. View the source of this blog. 
I am supremely pleased that there are people out there charged with thinking about the web page re-design. That is all I can think of, and sorry for the ranting.
Respectfully yours,
Bill Penn
–
William C. Penn, Public Interest Law Coordinator
Filed Under
One person has made the whale happy; will you?(Go ahead, make a comment…)
Rethinking Lots of Links
- 4 April 2008
Here’s a very interesting article at Slate, saying that we’ve just gone too far:
Almost any Washingtonpost.com or Nytimes.com news story demonstrates the sites’ link-happy tendencies. A good example of the Washingtonpost.com’s overkill is this Page One story from Monday about the alleged budget crunch faced by some states. In the first 95 words, the story links Illinois, Cook County, Michigan,New Jersey, California, and San Fernando Valley to Washingtonpost.com landing pages… Of what use are such landing pages? For the reader, little. They exist for the publisher to serve another page of ads and to optimize search engine results.
Links That Stink: http://www.slate.com/id/2188011?nav=wp
Filed Under
2 people have already made the whale happy; but who couldn’t be happier?(Go ahead, make a comment…)