iA


Kingston University

by Shareef Ayyad. Average Reading Time: about 2 minutes.

ku-eng-homepage-macbook_mini

This website redesign not only came with the challenges of building a user experience for an international audience, but also involved multiple stakeholders across many departments.

ku-eng-student-profile-macbook_mini

Website analytics and user interviews indicated that students looking to enrol in a course cared less about internal faculty structure and department labelling, and more about the student experience and the faculty’s links with industry. A student zone was proposed (and later rejected), which would feature an array of interviews, case studies, videos, and image galleries, that documented life as a student at Kingston University, and gave career advice and job placement listings.

ku-wireframe-homepage

Early wireframes that attempted to appease all stakeholder requests served as a starting point for the prioritisation of content. In a sense, they acted like a “brain dump” which encouraged conversation between the parties involved.

ku-wireframe-homepage-v2

Later wireframes saw a layout with sparser content, therefore reducing cognitive overload. A hero image/slideshow was introduced at the top left, with hot topics links beside it – both of which cater to the high number of content that needed to be promoted on the home page.

ku-eng-mockup-home

ku-eng-mockup-leaf

To begin to experiment with a visual language, the wireframes were skinned using Adobe Illustrator. Soft greys, charcoal and light blue were identified as being common in modern architecture and minimalist product design, so these became the colour palette. Soft gradients were used to delineate blocks of content, as opposed to using lined borders, to try and mimic the curves of contemporary architecture.

The Illustrator mockup was converted into a Flash prototype to help test navigation options. A second horizontal navigation was considered, located directly below the main navigation, but the prototype proved this was less appealing and at times was lost in the interface. Instead, the content of the page (links and large buttons) allowed users to drill deeper into the website, i.e. a content-before-navigation approach was adopted. The super breadcrumb proved enough of a sign post for users to know where they were in the site, and gave a way for them to jump back to parent pages.

ku-eng-ia

A quantitative content audit was performed to document all the existing website content into a single spreadsheet, which then allowed for a qualitative audit which assessed every page according to how well it delivered on business goals and user needs. I was very pleased to eventually reduce the template variations to only four, making the site more learnable and memorable for its users.

Note: This website no longer exists online due to the merging of the Engineering, Science and Computing faculties, but you can find a copy here for the purposes of this case study.