David Little

My Birkbeck case study

The My Birkbeck website is a “one-stop-shop” website for students of Birkbeck, University of London containing administrative information relevant to  students’ needs.

The website was designed to support the work of the new student support centre.

The site had the following interaction design requirements:

Home page navigation

The home page had a number of elements which requiring creative interaction design, including:

• “Spotlight” stories
• “Birkbeck on the web” user-generated content

Spotlight stories

The home page features four spotlight stories – items of general interest to students pertaining to the stage of the academic year (application and enrolment, exam information etc.).

The challenge was allow users to navigate between the four stories whilst remaining on the page and not overload the page with text and navigation elements.

Whilst the original design suggested a carousel approach, the mapping between story and controls was not obvious.

A carousel was adopted showing a story with a call to action to find out more, a decorative image and four clickable navigation areas containing the titles of all four stories, colour-coded in order to differentiate them. Clicking on one of the stories, “rotates” the relevant story into view.

To find out more, the user completes the call to action and is led to a new page.  The original prototyped element created with HTML, CSS and jQuery was used in the final site build.

Birkbeck on the web

In order to promote greater student engagement with the website, a “Birkbeck on the Web” section of the home page displays a list of phoos taken by Birkbeck photographers, added to a specially created Flickr group. Carousel functionality was also adopted but in this case it has a different navigation model, using “Previous” and “Next” buttons to scroll the image carousel two images at a time. The images are hyperlinked, taking the user to the relevant Flickr photo page.

Navigation of page content

As the My Birkbeck website is an agglomeration of student-facing information, many pages contain a number of links.

In order to avoid overloading users with information and to organise the information into themed chunks, links are arranged by a clickable heading element which reveals bulleted lists.

The headings are accompanied by a visual cue suggesting that the lists are either hidden or expanded in the form of an arrow which changes the direction it points to depending on the state of the list (left facing for an unexpanded list; down for an expanded list).

Interaction design for logged-in editors

The My Birkbeck website is built using the Plone open source CMS. Editorial staff can log into the site and add and edit page content using the CMS’s tools.

Due to the complexity of the site, several content types can be created by editors, depending on the area of the site. The site contains areas relating to service areas of the College (e.g. Computing Support, Disability Support etc.). Each of these has its own news section, a story from which also appears on the My Birkbeck home page.

The challenge was to allow editors to only select one news story to appear on the home page – if they selected more than one they should be alerted to the fact that there was a story already appearing and they could replace this should they wish, or cancel the operation.

Editors should “stay on the page” whilst editing in order to reduce cognitive load, so the dialogue alerting them to the presence of other news stories is generated inline dynamically (using a jQuery Ajax component). The dialogue box is hidden following the successful completion of the task.