Our new homepage

After lots of design iterations, development work and usability testing, we’re pleased to say that the new version of our homepage is now live.

The homepage now uses the same new responsive design as the study and research areas of the site, so it’s optimised to work across a range of device sizes from small phone screens to large desktop monitors.

The homepage is optimised to work across a range of device sizes

As well as the change to how the page looks, we’ve also made changes to the content of the page and the navigation that surrounds it. This includes:

More links for internal audiences
We used data from Google Analytics to look at what staff and students were searching for when they visited the homepage. As a result we’ve added several links that haven’t been included on the homepage before, such as timetables and the library. These can all be found under the ‘Staff and students’ menu at the top of the page.

More content about campus and city life
In the previous design there were only four slots available to feature content in, which were also used to feature news and events, so campus and city life could only be included from time to time. This is very important content for prospective students, and we’ve put a lot of effort into revamping our student life content recently, so we decided to give it a dedicated space.

More links to factual content
Lots of visitors to our site just want to find answers to basic queries like when our term dates are, or how to get to campus, so we’ve added these too.

Behind the scenes, we’re using a new system that makes it easier for us to manage the content (Contentful, for those of you that are interested). We’ve also produced a content guide, to help us ensure that any everything we put up is on-brand and conveying the right message.

Updates to pages for current students

Just in time for the start of term, we've updated our pages for current students using the quick fix mobile-optimised redesign.

The pages now look smarter and are easier to use on the mobiles and tablets which account for over a third of their pageviews.

Old style

New style

Removal of personalised content

In addition to the design changes, we've also redeveloped the student homepage. Viewers of that page used to see just a large button inviting them to log in, but 80% didn't do so. We've removed that login option so that everyone gets straight to the news and content that they need.

Removing the login option does mean we've had to remove the personalised elements of the page for now, including timetable and library widgets. Usage data showed that these were very lightly used though so the cost of maintaining them didn't seem justified by the limited use.

Feedback

This has been a quick-turnaround project, so while it's a great step forward there may be room for more improvement. Comments are welcome here on the blog or through the feedback form on the web pages themselves.

Guerrilla usability testing at our open days

With thousands of potential students descending on campus for our open days last week, we had an ideal opportunity to get out ‘into the wild’ and carry out some guerrilla usability testing on the recently launched study at York pages, our new course pages, and a new homepage design that we’re working on

What’s different about guerrilla testing?

In guerrilla usability testing there isn’t a recruitment or screening process to find participants, you’re basically walking up to willing-looking strangers and asking if they’ve got a few minutes to spare. The tests can take place anywhere that you can find people - coffee shops, train stations, shopping centres, etc. Open days are ideal because everyone who comes to campus is going to be in our target demographic!

How we did it

Although guerrilla usability testing is a lot less formal than a lab-style usability test, we still used a script (cribbed from Steve Krug’s Rocket Surgery Made Easy) to make sure that our introductions covered the basics of who we were, what we were doing, how long it would take, and perhaps most importantly, that we would reward participants with chocolate.

Essential supplies for a bit of guerrilla website usability testing at #YorkOpenDay!

A photo posted by Paul Kelly (@itspaulkelly) on Jun 24, 2016 at 8:38am PDT

Before we got our participants to use the site, we asked them a few questions about the course they were hoping to study and what specific bits of information that they’d look for to help them decide if a course was right for them. We then asked them about other factors that would influence their decision to apply to a particular university. Based on their responses we came up with some scenarios on the fly.

What we tested

Over the course of the two open days we ran 17 tests, using both laptops and phones. Each test took around 10 minutes.

As well as course information, our participants looked for information on accommodation, the college system, the city, sport, societies and nightlife.

What we learned

