A prototype of an educational microsite created for a client as part of my Design and Layout for Electronic Media module at City University London. The client was looking for ideas for microsites and new web features to build on their existing site's readership; because the client's organisation had been making a point of trying to get teachers to use some of the site's content with their students, I pitched an educational microsite that would contain some repurposed existing content as well as new content, designed to appeal to a young audience.

Because I was creating a completely new concept, a strong focus on information architecture was required. I spent a lot of time organising content into appropriate "topic" categories, and my initial wireframes included global navigation allowing the user to browse by topic, as well as by medium. After consultation with the client and lots of further sketches and wireframes, the design evolved to place a greater focus on learning materials for students and resources for teachers, as seen in my Photoshop mockups--content for students was organised under three categories, while a section below offered information for teachers. Content pages were designed to include recommendations for other content the reader might be interested in, to keep him or her interested in the site.

The final prototype consisted of four pages designed to be published as a microsite beneath the organisation's original header and global navigation, and adapted to allow for advertising space. The full concept included a learning management system designed to get students more engaged with the site's content--students could log in to write blog posts and compete in quizzes under the supervision of their teacher--but this was not sketched out or prototyped due to time constraints.

I used jQuery for the first time while constructing the prototype--having been introduced to it in class, experimenting with it was a priority for me. I ended up including jQuery tabs as part of the prototype's navigation, however they're not fully functional and don't do the best job of promoting usability thanks to their lack of URLs. In a real build, I would make sure that my tabs functioned like proper global/local navigation--and section, subsection and article pages would always have unique URLs.

View project (HTML/CSS/Javascript prototype)
View initial wireframes
View later wireframes and sketches
View Photoshop mockups

More geekery

DATA VISUALIZATION - Where do Americans get their calories?

DATA VISUALIZATION - Superfruits: Google search popularity over time

DATA VISUALIZATION - Calories, sodium and sugar vs price


Global air temperature

GAME - Fish Pond

Social Cookbook

What we eat

IA - The Data Junkie


UX - CheckItOut