Digital Marketing & Communications

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

Topic: Beta

Me first big ship

📥  Beta, Design, Team

Ahoy there! Me name is Tegan and I be Digital’s fresh meat. I joined on the first o' December last year. I’m not long graduated from university, with twenty months in industry, tamin’ the wild seas of the web.
I’m a design buccaneer, a user experience swashbuckler. I conduct hearty user research, rescuin’ marooned users from the shores of confusion, and I make user interfaces delightfully easy to use. I also have a fair working knowledge of code which helps me parlay with devs.

Batten down the hatches an’ I’ll tell ye a little tale ‘bout me first big ship.

</pirate>

Sail, ho! There be a ship!

When we release a new feature or change, we call it ‘shipping’.

This ship had a mission: to grab your attention, inspire you to keep reading and build upon the University of Bath’s visual language with a new visual cue.

This element will be used by Collections, thematic pages with handpicked articles. But it may expand to other aggregate content types, like departmental landing pages.

We’ve called this new element a Hero – it’s well-built and displays outstanding achievements and noble qualities! I kid, it’s actually a technical term for a prominent banner on a page.

Hero image is a term used in web design for a specific type of web banner, prominently placed on a web page, generally in the front and centre.

 

The blueprints

Pile of paper with wireframes of the new Collection hero

To start off the design process, we collected data from current users to see what their behaviour is currently.
Using the scroll heatmap, we could see where people linger on the page.

Scroll heat map snapshot

This heat distribution demonstrates that people don’t spend much time above the fold (the top bit of the webpage that is visible without scrolling down). Users quickly scroll below the fold to read the actual content. This is the hottest spot on the entire page.

Next, we checked out how other people do it. What are the current standards, what does and doesn’t work? This process is called peer review and it is a great opportunity to draw inspiration from what other people have done.

Stop. Sharpie time!

I squirrelled away in a meeting room with the collection of Sharpies and A3 paper to punch out weird and wonderful ideas and directions.
I developed a handful of these ideas further, then mocked them up as high fidelity prototypes and presented them to the product owner for feedback.

Armed with feedback, I iterated on my designs with more sketching and more mock-ups to bring back some new and improved ideas to the table.

I collaborated with Sharpie champion and user experience privateer, Dan, to create a new piece of visual language for featured images. This hinted at the existing call-to-action arrow shape with a bit more visual embellishment.

The prototype on artboards in Sketch app

14 artboards later, we were ready to demonstrate the design on a multitude of device sizes and its limitations. These were shown to the Director of Marketing & Communications for final approval.

Sail ho! The design was approved!

All hands on deck!

To breathe life into this new element, we needed to wire it up to the Content Publisher. This required input from multiple disciplines: designers, developers and content producers.

My role was to create the front-end by gluing HTML and Sass together, while Iris developed the working bits to add a new hero section in the editor, and content seadogs composed some explanatory microcopy.

Collaboratively working with Iris was a breeze, and each piece of work slotted together like a jigsaw puzzle. The build took 2 days, with a further day of squashing bugs and browser compatibility testing. 36 git commits later, we were ready for review.

As this was my first time working with both the Foundation framework and the university's visual language, Origins, I think I did good! Some code structure optimisation and minor (but significant) design changes came to light in review, but all the required amendments were quick and soon got the green light.

Pull requests to production put the build into motion. It was time to weigh anchor and set sail!

Fire in the hole!

The deployment dragon roared out across the sea (department) as the ship... shipped.

Peter Pan ship flying into the distance

This feature was a huge blocker for launching the Research collection, so having it ship was an achievement for the whole crew. You can now see the Research Collection live, or read Hanna's post about it from a content perspective.

This is, admittedly, not my first ever ship here at Digital. So far I have set sail to several little ships, or... dinghies, but this feature was my first big one. Drawing upon my own skills and those of the people around me, we have created a cool new element to drive forward a new chapter in the University of Bath’s visual language development.

I raise me grog to the crew and all future ships!
Yo ho, yo ho, a pirate’s life fer me...

 

