Category Archives: updates

Homepage Usability

Jakob Nielsen, a key figure in web usability has 113 guidelines for homepage usability. I was asked to use the guidelines to assess our new homepage design. The following is a list of what I considered to be the most important guidelines along with whether or not the new design follows them, and some occasional comments.

Middlebury Homepage Usability Guidelines

Customizing and Personalizing the New Site

One aspect of the web makeover that we’ve heard is quite desired – and that we’ve always included in our plan – is the creation of personalized and customized pages. Over the last few months, it’s become clear that these terms, along with others like portals, homepages, profiles, and the like, can mean differing things depending on context. So in the interest of sharing a common vocabulary, we’ve developed a brief glossary of four different ways that the new site will support personal and custom information:

Portal: a personalized & customized user page for interacting with Middlebury.edu. This will not be published for others to see, but rather an interface you can make to choose the links, feeds, updates, and other information from Middlebury and other sites that you want to easily access. It will be comparable to iGoogle, MyYahoo, etc., but we will not be able to have it structured around widget in first iteration launching in January – implementing a widget-based system will be part of the next phase of development.

Directory Listing: the public presentation of data coming from Banner (department, address, email, phone, office hours, photo, etc.). You cannot edit this material on the web directly, but can update your information within Banner, including adding a link to your profile or personal website. This information will be accessed through the online directory search, and departmental sites can pull staff/faculty info from the directory.

Profile: the public presentation of your information, fully customized and editable by you. You can include feeds, images, video, links (internal & external), and other assorted content. There will be templates for defaults by classification (faculty, staff, student, etc.), with limited design flexibility. Your profile can feed from other dynamic systems – faculty pulling current course offerings, links to recent publications or documents, calendar of relevant events, etc. For most members of the Middlebury community, your profile will be the place to present yourself to the world.

Personal Website: anyone can build and maintain their own website independent of the core Middlebury.edu design and information architecture. Many people already do this, using tools like Segue, WordPress, HTML, or other platforms. LIS Web Services will support building such sites on WordPress and other currently supported platforms (including Segue in the short-term). Anyone can choose to link to their personal website via their directory and/or profile.

Hopefully this clarifies what options will be available for individuals. Please post any questions and comments as we work to implement these features.

Launch of the New Monterey Institiute for International Studies Web Site

The new MIIS web site is nearing readiness for its official launch. After consultation with the web team at Middlebury, we are planning the formal launch of the new MIIS website for September 15.

Dozens of people have worked very hard all summer to develop a framework  for the site that reflects our mission and vision for the future.  A special thanks to Kristen Byers, Lynn McDonald, and all the members of the web strategy team who have worked to assemble our core content, and our colleagues at Middlebury who have worked tirelessly to translate White Whale’s designs into working templates.

There will be a  “soft” launch (providing members of the community with access to the unpublished site) on September 1, to allow an opportunity to become familiar with the site and identify any errors, bugs or other issues. Please watch MIIS@work for instructions on connecting to the site on September 1, and for ways that you can add your voice to the site in the future.

A web site is a dynamic, ever-changing network of information and interactions, so don’t expect to see a “finished product” on September 1, or at any time in the future.  In fact, we ask for your participation in ensuring that the web site is never “finished” — but that it is alive with an ever-growing  collection of current and engaging stories.

Moving Forward with the Design Process

We’ve let White Whale Web Services know that they should proceed refining and improving upon the initial design concept that they presented to us earlier this month. While we share many of the concerns that were expressed via the blog, at the presentation, and in private conversations, we believe that the fundamental concept, once improved upon,  will allow us to accomplish the many, and at times competing, goals of our project.

Here are some of the core issues that we asked them to grapple with in their revision, and in building out designs for the rest of the site.

Quick Access to information

The web site is used by faculty, staff and students as a source of information for daily activities.  Information needs to be easy to find.  Quick links and personal web sites have been proposed as solutions, and as the working models and technologies for these features are being developed, we will need to have user testing to see that they meet the need. Stay tuned for chances to help us make sure that this goal is met.

Pictures of Vermont and the Middlebury Campus

One of the features that attracts new students to Middlebury is the stunning landscape and beautiful campus.  The bookshelf, the multi-colored line design that dominates the home page (also known as the equalizer, or the sticks!) will allow for pictures of the landscape to be co-mingled with stories of academic and social activities, allowing the visitor to find images and other media that represent everything that makes Middlebury a wonderful environment to teach, study, and work. We have also been promised that photography of buildings, people, and landscapes will dominate the second level pages. In addition, we are considering a ‘Middlebury in pictures’ slideshow for those who really, really want images to convey the important sense of place.

The Design Does Not Represent Middlebury

