University Website Re-development Project (2014/15)
In 2014 the University of Leicester embarked on an ambitious project to introduce a new web content management system (WCMS) and marketing platform, Sitecore. Effectively we were starting to build the entire University’s public facing website again from scratch with brand new design, architecture, content, and governance.
My role
The project team included many colleagues from several different teams and divisions within the university, and also external web development companies. In this initial phase of the project, my role primarily focused on the front-end development, user interface design, and user experience.
Research & stakeholder engagement
One of the first things we did was engage with relevant stakeholders (colleagues from other teams and divisions, management, target audiences etc.) to get a firm idea of the requirements.
(Above) Meeting with stakeholders to gather requirements, June 2014.
We also researched other websites, from various sectors (education, commercial etc.), for examples of best practice. In parallel to this, colleagues from the Web Team conducted user research to form personas and plan user journeys.
Initial ideas
Sketches were made to illustrate our initial ideas for the various page types (e.g. course page, landing page, content page, search page etc.), navigation options, user journeys, and general functionality.
(Left) How a web page might display on a small screen device.
(Right) How the course search might look on a large screen device.
(Right) How the course search might look on a large screen device.
Prototypes
Next we built working prototypes using the twitter bootstrap framework. The purpose of this was to test and refine the functionality, show to stakeholders, and usability test with potential users.
(Above) A prototype of a course page on various screen sizes.
Establishing a look & feel
In parallel to this, my colleague was developing a look and feel that was appropriate for the University, sympathetic to the existing visual identity for printed material, but designed specifically for web/screen based media. For this, we utilised design techniques such as style tiles.
(Above) An example of a style tile produced to establish the look, feel, and mood.
Combining aesthetics with functionality
Once both the functionality and the aesthetics had been agreed, we built the page templates using HTML, CSS and JavaScript. The templates were thoroughly tested on various browsers and devices.
(Above) A course page template on various screen sizes.
(Above) The site was designed to work effectively on small screen devices such as smart phones and tablets.
(Above) Off-canvas fly-out menus were used to accommodate the global navigation on screen sizes below 768 pixels wide.
Usability, accessibility & performance
Usability, accessibility, and performance were considered from the very beginning of the design and build process. We regularly performed guerrilla usability testing, worked closely with the AccessAbility Centre (an internal unit offering services and support for students with disabilities), used online tools such as WAVE (the web accessibility evaluation tool), and measured performance with Google Developer Tools.
Once we had working examples of the various page types, a colleague performed usability testing with real users. We used their feedback to further refine the designs.
Implementing the templates into Sitecore
For the last stage in the process we worked closely with a Sitecore partner company to implement the page templates into Sitecore.
(Above) An example of a microsite homepage in the Sitecore web content management system.