• Everyone likes a Yorkie bar!
• Overall our participants were able to complete all the tasks that we gave them and liked the look of our redeveloped pages. 
• It was reassuring to see a lot of our assumptions validated, especially on our new course pages (eg BA Politics) - students found it easy to tell what they’d be studying each year, and really liked seeing authentic quotes from current students. 
• We got a lot of positive feedback about the in-progress new homepage design, with students liking how it looked, finding it “professional” and “welcoming”. One area that caused some confusion was the section on research, so we’ll be refining that further to make it clearer.
• We found a few small bugs to fix with how the site works on mobile. It’s on our roadmap to set up a device lab so that we’ll be able to catch things like this sooner.
• Several students used the main site search (rather than the course search) to find courses, which resulted in a much less direct path. There’s some work to be done to see how we can improve that.

We’ll definitely be doing this again. As well as the value of the testing itself, it’s always great to get out of the office and meet the users of our site.

Further reading

• The Art of Guerrilla Usability Testing Guerrilla testing - UX Booth
• Guerrilla testing - Government Service Design Manual

Responsive 'quick-fix' live

In February we unveiled our plans for a responsive 'quick-fix' for key web pages. Our aim was to improve user experience across a range of devices, while avoiding the laborious process of rebuilding thousands of pages.

We're pleased to announce that the first pages to use the new designs went live at the end of March.

The About the University pages are now more usable on phones and tablets. They also present a more coherent user journey alongside the newly rebuilt Study branch.

We've begun to roll out these new templates to departments. Many are well underway checking existing pages to make sure they translate cleanly into the new designs.

If you're interested in moving your departmental pages into a responsive layout then contact us at digital-marketing@york.ac.uk to get started. You can even book time in our (very grandly named) Device Lab, to help speed the process along!

More information on responsive designs:

• Introducing a quick(ish) modernisation of the website
• Preparing for and opting in to new responsive designs for CMS pages

Preparing for and opting in to new responsive designs for CMS pages

Before reading this post, hopefully you’ve been to the test site, toggled the responsive styles on, and had a look around. If not, see our accompanying post introducing a quick(ish) modernisation of the website.

If you create and maintain content on the university website you’ll hopefully want to know when we can put these styles live on your pages. This post describes what you and we need to do in order to do that.

Opting in

Departments and sections can opt in to adopt these new designs for their section of the site. There are a few criteria we need you to fulfill to be able to do this:

1. A commitment from you to check all the pages in your section of the site to ensure they display correctly (more details on this below). Note that we’re expecting to enable the new design at a root-section level rather than small sub-sections lower in the hierarchy (ie. all of a department’s pages will switch at once, not a few at a time).
• If it’s really impossible for you to do this checking, and this will be a blocker to you adopting the new design, let us know. We’ll try to help in as many cases as we can.
2. Understanding that, for now, the new design doesn’t include departmental colours. Options for colour will be re-introduced in the future, but we don’t have a timescale for that yet.
3. Ensuring you have the backing of your department to make the change and the authority to sign it off before going live. 

If you can meet those criteria and would like to get involved, get in touch at digital-marketing@york.ac.uk and we’ll add you to our list.

Testing your pages

Before we switch a section of the site to the new design, we’ll need you to check every page in that section and provide feedback on any issues you can see. We’ll provide tools and guidance to help you do this.

Once we kick off a project to switch your area of the site (but not yet - for now just have a look around and use the feedback tool to alert us to anything obvious that you spot), the kinds of things that you’ll need to check for on a page-by-page basis include:

• Does it look right?
  Ensure there isn’t any overlapping text, or strangely over- or undersize images. Check that the submenu is right and that your images are loading properly.
• Is it working?
  On many pages there are Twitter lists, scrolling banner images, tabs, accordion boxes or some other added functionality. Is this still working? Let us know if there is any unexpected or broken functionality.
• Does the content read properly?
  Part of the work we’ve done is to reorder the content slightly, in those cases where the content at the top of a column comes too far down the page. Scan through the content on the page and make sure it makes sense and is in the right order

We’re aware that some of you may be responsible for hundreds of pages in the CMS so this isn’t a trivial task. But if you split the site down into manageable chunks it’s possible to get it done in a relatively short time, and certainly much faster than rebuilding the pages in a new template. It’s also a good opportunity to make sure that the web pages you have are up-to-date, relevant and useful.

Next steps

If you’re interested in adopting the new design, here’s what should happen next:

1. Have a good look around your pages on the test server so you have a good understanding of what the change will look like.
2. Discuss the opportunity in your department and, if you need it, get the buy-in of your senior manager.
3. Let us know you’re interested and when you’d like to do the checking of your pages - email us at digital-marketing@york.ac.uk - and we’ll agree some dates to start on and aim to finish by.
4. You check your pages, give feedback on anything that’s broken and we either fix it or advise you on how to modify the content so that it works.
5. Once all pages are checked and signed off, we’ll apply the change to your live pages.

All of that might sound quite complex, but we think it should actually be fairly straightforward and we’re here to help. If you’d like to discuss it with us, feel free to call Dan on x2047, or look out for another blog post in the next few days about upcoming content clinics where you can come and chat in person.

Introducing a quick(ish) modernisation of the website

Five years ago the proportion of people visiting the university’s website on a mobile or tablet device was just 2%. It’s now over 25%. The need for our website to work better on a range of different devices is obvious.

One of our aims for this year is to update the current site to be responsive: that is, to fit to whatever screen it is displayed on whether that’s a mobile, tablet or computer. We blogged before Christmas about our plans for rolling out new responsive page templates and what we’re introducing today is part 3 of that plan - an incremental improvement to existing pages that can be applied to all CMS pages.

The new study pages, as they appear on different sized devices

We’ve developed new styles for existing CMS-published web pages which do two key things. First, they now work better on smaller devices. Second, they incorporate new fonts and colours to make for more cohesive user journey around the site. At this time we haven’t incorporated departmental colours, but options for colour will follow in the future.

Give us your feedback

We have a test version of the website at which you can preview the new design and send us your feedback. To access the test site, which is available on the University network only (including via the VPN if you’re off site), go to the page you are interested in on the main website and replace the www in the website address with cmsmigrate. So, for instance, if you want to try out www.york.ac.uk/about/ you would change the address in your browser to read cmsmigrate.york.ac.uk/about/.

Once you’re on the test site and looking at a CMS-published page that’s affected by the new designs, you’ll see a toggle switch in the top right-hand corner. Clicking it will turn on the new styles for you.



If you make your browser window narrower or wider you’ll see the layout adapt to the size of the window.



If you visit cmsmigrate.york.ac.uk on a mobile or tablet and turn the new styles on you’ll see that the content automatically adapts to the size of the screen.

Have a look around and let us know if you spot any issues by clicking the ‘Leave Feedback’ button in the bottom right-hand corner.' We’d really value your input.

What next?

We’re hoping to start rolling out these new designs very soon on an opt-in basis for the different sections of the site. If you’re involved in maintaining your department’s web pages, we have a separate blog post for you about preparing for, testing and activating the new designs.

Rolling out responsive web templates

Early in 2015 we launched new research web pages, our first to be optimised to work on all devices. Since then we’ve launched new pages for prospective undergraduates, prospective postgraduates and we'll soon launch a new version of the homepage. At the same time we’ve been working with departments to rewrite and rebuild course pages.

This has been a long process for a number of reasons. Firstly, it's just complicated work that takes a while. Secondly, we're a very small team who have to keep the website up to date and manage a significant support load. Business-as-usual takes around two-thirds of our time which doesn't leave much resource available for new developments.

Many of you have been asking when you can have access to new templates in the CMS to allow you to rebuild your pages. This post is to let you know what's happening, why (regrettably) it's not quite as simple as just enabling some new templates and to explain what we’re doing about it.

Thoughts on how we manage the website

Two quick asides about terminology:

1. I use department throughout these notes as shorthand for all types of organisational unit.

2. I don't refer to department websites. Instead I refer to sections or pages of the site. When we hear from website users, they almost always refer to just the University website. We have a big website, but it's just one site and not many small ones. That's an important distinction. It signals a shift in mindset that we think is important as we continue to improve the website.

</asides>

In the seven years we've been using the Web CMS, we've given basic training to over 1,000 users. Those users have added over 50,000 pages to the site, often with little governance and as a result we now have a site with more content than we have resource to maintain. Most web professionals would say that sounds like a recipe for disaster. That we still have a usable site in that context is testament to the great efforts made by all those involved.

But, despite those great efforts, the site has considerable problems. It is littered with repetition, out of date information, broken links, broken layouts, huge image downloads, flabby writing, confusing navigation, missing calls to action and critical information lost amongst minutiae.

Modernising and optimising a site for mobile takes more than just applying a new design. It means fixing those underlying problems and streamlining the information we provide. It means we need a change of approach.

Described below are three areas of work, all interrelated, that take us in the right direction.

1. Centralised course listings

Course pages, for obvious reasons, are amongst the most important pages we publish. For some time we've been the only Russell Group university whose course information is only located in department pages.  In many cases course discovery is difficult and in some cases impossible. We also recognise that there is a big burden on departments to maintain the quality of the course pages in their areas. Recent consumer protection guidance has made it more important than ever that we get this right.

To address this shortcoming, we've moved 50+ course listings from departmental to central mobile-optimised pages over the past year. These include courses from Departments of Mathematics, Philosophy, Environment and more. They've been rewritten from scratch to ensure the content is consistent, high quality and most importantly meets user needs. For ongoing maintenance, the central team apply any changes so that we maintain that quality and consistency whilst ensuring that departments continue to approve and sign-off on the published content.

We've relied on agencies to help with writing capacity throughout 2015. In the new year we intend to add a dedicated post to the team to speed up the process. Departments who have the resources to write their own course page drafts will also be able to do so and we will work with you to edit and put them in place.

The current crop of centralised course pages show a range of positive metrics in Google Analytics. We're confident that this is a really positive step forward for how we showcase our courses to prospective students.

2. Mobile-optimised designs for new pages

The new mobile-optimised designs are built on a completely new framework of code and CMS templates. We've followed the principles of atomic design to build a scalable system which should serve us well for a good number of years to come.

By mid-February we hope to make these new templates available for the creation of new sections of the site (eg. new research centres, standalone projects).

For existing sections of the site, there is a lot of work to do to move to the new designs, including (but not limited to):

• Training in use of the new templates
• Auditing existing pages, whether they are required and whether the CMS is the best place for them (the wiki is now a better choice for a lot of internal-facing information)
• Rewriting and optimisation of all content so that it works effectively on devices of all sizes
• Sourcing and preparation of new images so that they display correctly on devices of all sizes
• Logistical planning for a seamless transfer from old pages to new

This is work that departments would struggle to do in isolation, but that our small team doesn't have the resources to support. Rather than focusing on big changes for a few departments, we suggest below a different approach for existing pages as our first priority.

3. An incremental improvement to all existing CMS pages

Given the amount of work involved in rebuilding 50,000+ pages from scratch, there's a compelling need to do something to modernise the site design and improve the mobile user experience in the short term.

To that end, we're working on a retro-fit solution to apply to existing pages in the CMS. It won't be zero-effort for departments, but it will be days, rather than weeks or months.

We hope to be ready to start deploying to early adopter departments in late March.

So what can you do right now?

I hope the above sets the scene and gives you a sense of what we're trying to achieve. But you may be wondering where it leaves you. What can you do right now?

1. Let us know if you're interested in centralising your course pages, using the new designs for new pages or piloting our retro-fit design. Please ensure you have the support of your department though. Successful outcomes depend on departments committing enough resources to see work through.
2. Fix the basics. Mobile-optimisation and modern design are important but it is just as important to ensure what we have already is the best it can be. Fix the dead links, optimise your landing pages, edit your text, highlight your calls to action, clarify your navigation. All those, and more, are just as fundamental to the page as the aesthetics of the design. We’ll be running content clinics each month from February onwards, during which you’ll be able to sit down with us and get some advice in this area. Sign up now if you’d like to be involved.
3. Let us know what your web governance structure is within your department; how you update, approve and manage your content. Check your entry on our site map wiki and update it if necessary. If you don't have a governance structure, consider defining one. It will help you manage your pages and help us to help you going forward. Again, if you’d like to know more about this come along to one of our content clinics and we’ll talk you through it.

Improving our communications

We recognise that whilst we’ve been doing all of this our communications regarding plans, priorities and direction of travel have fallen short. We’re sorry about that, and one of our priorities for 2016 is to put it right.

In the meantime, feel free to ask questions in the comments or to me directly (dan.wiggle@york.ac.uk) and I'll be happy to answer.

Using Google Analytics and other tools to visualise how our global navigation gets used

One of the big challenges of a responsive design, especially for a large site like ours, is how to tackle navigation.

When you're designing for large screens there's a lot of horizontal space available, so you can include quite a lot of links without feeling that you're overcrowding the page.

Our header navigation is fairly typical of other university websites, with links to all the major areas of our site and links for our main audiences.

Our header contains 15 links and a search box

Counting the links, there are 15 in total, plus a search box. Here's the full list:

1. Homepage (via logo)
2. Study
3. Research
4. Business
5. Departments
6. International
7. About 
8. News
9. Events
10. Contact
11. Jobs
12. Visitors
13. Alumni
14. Current students
15. Staff

So, how do we fit all of these links in to a design that's going to work on small screens? Actually, let's take a step back and look at a different question: do we need all of these links in the first place?

Looking at the numbers

Taking inspiration from the GDS post on 7 ways we’ve used Google Analytics ‘outside the box’, I wanted to get an idea of how our users are moving between the main parts of our website, and whether they were using the global navigation links that we provide in our headers.

Google Analytics isn't great at answering this type of question directly, so first of all I exported a load of data using Supermetrics Data Grabber for Excel, looking at what the sources of traffic were to all of the pages that are available in our global navigation. 

Configuring a report in Supermetrics Data Grabber

I grabbed the data for the whole of last year so that any seasonal variations were taken into account. Supermetrics Data Grabber can handily download unsampled data, which is another problem that Google Analytics has when you try to look at big picture problems over a long time period.

Some of the raw data - not pretty (yet)

I then started to clean up the data, replacing the path names with plain English labels and adding values to show what level in the hierarchy we were looking at.

This is already quite useful, and allows me to quickly answer questions that would be time consuming in Analytics.

For example, if I wanted to see how many pageviews the staff homepage gets that come from either the Study or Research branches, I just need to tick a few boxes and Excel's filters take care of the rest. (If you're interested, the answer is 4,450).

Excel's filters are a quick way of segmenting traffic

Pivoting

We can then go a step further and put this data into a pivot table.

The table below shows branches of our site along the top, and the pages that are available from our global navigation down the side, so we can see how much traffic is going from one area of the site to another.

Expressing these numbers as percentages and applying some conditional formatting lets us see some patterns. Right away we can see how the homepage is acting as a major jumping-off point to the other areas of the site (which shouldn't come as a surprise).

Patterns begin to emerge

We can also see which parts of the site have strong linkages between them, and where the links are weaker.

What next?

We're still making sense of this data, and are looking at other sources such as CrazyEgg and search logs, but we're getting the strong feeling that we don't need to provide as many global navigation options as we do currently, and certainly not as prominently. The homepage is the exception to this as it's a starting point for a diverse range of users, but most of the time it's more important to present users with links related to the content that they're looking it rather than links to completely different areas of the site.