Early review of research ethics content performance

  , ,

📥  Beta

In October, I worked on improving the information we provide about research integrity and ethics. To deliver the new section, I worked with subject matter experts in the Vice-Chancellor's Office and the Office of the University Secretary.

When we started, the content was basically a single page with multiple tabs, many many links and subheadings which were generic or duplicated. Together, we set out on a quest to make the process simpler and important tasks easier to spot and complete.

We shipped the new content in mid-November, so it's still early days. But we can already see from the analytics that we've made a huge improvement.

Making things simpler

Our biggest aim was to make it easier for users to understand what they need to do to conduct ethically responsible research. For this, we reworked parts of the original content into a plain English guide.

Plain English is about writing in a straightforward manner so that the content can be more easily understood by a wider audience.

Looking at the analytics, this guide is by far the most visited individual content item, with 517 pageviews compared to the next item with 344. It has an average time on page of 2:29. These stats suggest that it's being both found and read.

On that note, the fact that we can even start to draw comparisons between individual items of content is a huge improvement in itself. With the old page, all we had was basically an overall number of visitors to the whole page and our best guess.

Coherent user journey

One of the biggest changes is that the new Collection is making it easier for people to move on to the next step in completing their task. The bounce rate has gone down from 64% to 30%, which suggests that people are finding the content relevant.

The main purpose of both the old page and the new Collection is to point users to the relevant information. The change in the average time on page (old 4:32, new 1:15) suggests that it's a lot easier for people to find what they're looking for. This is supported by the fact that 80% of the people are moving onto another item of content compared to 63% on the old page.

There is also a big difference in what content they're moving onto to. From the new Collection, users go to the main items of content in the section - the top three items are two guides and our statement on ethics and integrity. From the old page, users were moving onto a more random set of content scattered across the website with no clear indication of any shared top tasks.

Celebrating success

So yes, it's still very early days. But after nearly three months since going live, the analytics would seem to suggest that users are finding it easier to navigate and read the content we’ve created.

In a transition project of this size, these little successes are worth noticing and shouting about. By sharing them, we are able to not only keep our stakeholders informed but provide a useful example for colleagues in the wider Higher Education community.

I compared data on the new content from the launch date to present to data on the old content from the same timespan one year earlier.

 

Shiny new Research

  , ,

📥  Beta

This week, we went live with the new Research Collection. It’s not an insignificant milestone - it’s the first top level section we’ve launched in our content transition project.

new-research-collection

The Research Collection is the first Collection to feature the new hero item.

The new Collection introduces many improvements.

Showcasing a wider range of content

In the new Collection, we’ve introduced different strata for different types of content. This makes it possible to feature, in a consistent way, different items like videos, podcasts or articles from our researchers outside bath.ac.uk platforms. We can now add range and depth to our research content which previously relied heavily on news items and case studies.

Better workflow

As an Editor, I’m slightly in love with our Content Publisher. Creating and featuring content is so much easier than it was in our old system. There are still a couple of things we need to sort out with the workflow before the process is uber smooth, but the editing experience is already hugely improved.

Simpler tasks

In our research section, we publish both editorial (feature articles and news items) and transactional (downloading documents and information) content. As part of the transition, we spent a lot of time making the transactional content simpler and clearer.

In the new system, the content benefits from better labeling under specific content types, plain English and simpler language in general. A good example of a batch of content we were able to improve like this is the research integrity and ethics content.

Next steps

So that’s all live now and I’m looking forward to getting some user data to find out how the new section is performing. But before that, I’m going to have a big, well-deserved, glass of wine with colleagues tonight to celebrate.

The neverstarting story

📥  Beta, Communication, Development, Team

Do you ever have a piece of work that never quite makes it to the top of the to-do list? Something that needs doing but is not really crucial enough to be prioritised that highly. It lingers in the background, knocking on the door of your subconscious every time you think of the project.

We had something like that. A story in our backlog which so very nearly made it into sprints, but never actually did. This happened so many times over 5 months that it became known as the 'cursed' story.

Then one day it acquired a different nickname. The original product owner was so fed up of it not being done that he wrote this comment on it.

PO comment

And the 'champagne story' was born.

But the comment didn't seem to help because nearly a year passed before it finally made it into a sprint. The story itself seemed to become more daunting the longer it was unstarted. It was essentially about republishing related content when an item gets published. Important but not groundbreaking stuff.

In the end the story got reduced in scope and then finally made it into the backlog for a sprint. It just so happened that I was the person who picked up the story and actually got the feature done. After all the delays and near misses, the feature itself was quite straightforward to implement.

So you are probably thinking that there was much rejoicing at this being done and I went home happily clutching a newly acquired bottle of champagne? Well, not quite. You see, the product owner had since moved on from our team, so there was a question over whether the champagne would arrive. The team put out a few gentle reminders.

Reminder

The message was out there and we waited. At the same time this was happening, it was my turn to bake for our GBBO sweepsbake. And that is when I had an idea.

What if I baked a cake in the shape of a champagne bottle to celebrate the story being done? And what if I delivered it anonymously to the office? I wondered what would happen.

Cake

 

Detective

It was a fun day. I sat back and watched as people in the office were trying to work out who had made this cake. There were some top detective skills put into practice but somehow I managed to get away with it until the following day when I owned up to being the secret baker.

All in all, I enjoyed finishing the story and baking an interesting cake for the team. I learnt a lot about my colleagues and how much fun they are to work with.

Keep shipping! (and baking)

Progressive enhancement and team memberships

📥  Beta, Development

We recently shipped some changes to how we order team members in our Team Profile content type.

These improvements came in several stages, each building on the last, so this seemed like a good opportunity to talk about progressive enhancement.

What is progressive enhancement?

The Government Digital Service's service manual has a great explanation of progressive enhancement:

It’s based on the idea that you should start by making your page work with just HTML, and consider everything else an extra.

This is because the only part of a page that you can rely on to work is the HTML. If the HTML fails there’s no web page, so you should consider the rest optional.