When people see the design for the first time, there seems to be a collective “hunh?”. Is this a College website or the website of a design firm? Is it a college that focuses on design? Part of the problem is that the model that White Whale presented is not yet built using the sort of technology that will allow the visitor to more quickly understand where they have landed. Once built, we believe that as the stories open and a visitor begins to explore , she will warm to the design and understand how this interface can represent a snapshot of life at Middlebury.  What occupies our minds and hearts is expressed through the stories, and a visitor, over time, will understand what makes Middlebury such a wonderful place. The challenge, not unique to this design, is how to capture in a single image the richness and complexity of our multi-faceted institution. We should also note that many people have expressed concern that the home page says Middlebury and not Middlebury College. The decision to omit “College” from the website was made before the webmakeover project, and we won’t be adding it back at this moment in time.

Please note that this is not the end of the design process.  It is a point that commits us to a particular direction, but still affords many opportunities for refinement, enhancement, and improvement. We were thrilled to receive over 120 comments on our blog, dozens of private emails, and to have countless hallway conversations about these designs, and that there was a general although not by any means universal sense of enthusiasm for the direction we are taking. That said, in any open process, there are going to be disagreements and differences of opinion. We have and will continue to factor in a wide range of voices throughout this process. These voices include:

  1. feedback from the blog and feedback sent to us via email and via chat
  2. the professional judgment of our design and information architecture team, and of white whale
  3. the goals of the project as articulated in our RFP, the internet strategy taskforce report, and our analysis of the survey results
  4. feedback and guidance from the senior administration that understand the goals and directions of the College

In addition, we also have certain constraints that we are working under:

  1. our content management system and limited programming resources for customization
  2. the scope of our contract with White Whale
  3. the amount of time we have until we launch in January

As we enter this next phase, there will be ample opportunity for the community to remain engaged in the process. These include:

  1. providing feedback on the soon-to-be-released designs for the second level pages.
  2. providing feedback on the proposed information architecture
  3. helping to decide what should be included as Quick Links
  4. participating in usability testing and focus groups

We will be having another public presentation in late September, and as always, the blog and the facebook group are open for comments and questions.

Unveiled homepage mockups for middlebury.edu

White Whale has shared with us mockup pages of the first round home page design, a small number of examples are displayed here.  Within this explanation, there are many links that demonstrate how this design can be used, and we invite you to explore them all and offer feedback.  Please feel free to share your comments here, on the blog.

From White Whale

Our first round Middlebury home page design is based around a content presentation model that we’ve been calling an “equalizer” or “waveform” for its resemblance to the visual output of an oscilloscope, audio equalizer or seismograph.

Each of these vertical bars contains a Middlebury “story” — which might be a photo, a link to a blog, a short video or audio clip, or a teaser for a longer story inside the Middlebury Web site. These stories will come from the entire Middleverse — of course throughout Middlebury College, but also from Bread Loaf, the language schools and schools abroad, the Monterey Institute, and any other places where Middlebury’s story is being told. Some of the bars will contain campus photographs or inline photo slideshows.

When a user moves his or her mouse over the waveform, they’ll see titles above each vertical bar corresponding to the story the bar contains. When a bar is clicked, it will open horizontally to show the story; the user can either go from there into the site to read the story, or can close the bar and continue browsing stories in the waveform. The user can also scroll the waveform from left to right, up to the number of available stories. In this way, the new homepage can accommodate any number of stories comfortably.

Open stories will have permalinks; in other words, it’ll be easy to link directly to one of the stories in the waveform. So if there’s a feature story about you on the Middlebury homepage, you’ll be able to send your parents a link to the homepage with your box already open.

The color palette for the waveform will be chosen by Middlebury’s designers on an ongoing basis to correspond to the seasonal colors of Vermont. The palette might change four times a year, with the seasons; or Middlebury may choose to adjust the palette more frequently. Colors used in the homepage waveform will continue through the palette used throughout the rest of the site. The palette (and the shape of the waveform itself) can also be customized for special occasions or particular content needs (see below).

Although this waveform content presentation model will appear on the Middlebury home page only, we will produce a “widget” version of the same feature that can be used throughout the site to present feature content in any number of contexts.

There is an easter-egg style reveal of an aerial photograph of Middlebury’s campus, displayed after clicking “Quick Links” or “Directions & Contact Information” in the footer. See below for those links.

These are mockup images only, not functioning Web pages; the live version will be styled to ensure that the navigation links at the bottom are visible on the great majority of computer monitors. They’ll be fixed to the bottom of the screen (unlike here where the image cuts off after 750 pixels vertically).

For easy comparison, open in tabs.

