Homepage Redesign

Posted by jw285 at May 05, 2014 10:04 PM |
This week we launch the newly redesigned University homepage.

The homepage redesign has been quite a long time in the making because the homepage is one of the most prominent and politically sensitive pages on the entire website. As such we took quite a methodical and research led approach to the redesign and I'm hoping to give you an insight into the whole process in this blog post.

The brief

To create a design that represents the University well to the outside world in a competitive HE market whilst also satisfying the wants/needs of our various external audiences and internal stakeholders.

The starting point

Just to refresh your memory, this is what the homepage used to look like.

The old homepage

The redesign process

Step 1: Analysing the competition & getting inspired

One of the first things that we did was to look at the websites of over 200 educational institutions from across the globe. We also looked at websites from other sectors such as the entertainment and e-commerce industries to form what we referred to as 'the wall of web pages'.

The 'wall of webpages'

Step 2: Testing the designs with our audiences

Next we selected a number of different designs to test with our primary audiences. In this stage we were trying to ascertain which designs were most popular/effective and why. We asked the users to comment on things such as colour palettes, use of photography, feel/mood, layout, presentation of information and what information they felt was most important.

User testing

Step 3: Link tracking and analytics

In parallel to step 2 we also used web analytics to get an understanding of which links people regularly clicked on and which they didn't.

Step 4: Evaluating the findings

Step 4 was to sit down as a group to interpret our findings and attempt to draw sensible conclusions to inform the redesign. This involved everything from how the information should be ordered and presented to what colours we should use and mood to achieve.

Step 5: The initial designs

Step five was to mock up some designs based on our findings. These were flat images created using Adobe Fireworks (an image editing program similar to Photoshop), not functional web pages.

Initial homepage designs

Step 6: Stakeholder engagement

Once we had a set of initial designs we set up a series of meetings in order to present the designs to various stakeholders within the University (such as representatives from Marketing Communications, Student Recruitment, Distance Learning, the International Office etc.) in order to get their feedback.

Step 7: Design updates

As a result of the stakeholder engagement a design was selected to take forward but it went through a series of updates, some of which are shown below.

Homepage version 1

 

Homepage version 2

 

Homepage version 3

 

Homepage version 4

Step 8: Approval

The final design needed to be approved by several people including the Director of External Relations, the Registrar and the Vice-Chancellor’s Advisory Committee (VCAC).

Step 9: The build and testing

Once the design had been approved we could begin building the webpage, ensuring that it worked effectively in all major desktop browsers and mobile devices.

Dreamweaver

Step 10: Launch

After seven months the redesigned homepage could finally be launched.

New homepage on desktop and mobile

What next?

Now that the new homepage is live doesn't necessarily mean that it's finished. In fact like all webpages the homepage should continually evolve to keep abreast of changing technology, design trends, user habits, the HE market, University goals etc. We have to monitor its effectiveness using things such as web analytics and user feedback and make improvements and amendments as necessary. If you have any feedback of your own then feel free to let us know (email webteam@le.ac.uk).

Share this page: