University of Bath
Awarded The Sunday Times University of the Year 2011-12, the University of Bath is a leading British institute for further education, featuring an extensive website spanning its vast array of courses and faculties. With in-house technical capabilities and web services, and with each department operating as its own separate entity, the university wished to maintain the individualistic nature of each area.
Following a competitive tender Alienation Digital was selected to design a total of 20 new pages centred on the three core faculties of engineering and design, science, and humanities and social sciences, with an additional ‘wild card’ design for the management faculty.
The Challenges www.bath.ac.uk/science
-
Integrate with existing University branding.
In the brief, the University of Bath originally outlined that it wanted each department's web page design to be developed like an individual and distinct homepage. The aim was to ensure each department retained its unique character and control, enabling each to continue operating its area of the website separately, as if it were a different website altogether.
-
Develop more distinct areas for each department.
Appropriately handle differences between departments, i.e.: The Maths department at the University of Bath is the leading Maths department in the UK, so unlike other departments they were not looking to use the website as a 'marketing' tool to attract new students, but rather to qualify applicants and attract only the highest calibre students.
-
Better understand & meet user needs.
Managing input from multiple stakeholders – Alienation Digital had to provide a platform upon which all involved could input efficiently to the project and feedback on processes at all times. With so many perspectives and opinions it was critical to ensure everyone was kept informed on the project's progress and all feedback responded to appropriately and in a timely manner.
Research - Getting below the surface www.bath.ac.uk/hss
Alienation’s team conducted extensive research to analyse the functionality and requirements of an effective university website and evaluate the best way to approach the challenges outlined in the brief.
Competitor Analysis Bath University 2011 - Present
Research into the websites of faculties from peer universities identified the pros and cons of other designs targeting the same demographic.
This approach was taken as Alienation realised the challenge was far more diverse than simply analysing one university against another, but that each course had to be compared with its equivalent elsewhere as it had a unique character and drive of its own.
Stakeholder Research Bath University 2011 - Present
30+ Individuals with input into the website design process were asked to fill out a survey compiled by Alienation Digital.
User Journey Analysis Bath University 2011 - Present
Analysis of how the user comes to the University's
website and individual faculty pages was undertaken.
-
Search Engine
Research into how the user arrives at the University website and in particular the course pages was conducted, looking at keywords and user journeys.
-
Menus
The main menu, and sub menus, support navigation of key site areas, thus acting as crucial elements in shaping the user journey through the site.
-
Calls to Action
Calls to Action (CTAs) guide the visitor through the website, meaning the University can better plan the user journey out to some extent.
As a result of this research ...
Creating a more informed digital solution www.bath.ac.uk/departments
-
Competitor
Best practice was identified by this research, underlining the hierarchy of importance of different modules and forming the basis of the questions asked in the stakeholder survey.
-
Stakeholder Research
Responses from survey informed the design process, making sure that all those elements considered important were the most prominent on the page and so on, thus better meeting the client's and their users' expectations.
-
User Journey
Findings of this analysis resulted in the University deciding to make the faculty menu the top-level menu, removing the university-wide main menu from the course pages, so as to better guide the visitor to desired areas.
What makes it innovative www.bath.ac.uk/engineering
Brainstorming & Ideas
The original brief asked for a unique and different design for each faculty, however we felt this would have led to a disjointed and inconsistent University website. Our solution was to promote a consistent visual identity through the creation of a module library, from which they could construct their own pages. Each faculty was distinguished with its own colour theme, creating a University-wide complimentary palette.
Detailed Drawings
Alienation’s design team developed a series of detailed drawings together with full justifications for each module and its variations. These drawings illustrated the purpose and functionality of each module (covering all standard styles of graphs and charts), to show the flexibility of this solution and ensure all bases were covered.
Bringing it to life
These detailed drawings were then designed in line with the styling developed for the new University course pages. The vast library of modules then provides a bank of resources, which can be combined in countless different ways to produce a variety of results according to each department’s differing needs.
The Magic Touches
Alienation developed the web page designs and modules using a combination of Javascript, HTML & CSS. All code was developed to be as accessible as possible, meaning that users could still easily access content even when Javascript is not enabled within their browser. Modules were all designed with customisable functionality to allow the University to manipulate the information displayed within the charts and graphs.
Custom modules
A bank of bespoke & flexible modules, which can be used to generate countless design combinations.
-
Basic container
A text module that can be used for any custom html areas, to allow maximum flexibility over content entry.
-
Text with date
Allows a block of text to be displayed along with a date in three different width options, i.e. for an event or article entry.
-
Introduction modules
Gives the ability to display introductory/teaser text to multiple articles, with the title linking through to the full article.
-
Introduction & leading article modules
Provides the functionality to display introductory text to multiple articles and a leading article, i.e. within a distinct container to highlight top stories.
-
Galleries
A variety of gallery modules displaying images and/or videos with associated text. These gallery modules feature previous and next arrows to allow for easy navigation, and clicking on an image results in the image or video opening in a larger lightbox.
-
Data visualisation modules
The ability to display data in a variety of different charts and graphs with accompanied text, to visually enhance key statistics and information.
-
Menu module
Ability to display a list of menu options and titles that link off to articles/pages.
-
Events calendar
A number of different mini calendar modules that also allow for dates and text to be pulled out, giving the University a number of options to highlight key dates and events.
-
Link list
A module that allows for lists of links to be easily displayed.
-
Text with image
A basic module displaying an image with associated text.
-
Table
The table module allows the University to display mini tables of information, such as course rankings etc.
-
Text with date and image
A module that displays an image with a date and associated text.
-
Text with 3 images
A list like module displaying a column of three images with associated text.
-
Introduction x2 with leading article
This module displays a leading article with associated text displayed below, followed by an image with text below that again.
-
Introduction x2 with leading article and dates
This module displays a dated leading article with associated text displayed below, followed by a date with text below that again.
The Results www.bath.ac.uk/science
How has this helped the
University of Bath?
The new designs and modules meet the high Visual Identity Standards of the university. In correlation with the original design brief, Alienation has utilised powerful visual data to facilitate navigation, further engagement and create a strong identity for the institution. Social media has been integrated to encourage communication and assist access to vital resources.
What they said
Full of ideas and having a very positive attitude towards the challenges of designing for Higher Education, Alienation Digital has produced fantastic results. The design team assigned to our project, was easy to work with and produced an attractive design that not only complimented and adhered to our existing Visual Identity, but also enhanced several areas of the user experience."
Phil Wilson Web Development Manager University of Bath