Digital Marketing & Communications

We've seen 1s and 0s you wouldn't believe

Topic: Style, content and design

Visual regression testing

📥  Communication, Design, Style, content and design, Tools

Our new site consists of 15 different layout templates. Each one of these is further broken down into numerous different design patterns for consistently displaying content. The rules that govern the presentation of these patterns (or elements, if you are familiar with atomic design) are generated from a combination of the Zurb Foundation framework and our own 'Origins' framework - all in all over 2000 rules spanning almost 6500 lines of css.

With this level of complexity it is extremely hard work to track the effect of any changes, almost certainly there is an unexpected knock-on effect of changing, re-specifying, or removing a rule.

Up until now, we have relied on our in-depth knowledge of the site to know where we expect changes to appear, and we use Browserstack to quickly check a representative sample set of our layout templates.

However, this requires a fair whack of time to run, and also needs a person to sit and look at each snapshot that's generated. And they need to know what to look for.

None of that is optimal, we needed a way to automate this process. Enter visual regression testing.

We followed this online guide by Kevin Lamping for setting up a prototype for a visual regression testing framework for Origins and the site templates.

Our prototype is in a repository here: https://github.bath.ac.uk/digital/visual-regression-testing/ (you will need a University of Bath login to view this). It contains a README with instructions on how to get it up and running.

Essentially, what it does is use some clever existing technology (WebDriverIO, WebDriverCSS, graphicsMagick, Selenium standalone and Node) to make a brower load a specific page, take a screenshot of a defined element, and then compare it to a baseline image. If there is any visual changes, it will then create a 'diff' file showing the change - and also alert us by throwing an error.

Snapshot of the website header

First we create a baseline image.

Snapshot of an updated website header

Then, when a change happens, another image is generated and compared against the first.

A diff file of changes to the header

If there are any visual changes, a third file is generated showing these changes.

Currently we are manually running these tests, but ultimately we will integrate into our continuous delivery framework so that the test run automatically whenever a new build of the css is pushed to our staging server.

Pretty neat.

 

New induction pages improve user experience

📥  Beta, International, Social media, Style, content and design

We’re working with colleagues across the University to make things better for our students online and to make it easier for staff to support students.

It’s been just over a month since we launched three new induction collections to help our new students settle into life at university: one for undergraduate students, one for taught postgraduate students and one for postgraduate research students. It is the first time we have created a specific area on the site for postgraduate research student induction.

Although it's still early days, we decided to look at the performance of the new pages we created for induction and compare it with the old content for the same period from last year.

A single source of truth

Our legacy content is often duplicated across various sections of the site. With so many variations of the same information, it's difficult to keep track of updates. There is often no single source of truth, which can lead to confusing user journeys.

Collections are pages of curated content from across different sections of the University website about a specific subject.

Our induction collections allow editors to feature specific information mapped against the student user journey, making sure that information is timely and relevant for the stage of the journey they are at.

It also means we can reuse relevant content rather than duplicate it, thanks to our new ‘labels’ functionality.

By transitioning our induction content, we have been able to retire 277 pages while creating only 89 new pages.

In addition to the content we’ve created, we’re using labels to pull in existing information from other sections of the site, like Accommodation and Student Services. At the moment, we have 146 pages labelled with ‘induction’.

Better user experience

All content we write is now based on users’ needs. We also make sure it’s written in plain English with an active voice.

This makes the content easier to find, and when users find it, they are able to complete their tasks more quickly.

Higher user engagement

We looked at pages where there was an equivalent page in last year’s induction content so that we could make comparisons on performance.

We chose:

Registering with the University

We found that 85.9% of users who landed on this page took the call to action, which was to actually register using our service page.

From the service page, we saw a 85.5% drop off. Although this is a large percentage, this is actually an expected behaviour at that particular stage of the user journey. This is because students were looking at the information before registration officially opened. The performance data suggests that we still have work to do to improve the student experience.

During the time period we checked, 8,283 users visited the new guide to register. Last year, the corresponding page had 4,600 users over the same period.

The higher number suggests that returning students are finding and using the page too.

In both years, Google was the biggest referrer to the registration page. This year, 41.5% visits came from Google – last year, this was 37.6%. This data supports our our previous findings that most users find the relevant content through search engines, not by using in-site navigation.

Moving into campus accommodation for the first time

The new page had a significantly lower bounce rate (50.2%) than the old one (69.3%), suggesting that people find the content more relevant.

Last year, 86% users dropped off after visiting the equivalent page. This year, 48.5% of the users who visited the new page continued onto other content which we had mapped as the next steps of their journey. This is an improvement on last year, but we clearly have more work to do to improve this journey.