basic

  • Expanded Vermont footer: after clicking “Quick Links”
  • Expanded Vermont footer: after clicking “Directions & Contact Information”
  • Middlebury Design Presentation by White Whale

    [middmedia jantonio jantonio Unveiling The New Website.mp4]

    Thank you Jason, Tonya and Janie for our first look at what the new Middlebury website will look like. I am personally excited about the possibilities that this flexible design will give us to represent Middlebury on the web.

    Also, thank you to David, Bob, Ben, Tara, Charlie, Adam, Scott and Howie for setting up and running the presentation. Great teamwork!

    And thank you to everyone who attended the presentation and have been providing feedback. Please keep it coming, we want to hear what the community has to say.

    Evolution of the MIIS site design

    I thought it was about time we shared some of the eye candy from White Whale that we’ve been working with here at MIIS over the last couple weeks. The homepage design is progressing nicely; we have also started work on the inside page designs and have seen a preliminary design for a themes landing page.

    Many of these designs will continue to be perfected before the MIIS site launch on September 1.

    Click on any of the images below to view a larger version.

    Homepage Design Round 2


    This homepage design attempts to incorporate the themes element into the original Horizon design. This design experiments with using a 2-column layout. We also chose a dark blue background over the original grey.

    Homepage Design Round 3


    Back to the original 3-column design, but experimenting with some slightly different colors.

    Inside Page Design 1


    The first stab at an inside page design.

    Inside Page Design 2


    A slightly different take on an inside page design that includes space for an interactive sidebar.

    Inside Page Design 3


    The current live version of an inside page design. In addition to the sidebar, it also includes a title card that displays the breadcrumbs, page title, and introductory paragraph.

    Theme Landing Page


    The first shot at what a theme landing page might look like.

    White Whale Unveils Middlebury Web site Design

    On Thursday, July 23rd, at 1pm (10am PST), White Whale will be presenting a new design for the Middlebury website. People at can participate in the unveiling in two ways.

    Join us in McCullough Social Space, where we will show the unveiling.

    –or–

    Log into the Elluminate session using the instructions here:
    Web Access for Design Unveiling

    Please join us as we take a look at the first Middlebury design in the Web makeover process.

    Web Makeover Update

    We are writing to give you an update on where things stand with the web makeover project.

    We are still on-schedule for a January launch of the new Web site. To get there, here’s what we’re doing this summer.

    1. We are putting together a list of Web sites that need to be converted, and identifying the people in charge of those Web sites in order to connect them with a project manager from the project team who will guide them through the process of converting their site to the new platform. To support this process, we are also planning a series of workshops, training sessions, and work sessions. We are also developing a workbook that will help explain the process. The list of sites that we know need converting, and our understanding of who the contact person for that site is, can be found here. If you have a Web site that isn’t on that list, please let us know by sending email to jantonio@middlebury.edu.

    2. Our design firm White Whale will share with us their designs for the new site on July 23rd, at McCullough Hall, 1pm.  If you aren’t on campus, we will be providing instructions to view the presentation online.  In addition, we’ll be posting links to these designs on the makeover blog. (For those who might be interested, you can see the preliminary designs for the Monterey Institute for International Studies).

    We will need your help on both these efforts. For the Web site conversion, we’ll need each office, department, program, and group that maintains a Web site to carve out time in the coming months to think about their Web site and what they want to do to improve it. For the review of the designs, we very much welcome input from the community about the designs that White Whale provides us. It’s our Web site, and while we won’t all agree on the final design, we want to have an inclusive, rigorous, and thoughtful conversation about the ideas proposed.

    Best wishes,

    Mike Roy, on behalf of the Web Makeover Team

    Unveiled homepage mockups for miis.edu

    Design Mockups

    Without further ado, I present the design mockups for the homepage of miis.edu. Click anywhere on the mockups to see multiple views (expanded navigation menus, etc.).

    Design 1: Horizon

    Horizon homepage mockup

    Features

    • Horizon line header image that rotates on a regular basis; creates a sense of place yet also implies that the work done at MIIS is global and transcends physical boundaries
    • Blowout navigation menus that serve up dynamic content and stories

    Design 2: Themes

    Themes homepage mockup

    Features

    • Thematic pages that aggregate content from across disciplines that is related to a common theme
    • Incorporation of the Institute’s tagline

    Things to Keep in Mind

    • These color palettes are not final; White Whale’s idea was to create an array of colors that aren’t used in flags.
    • Representing Middlebury on the site is both necessary and complicated; White Whale has suggested a few alternate names for OneMidd, but utilized the term OneMidd in both of these mockups.
    • We really like the aesthetics and dynamism of the first design and the thematic approach of the second design; the folks at White Whale are looking into creating a design that will combine the aesthetics of the first design with the themes from the second design.

    What Do You Think?

    Please take a look at both of the proposed designs and leave feedback in the comments. Be specific; we want to hear about elements you like or dislike and why.