University of Reading home page

The structure of the University of Reading home page remained largely unchanged from 2007-2012, during which time user’s expectations and technology had both changed, and the information and services provided by the University online had increased massively. The redesign of the home page was managed as a series of discrete stages.

User testing had demonstrated that people do not use the course finder search box. The aim of the first stage was to increase its prominence, and to improve hierarchy by aligning it more closely with supporting information about studying at the University of Reading.

This was followed by the introduction of a deep footer, containing structured lists of links to frequently accessed information and services. The challenge here was to maintain distinction between separate lists within the deep footer, while ensuring that as whole it takes second place to promotional and recruitment information. Two further minor stages saw a de-cluttering of information and improvements to the layout.

The final stage had two goals. First to increase focus on promotional spaces, and second to implement a responsive layout. This second goal allows content to reflow to make best use of the screen-size of the device being used to access the home page, be it mobile phone, tablet or desktop computer.

My role in the project has been to:

  • Carry out user testing to see how people actually use the home page when looking for information about studying at Reading.
  • Collaborate with colleagues to define requirements, using research and analytics data; and to produce a wireframe of the final stage of the redesign.
  • Create design mock-ups for each stage of the redesign, illustrating how improvements will look and function.
  • Draw on the current home page and the final stage wireframe to ensure the design of each stage provides a smooth transition towards the agreed goal.
  • Restructure the HTML and rewrite from scratch the CSS and jQuery code to current best-practices, and to create a solid foundation for future stages to be built on.
  • Make use of emerging responsive web design techniques to ensure that the final design is as device-agnostic as possible.