Book a place on our coach collection service from Heathrow Airport

This year, we took a slightly different approach with the page for booking airport collection.

We created a simple, plain English video, translated it in Chinese and posted it on Sina Weibo. It had 3,200 views and as a result we have had more visitors to the page and more engagement with the content than ever before.

The new page had 1,109 unique visitors this year, which is 11 times more visits than the equivalent page got last year. That’s a huge increase for a single piece of content and confirms that we are creating content that better meets our users’ needs.

It’s also worth noting that over one-third of the users who visited the page went onto the next steps we had planned for them as part of the journey. We are now thinking more about user journeys than ever before, so we're able to make better connections between pieces of content and actions that need to be taken.

On the right track

Anecdotal evidence from colleagues so far tells us that there are already fewer misdirected enquiries about registration and accommodation. The new design of the website clearly shows contact details and people are finding it easier to reach the right service to get the help or information they need.

We’re happy to have seen an improvement in performance for this year’s induction information, but we haven’t finished yet. We’ll keep monitoring how the new content performs over the next couple of months to see how we can improve newly-arriving students’ experience as they continue to go through their induction journey.

 

The University of Bath's Digital Design Principles

  

📥  Communication, Design, Digital strategy, Style, content and design

Based on our current Digital Delivery Principles, I recently sat down and drafted a set of Design Principles. These were shared at one of our Show and Tells as a presentation, but I thought I'd reproduce it here on our blog for a wider audience.

1. Design for real people

”Remember who you are designing for”, is the most important thing we can do.

Every design decision we make should solve an actual problem that a site visitor has, or facilitate a real user need. Design should serve the content it presents, design in the absence of content is not design, it’s decoration. We always keep in mind that the end user of a page can be very different to us, with different needs, expectations, and abilities, and ensure that our design does not exclude them from getting the answers they need.

2. Design with data

Successful design starts from a clear and informed position.

Our approach is inclusive: we're building a site that will provide the optimal experience for a visitor whoever they are and whatever device they are using. To achieve this we conduct user research to better understand what people expect. We test changes, features and assumptions with users to get insight and feedback that ensures we are delivering on that expectation. It is as important to remove failing features as it is to add new features into our design, and the ability to know what works and what doesn't only comes from data.

3. Be simple, fast and effortless

Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.

We maintain a pattern library to ensure the design of elements is consistent, and this ensures that our interactions speak to users with a single voice, building trust.
We strive to ensure that our design affords our visitor with an experience that feels fast – they should be able to find what they need on the page without a delay. Images are optimised for the device they are viewed on, visual enhancements are loaded progressively, and do not disturb the flow of content on the page.
We minimise pain-points as much as possible with an awareness of good practice, to provide an effortless experience.

4. Make bold choices

We measure ourselves against the very best, and we should not come up short.

The success of the University of Bath is based on calculated risk-taking, knowing when to break from convention, and when to reprioritise your approach to better fulfil the requirements of the people who depend on you. Instead of simply matching what other institutions offer, we challenge them with innovative approaches and ideas that better serve users’ needs.

5. Always evolving

We believe that things can always be made better, and we know that good design is never finished.

It is pointless to sink 2 months into crafting the most beautiful interface if it does not allow the visitor to complete their task, or does not work on a mobile device. We release a design feature as soon as possible, and then iterate on that delivery to improve it.

 

Getting ready to go live

📥  CMS, Style, content and design, Tools

As you might have noticed from our latest sprint notes, we're getting pretty close to shipping some of our first full sections of the beta site.

We've had a handful of individual pages live for months now, all for new content. But soon it'll be the first time we replace an existing section with new content from our new CMS.

Before we ship anything, there are a few things we have to do to get these sections – and the beta site as a whole – ready to meet the world.

Our review process

All content in transition goes through a five-stage process:

  1. Substantive edit and review
  2. Copy edit
  3. Fact-checking
  4. Final proofread
  5. Sign-off and go live

We use Trello to manage this process. Every section has a board, every stage has a column, and every piece of content has a card. As the content goes through the stages, it moves across the board, and eventually into the final column: 'Complete'!

(more…)

Adopting an agile approach to content at Bath

📥  Style, content and design

I spoke at the Institutional Web Managers Workshop (IWMW) in July. At the event I talked about how Bath has adopted an agile approach to content and what we have learnt.

Watch the talk
Content has become increasingly important to universities to achieve their strategic goals. Find out what agile is and why we've adopted an agile approach to the creation, delivery and management of content online.

 

