• OCC Login screen showing new branding and elastic layout.
• User logged in. Once the user is logged into the OCC, they are presented with a screen of personalised content.
• User layout preferences. The user can choose two layout options and three typefaces sizes.
• Typographic hiearchy. The OCC is predominantly text based, therefore a good typographic structure is vital for usability and legibility.
• Workshop Resource Centre. If an IBO teacher is a workshop leader, when they log in, they are presented with the newly designed WRC.
• Pack creation. Every workshop leader needs to create packs (pdfs) from a library of documents.
• Pack creation. This application acts like an ecommerce shopping cart to pull all the documents together for them in an easy, intuitive way.
• Typographic hiearchy. As in the OCC, the WRC is predominantly text based, therefore a good typographic structure is vital for usability and legibility.

OCC Login screen showing new branding and elastic layout.

Background

The International Baccalaureate Organization (IBO) is a recognized leader in the field of international education. Founded in 1968, the IBO currently works with 1,782 schools in 122 countries to develop and offer three challenging programmes to more than 200,000 students aged 3 to 19 years.

To support the needs of the teachers, the IBO developed an Online Curriculum Centre to serve curriculum publications and documentation, and to facilitate interaction, online, between teachers.

In addition to the OCC, the IBO has developed an application to collate publications for use at workshops—the Workshop Resource Centre.

Objective

With the redesign of the OCC and WRC, there was a requirement for both sites to be more web standards compliant and to increase accessibility and usability. In addition to this, both sites would be produced in four languages: English, French, Spanish and Chinese.

A brand identity was also required for both sites. They were to sit within the IBO master brand, but also have their own identity. Typography, colour and grids were to be a particular consideration due to the multi-lingual aspects of the site.

Solution

The project began with an in-depth consultation period with the IBO. Personas and user flows were developed, based on user research, in order to better understand the OCC and WRC audiences. The personas were used throughout the developement and design period to sense-check the design decisions we were making.

A large proportion of the project was defining content deliverables in the form of wireframing. The information architecture was completed and wireframes were based around that and a detailed content audit to ensure we could obtain a clear set of template deliverables. Then we could begin on the brand and design development.

The branding for the two sites was challenging. The IBO master brand had to be adhered to, but there was a requirement for the OCC and WRC to have their own unique identites, whilst also ‘belonging’ to each other. This particular problem was solved but a common information architecture, grid and typography but a change in colour way. This meant, in practical terms, that the structural templates (grid, type etc) could be developed for both sites and then a ‘skin’ of colour applied to each site.

Both sites validate to XHTML 1.0 Strict, and use CSS for presentation. The web standards approach to the client side build of these sites helped with the many user configurable and language options they have. In addition to four languages, there are two colourways and three different layout configurations; all of which are controlled by different stylesheets. This cuts down maintenance and increases speed for the user.

The OCC and WRC are due to go live this year.