We prefer this approach to immediately building a feature with all the extras (like JavaScript) and then trying to make it degrade gracefully (or just keeping our fingers crossed that it doesn't break).

Progressive enhancement is important for accessibility. By making sure your feature works with HTML alone, you can be more confident that your feature will work for people who are:

  • using assistive technologies
  • on slow or compromised connections
  • don't have JavaScript enabled for some other reason

Progressive enhancement is also well-suited to Agile, as you can start with the core functionality and then iterate.

Introduction to the feature

Users have two options when it comes to creating team profiles:

  • 'Create manually' – create a list of names and roles using Markdown
  • 'Select from Person Profiles' – add Person Profiles to the team to pull through the member's name, role, photo and other important information

When we first built the 'Select from Person Profiles' feature, users had no say over the order in which the team's members were listed on the page.

Members with the 'Leadership Profile' subtype were always listed first. All other members were then listed in alphabetical order. Our users reported that this wasn't ideal and it was often important that members be listed in a certain order. For example, the manager of a team should probably be listed first, even if they don't have a 'Leadership Profile'.

Adding the order with HTML

Our earlier version of the Team Profiles interface did have some JavaScript. Adding the order was complex enough that it was easier to strip out any existing JavaScript and go back to basics.

After some complicated data structure changes behind the scenes, we had a shiny new field called 'Order in team'.

Team members in the base implementation

Team members in the base implementation

Users could now specify the order by entering numbers into these fields. When they saved or published the page, members would appear in the order they'd chosen, both in the interface and on the page itself.

Saving the page also added more empty member dropdown menus, so users could add more members if they wanted to.

We now had the core functionality, even if there was still room for a bit of polish.

We shipped this version of the feature and then moved on to the enhancements.

Adding the magic with JavaScript

We had the essential behaviour of the feature, but there was still room to improve the user experience.

Now that we had a feature which worked with HTML only, we could add enhancements for any users who also had JavaScript enabled.

Our JavaScript addition did several things:

  • replaced the multiple dropdown menus with a single one, which adds new members to a list below
  • allowed users to drag and drop the members in the list into their desired order
  • hid the member order fields, but updated them behind the scenes whenever users rearranged the members through drag-and-drop
  • added a remove button for each member to take them off the list

These enhancements make it quicker for users to add, reorder and remove team members.

Team members with JavaScript enabled

Team members with JavaScript enabled

If the user doesn't have JavaScript enabled, none of these enhancements kick in, but the feature still works as before.

This means the Content Publisher can still be used by broad range of people, no matter which technology they're using.

What comes next?

We don't work with JavaScript nearly as often as we do Ruby. As such, our practices need a bit of work.

Because the JavaScript implementation changes the interface, this means inserting HTML into the page. Currently we store this HTML in the script itself, which is messy and difficult to read. It's probably time for us to get familiar with a JavaScript templating engine – Handlebars.js seems like a likely candidate.

Trying (and failing) to test the drag-and-drop behaviour in Capybara also revealed that we need a better way to handle feature tests and JavaScript. We've got some planned investigation into Poltergeist which will hopefully sort this out.

While neither of these changes will be apparent to users, it should make our development process smoother as we roll these sorts of JavaScript enhancements out to other parts of the Content Publisher.

 

The brief history of the content transition board

📥  Beta, Communication, Tools

We recently returned to a content sprint that was started a year ago. Digging up the old Trello board made us feel a bit nostalgic and quite pleased with ourselves - we’d come a long way since then.

When we began the content transition project we didn’t really have a clear idea how to organise the process. Our first attempt at a transition Trello board reflects that.

transition-board-zero

Our first iteration of the transition Trello board.

The idea was to build it around the top level stages in the process. Each card represented a stage in the process such as content analysis or completing a specific set of training.

Comparing that board to what we have now made us chuckle.

student-rec-board

The transition Trello board in its current form.

So what’s happened in between those two versions of the board?

We realised we need to build the boards around actual content

In the next iteration, we had cards for each new content type and copied into a checklist everything identified as that content type from the inventory spreadsheets.

content-type-cards-checklist

We trialled posting all the content from the inventories onto cards based on content type.

We would make an individual card for each item on the checklist and tick it off the list when that had been done to track progress.

For a reason none of us can remember, we put those cards in a column called “Epics”. Obviously, they are not epic user stories and this caused confusion - in amongst ourselves as well as with the publishers we were working with.

We quickly realised it was very difficult to avoid duplication or prioritise content.

We realised we need some actual epics to organise content in a meaningful way

The next iteration was already a big improvement. We organised the content into cards so that each covered, more or less, an epic user story.

We then pasted the relevant content from the inventories into the checklist again but this time used the full URL so it was easy to check the content without having to copy and paste and type in the domain manually.

Why on earth we weren’t doing this from the start, none of us can tell you. Sometimes even the most obvious things escape you when you’re immersed in a process.

epics-transition-board

Categorising content based on user stories worked better.

We realised we needed to take a step back from transitioning individual pieces of content

Although we were trying to structure to-be-migrated content around user stories, we quickly ran into problems again.

Working through heaps of content as a team at a fast pace meant we ended up working on user stories that were very similar. As a result, we created duplicate content without realising it.

It was time to take a step back. We went back to the principles and started from user needs. This time, we were careful to keep existing content out of sight at the user story planning sessions. This helped us stay focused on what the content should be rather than what it had been.

Having individual old pages on a checklist must have, subconsciously, made us think we need to transition each page as an individual page. So we stopped that, and started including them on the card as a reference instead.

We also improved our housekeeping discipline around individual cards. Each card now needs to have:

  • a user story
  • links to all the relevant existing content
  • links to draft in the new Content Publisher (backend) and preview
  • someone identified as the content subject expert
good-transition-housekeeping-trello

Each card has to have enough information for anyone of us to be able to pick it up.

We have also tweaked the stages each card goes through. “Doing, review, done” has morphed into “Substantive edit, 1st review, more edits, fact-checking, final proof and ready for live”.

The process takes a long time but we have made peace with it for now. If we’ve learned anything in the process of transitioning content so far, it’s that you can’t rush good content.

There’s still room for improvement - there always is - but for now, this is working for us.

 

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.

 

First pages of the new Bath website are live

📥  Beta

Today we published a number of sections on the new Bath website. These pages appear in our new designs, managed by our new CMS and they have been produced using our new approach to content design.

The sections are:

Congratulations and thank you to the department involved and the Lead Publisher Steve Milnes. It’s been hard work but the benefits to the end users are clear to see.

What’s new

When you look at these new pages the most obvious changes are to the way they look. Each type of content - be it a project or announcement, for example - has a templated design so that all pages of that type look alike and adapt to whatever screen size you are using. The words you read are displayed in a new typeface that makes everything easier to read.

There are far fewer pages in this new site and every item of content has been analysed to make sure it is useful. Every item of content belongs to an organisation within the University and to one of 12 content types, with the aim of getting people to what they need more quickly. In the near future we intend to add topics as a third way of identifying and browsing our content, so that you don't need to know who in the university is responsible for that content.

The publisher of the content item you are looking at has followed a template when producing the page. Providing this structure makes the creation and editing of content quicker, reduces page errors and allows us to monitor and improve the quality of content. For example, every page is required to have a title and summary that is short, uses plain English and makes it clearer what the point of the page is.

All the people who can publish on the new site have been through training. The software has been designed so that next-to-no technical knowledge is required. Instead our training programme has focused on new skills that directly benefit the site's users, such as understanding user needs, content design and analysing content performance. This also means that we can let more staff publish content online and at the same time keep the quality high.

Suggest an improvement

We hope that the users of the site will let us know how well it is meeting their needs. We expect users to discover bugs, snags and additional content or features that need to be added or improved. If you find a problem or have a suggestion, we’ve provided a link to 'suggest an improvement’ at the foot of every page so you can tell us about an issue if you encounter it.

If the feedback relates to the content of the page, we will route this through to the publisher responsible to deal with. If it’s about the design or functionality then it will be for us in the Digital team to think about how we deal with it and resolve or explain why it isn’t possible or desirable. Either way your feedback will be acknowledged, responded to and it will always be welcomed.

Stay in touch

We will be posting further updates as we add content and features to the new site over the coming weeks, so check back regularly or sign-up to receive email alerts when we post.

 

Who can do what, and where

📥  Beta

We now have over 100 people using the new CMS, drawn from 48 organisations and 28 groups. We also recently crossed the threshold of 1,000 content items in the CMS (woohoo!) And aside from organisations, all those numbers are bound to go up.

How do we make sure that users:

  • see only the content that's relevant to them, rather than every single thing in the CMS?
  • can edit only the content their organisation or group is actually responsible for?
  • can feature only the most relevant content on their landing pages?

The answer comes down to permissions – both for users, and the organisations or groups they belong to.

(more…)

Introducing the new Bath CMS

📥  Beta, CMS

Today the University’s new content management system went live, and publishers in departments around the University will begin using it to publish their content to the web.

This marks a major milestone in transforming how the University communicates and delivers services digitally.

published status notfication in CMS

Published item

Roll out

We are coordinating a rolling launch so that each department is supported by the Digital team as they develop new pages. The first group of departments will transition in September and our goal is to have completed the last group by the end of 2015.

We are looking forward to seeing the new site gradually unfurl and we’ll be posting updates as departments and sections of content switch over. Staff and students on campus can see a preview of the new website as it takes shape at beta.bath.ac.uk.

You can find links to pages that have transitioned to the new site by looking at the sitemap page.

Big benefits

We studied what publishers at Bath needed from a CMS and developed the software to meet those needs. Any publisher using this new CMS will be better off than they were before.

Our new CMS is designed to be simpler, quicker and more pleasant to use. The most important features are:

  • templates that make it quicker to create and edit content
  • dashboards that make it easier to find and manage your content
  • editorial tools that make it simpler to ensure consistent quality.

It will improve the quality of content and enable more staff to publish material online without the need for specialist training in using the software. (more…)