How to send a message to first year undergraduate students on bath.ac.uk and its supporting platforms

📥  Communication, Style, content and design

We manage first year undergraduate student communication on bath.ac.uk to make it simpler for content contributors to propose a message and find out what's been scheduled.

Scheduling a message

There are three ways to communicate with first year undergraduate students. You can use:

If you’d like to contribute a message you should complete the message request form.

The purpose of your message should be to equip first year undergraduate students for academic study or encourage their participation in student life or extra curricular activities. This guidance does not cover academic department communications (which are covered by alternative arrangements) or news stories. News stories should be emailed to comms@bath.ac.uk.

Deadlines for messages

To allow time for your message to be reviewed and scheduled you should complete the form 3 weeks before the start of the month when you’d like your message to be published. To avoid missing deadlines we’ve created a timetable of dates.

Messages scheduled for Deadline for submitting your message Deadline for Student experience Officer Review Schedule confirming messages sent to content contributors
September 2015 7 August 2015 14 August 2015 21 August 2015
October 2015 4 September 2015 11 September 2015 25 September 2015
November 2015 9 October 2015 16 October 2015 23 October 2015
December 2015 6 November 2015 20 November 2015 27 November 2015
January 2016 27 November 2015 11 December 2015 18 December 2015
 February 2016  6 January 2016  15 January 2016  22 January 2016
 March 2016  5 February 2016  12 February 2016  19 February 2016
 April 2016  4 March 2016  11 March 2016  18 March 2016
 May 2016  8 April 2016  15 April 2016  22 April 2016
 June 2016  6 May 2016  13 May 2016  20 May 2016
July 2016 Outside term time
August 2016 Outside term time

Message review process

To make sure your message is scheduled, you should include a clear title, description of no more than 117 characters, and the web address of the page you’d like us to link to. Your message should also follow the University’s digital style guide.

We will then share the monthly schedule of activity with the Student Experience Officers (SEOs) who'll review it and make sure that messages are timely, relevant and meet first year undergraduate student needs.

In the unlikely event that your message is not included, we’ll contact you and explain the reason why. If you don’t agree you should contact the Content Manager who will review the message with the Director of Marketing and Communications, on behalf of the Student Experience Board (Communications).

Publishing of messages

Unless a message is scheduled for a specific date, it will be published on the first year student landing page on the following Monday morning (or the next working day in the event of a University holiday). Messages sent using Twitter will be published at the time and date you specify.

Existing messages

If you’ve previously contributed a message you do not need to send it to us again. It will be scheduled using the same process.

Who does what

You(content contributors) Digital team SEOs Student Experience Board (Communications)
Provide a clear title, useful description and the web
address to relevant page on bath.ac.uk, bathstudent.com or teambath.com
Review messages title, description and web address and decide if it should be included in the calendar of scheduled activity Make sure that messages are timely relevant and meet first year undergraduate student needs Agree the overall objectives for first year undergraduate
messaging on bath.ac.uk
and shared platforms
Submit your message(s) before the specified deadline Add message to calendar of scheduled activity Consider the performance reports and how they can be used
to improve communication with first year
undergraduate student in Faculties
Agree the platforms which can be used to reach first year
undergraduate students on bath.ac.uk
Contact the Digital team and let them know about any
changes
Share monthly calendar of scheduled activity with SEOs Review performance reports and consider Digital team's
recommendations
 Share monthly calendar of scheduled activity with content
contributors
 Publish messages according to the agreed scheduled
activity
 Contact content contributors and explain why a message
hasn't been scheduled
 Report on the performance of messaging and suggestions for
improvements every quarter

Updating the guidance

This is the second iteration of these guidelines. We will roll out a third iteration in the future for taught undergraduate and postgraduate students who use www.bath.ac.uk/students based on feedback. If something isn’t clear or needs adding, then email web-support@bath.ac.uk.

 

bath.ac.uk content by the numbers and the next steps

📥  Beta, Development, Style, content and design, Tools

In March, the Digital team set out on an ambitious project to inventory bath.ac.uk.

Our purpose was to learn more about the content we create and the publishers who write it. Gathering this knowledge with a thorough inventory process is something that I have wanted to do ever since I joined Bath in 2011.

This is what we found, how we found it and what our findings mean for how we plan, govern and build better content.
(more…)

 

Improving the international country pages

📥  International, Style, content and design

We provide international applicants with specific information on entry requirements, funding and scholarships, university services for international students, how to contact an agent and forthcoming visits. All of this information is on our country pages.

As part of the development of the Beta site and the University's new International Strategy, we aim to improve the international content across the website. In June, we performed an audit of 51 country pages and discovered that:

  • content did not address specific user needs
  • there was duplicated information that also appeared in the prospectus
  • user journeys were fragmented making it difficult for applicants to find information
  • the layout of the information was not consistent.

As a result, we have made the following immediate improvements:

  • created tailored content to meet specific user needs for each country
  • removed duplicated content
  • updated the entry requirements, scholarships, agents and forthcoming visits information
  • re-ordered and re-named the tabs to improve user journeys.

For the next step, we will continue to monitor the external traffic to these pages and make iterative improvements based on the data.

 

Renewing the Library landing page

📥  Style, content and design, User research

We’ve been aware for some time that the Library homepage (or landing page as we've come round to calling it) had been looking tired and over-burdened with links. It also featured a menu system which often provided too many pathways leading to the same destination.

The rationale for the last revamp and ongoing updates had been to provide different pathways to information and services, each of which responding to a different user mindset and/or university role. However, in practice, we found that the presence of so many routes obscured the content and diluted the impact of information on the site as things became buried in various sections of the Library webpages.

Screenshot of the previous Library landing page

The previous Library landing page

Screenshot showing the heatmap of the clickrate on the previous Library landing page

Heatmap of the clickrate on the previous Library landing page

We met with the Digital Marketing & Communications team which helped “shake up” and refresh our expectations for prioritising and re-positioning content. Digital’s hotspot analysis of the Library landing page use played a pivotal role in this review, showing us where people made heavy use of links and where there were barren unused sections of the page and menus.

(more…)

 

How we use Flow to manage editorial calendars

📥  Style, content and design, Tools

Flow is an online task management tool which helps teams to collaborate. We use Flow to organise our editorial calendars. These help us manage content creation and the scheduling of messages, which we distribute to our audiences through our digital channels.

To make sure these calendars work, it’s important we keep them consistent, so we’ve created some simple guidelines to help our users. We’re sharing a version of those with you today.

How we use calendars in Flow

Editorial calendars in Flow

Calendars focused on audiences help us put users' need first

We've set up 4 editorial calendars using Flow. These are based on the type of people we regularly talk to, including prospective students, first years, all other students and people who are interested in our research.

We organise Flow in this way so we consider users’ need first. In the future we plan to add a calendar for staff communications.

We use an overview of all these calendars to coordinate outgoing messaging and to make sure our audiences get timely and relevant information. Working in the open in a large organisation helps us to prevent clashes and make sure that we don’t duplicate messages.

Before we add a task

All content created for bath.ac.uk addresses a specific need. Before adding a task to Flow, we write a brief statement outlining who we’re trying to reach and what we’re trying to achieve. We add this as a comment as this helps us to keep our goal in mind as we work on the task.

This statement helps us to focus on the audience, what their needs are and make sure that we create the right content for the right channel. For example, if we were to launch the fictional Centre for Entertainment Technology, we’d want to target journalists so we’d create a media release and notify them.

Creating a task in Flow

When we create a task in Flow, we make sure that it contains the following information so that other users can easily understand the task and filter the calendar.

A task in Flow

Tasks help teams to keep track of progress

 

When creating a task we:

  1. Add a title which clearly describes the subject, so that other people will understand what the task is. For example, ‘Launch of Centre for Entertainment Technology’.
  2. Add a project. This is the ‘content type’ or the content item’ we’ll be creating to support the message or linking to.
  3. Add a due date. This is the date the content should be published.
  4. Assign the task to the section editor who has commissioned the content.
  5. Subscribe the people who’ll be completing the task.
  6. Add tags including the channels, status, section, subject or campaign. For example ‘homepage’, ’Twitter - @uniofbath' ‘tentative', ‘research’ ‘politics’.
  7. Add subtasks. These are the steps the subscribers will need to complete before they can publish. They can include the copy and web address of the content.
  8. Add the objective for the content in the comments box.

We manage the status of tasks using tags, these include ‘tentative’, ‘on hold’ and ‘stopped’. These tags help us understand the progress of tasks.

Talking to people in Flow

Comments in Flow

Commenting helps teams to share knowledge

 

To help improve collaboration we mention people using the comments box. This helps to share knowledge and means people don’t have to email or call to find out what's happening.

Viewing tasks and filtering them in Flow

Flow allows us to view different groups of tasks. We can filter editorial calendars by tags, projects and also people - this is key to helping us manage content production, by making it easier to understand the progress of work, its type and the people tasked with its completion