Digital Marketing & Communications

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

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.

 

Adding a state machine to a Rails application

📥  Development

We recently implemented a state machine in the Content Publisher. While this isn't a change many people will notice, it does lay the foundation for further improvements which we hope will benefit our users.

This work also contributed to my ongoing education in computer science concepts and design patterns. Hopefully this post will share some of what I've learned.

Introduction to state machines

A state machine, or finite-state machine, is a computational model. It's designed to manage things which can be in one of several pre-defined states. Items can transition between states, but can only be in one state at a time.

A properly-implemented state machine can define:

  • what your states are
  • what things can do while they're in a certain state
  • when something is allowed to transition from one state to another
  • what happens when something transitions between states

A good example of what I mean by 'states' is what happens when you order a product online. Your order goes through several states: 'received', 'processing payment', 'packing', 'out for delivery', 'delivered', possibly even 'returned'.

While the state the order is in changes during the process, it will only ever be in one state at a time. The order can be in a 'packing' state or a 'delivered' state, but never both at the same time.

There are also rules about how the order moves between states – for example, your order won't move from 'delivered' back to 'packing'.

And different things can happen during the states. Maybe you can cancel your order when it's still in 'received' or 'processing payment', but not once it's in 'out for delivery'.

All these rules and processes are set through the state machine.

The state of states in the Content Publisher

States are a key part of the workflow in the Content Publisher. Content items can be in 3 states: 'draft', 'in review' and 'published'. All items start out in 'draft', but as our users work on them they progress on to

But we might want to add more in the future, like 'scheduled for publication' or 'archived'.

While the Content Publisher has states, and items can move between states, we don't manage these in the clearest way. The logic which controls which states items can be in is spread across the codebase, which makes it difficult to read or to modify.

We decided it was time to implement our own state machine.

State machines and Ruby

We could build a state machine ourselves, but there are so many popular state machine gems out there that we wanted to look at those first.

I started by checking Ruby Toolbox to see what the most popular state machine gems are. The top one is state_machine, but this is no longer maintained, making it a risky proposition.

The next most popular gem is AASM, short for 'acts as state machine'. AASM is well-maintained, with an active community and pretty good documentation – all important if we want to welcome it into our codebase.

I also looked into several other gems, including workflow and transitions. But AASM seemed the most promising, so I tested it out by building a prototype in a fresh Rails app.

AASM in action in our discovery prototype

AASM in action in our discovery prototype

The prototype confirmed that AASM ticked all our boxes. It was time to implement it properly.

Adding a state machine to the Content Publisher

The next step was to get AASM up and running in the Content Publisher to replace our existing functionality.

Implementing AASM was more complex here than in the prototype. This was mostly because we've been working on the Content Publisher for nearly two years and so had a lot of code to change.

This gave me a good opportunity to get more familiar with a broad range of our code – everything from role-based permissions to version control.

If you're thinking of using a state machine in a Rails application, I'd definitely recommend trying to put it in place as early as possible to minimise the amount of refactoring.

After many commits and an extensive review, we finally shipped to production on 16 January.

What comes next?

While our switch to AASM made no immediate difference to our end users, it does make our code better and more extensible.

We've now laid the foundation for adding new states or transitions, which could enable new features – like scheduling an item to publish later, or unpublishing a live item.

We'll be doing some more research into how we can improve our workflow, so keep an eye out for more changes in the coming months.

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.

One Hour Upgrade - January 2017 edition

📥  One Hour Upgrade

The first One Hour Upgrade of 2017 was a compact but busy event with a number of interesting proposals put forward for consideration.

In total, there were 16 new stories added to the backlog by 7 participants. Of those, 8 stories proved particularly popular, receiving at least two votes. Given the small team on this One Hour Upgrade we experimented with each participant having fewer votes than usual.

5 stories eventually made their way on to the ‘To do’ board ready to be tackled on the Friday.

What we got done

  • Dan tidied up the User Research section of the wiki, pruning out old, redundant info and creating a centralised location for our User Research efforts.
  • Tegan fixed an accessibility issue with links in our calls-to-action. Apparently a combination of bright pink and yellow is not exactly AA compliant.
  • Iris and Sean updated the Content Publisher header with an updated product name. Tom T provided a code review within the hour.
  • Justin O and Tom D made further updates to our travel advice pages, working on a collection to bring all of the information together in a single place.
  • John worked through a number of outstanding blog posts, ensuring our blogging editorial calendar stays on track.

What we learned

  • Having fewer votes available meant participants focused on voting for stories they'd actually like to work on during the upgrade hour.
  • One Hour Upgrades should be scheduled so that they don’t fall on a Show and Tell Friday. Otherwise our available working hours on that Friday are significantly reduced.
  • If a technical or design story is in review at the end of 60 minutes, it will be considered ‘done’ and moved to the relevant board.
  • Stories that could involve soldering are not good candidates for One Hour Upgrade. However, everyone is keen to upgrade the Dragon of Deployment.

What’s next?

Our next One Hour Upgrade is scheduled for 17 February 2017.

 

Exploring new ways of writing about our research

📥  Communication

One of the most common content types we currently use for our research content is a press release. Or a news item, which is what we call them after slightly repurposing them for the website. In the past three months, we’ve published roughly 40 research-related news items.

The thing about press releases is that they are tied quite heavily to two very specific points in the research lifecycle - winning a research grant and publishing a paper. Similarly, case studies, of which we’ve published six in the past three months, are tied to a particular point in the research project - to complete the classic case study structure, the results of the research have to be in.

Softer, narrative content

The new content we’re suggesting moves away from all these time-related restrictions. It places the emphasis away from published papers and research results. The story becomes about the researcher, their journey, personality and aspirations. The style of writing is softer, more narrative.

This is a result of a Digital research content strategy we launched in late 2015. It sets out how we want to develop the way we communicate about our research online to reach new audiences and make most of all the cool research that’s happening at Bath.

We recently published two of these kinds of stories. One of them is about an ambitious Syrian researcher who’s on the brink of finishing his PhD with a promising career ahead of him, potentially in a leading international architecture company. The other one is about how one of our senior researchers came to be the host of the UK’s beloved annual Royal Institution public lecture series.

The first one was written by me, the latter one by our Research Marketing Manager Andy Dunne. We edited each other’s articles and various team members were involved in polishing and proofing. Publishing each one felt like a genuine team effort!

Off to a good start

The early analytics of the new kind of content look very promising. Looking at the pageviews of our research content in last three months, the story about the Syrian researcher is comfortably the most popular piece of editorial content we’ve published. The news item that comes closest has over a third less pageviews.

The article about our researcher hosting the Christmas Lectures is in the fourth spot after an old case study about some of our most well-known research (consistently one of our most popular pieces of editorial research content), and a news item about a clinical trial of our smart bandage prototype. That one was published in late November while our feature article was published on the 21 December, so I’m expecting the feature to rack up some more views in the coming weeks.

Why I like it

From a very practical point of view, the best thing about this new kind of content is its longevity. While news items act as a useful reference back to a specific point in time, the feature-style content stays topical for much longer. It’s a far more natural type of content for reusing without edits - whenever a relevant news story arises or a new research paper is published by the academic, it can simply be tweeted or pinned to the landing page of a department as it is.

A nice additional bonus in the process has been seeing how well this content fits into the new templates of beta.bath.ac.uk. Compared to the old templates, the user experience as a publisher has also been top notch! It’s been super easy to upload and publish these.

On a personal note, I really enjoyed the process of interviewing and writing. As an Editor, it’s rare I get to be involved at that stage - my job’s more planning, delegating and subediting. Getting to meet the researcher, listen to them passionately talk about their work and trying to capture that passion in the copy is a process I sometimes miss from my journalism days.

 

Worldwide: the journey so far

📥  International

Shipping the third edition

Before the Christmas holiday, we launched the latest edition of Worldwide: the end-of-year review. It was the time of the year to look in the rearview mirror and celebrate what Bath has achieved throughout 2016.

The Collection page curates 11 stories covering Bath's achievements in research, student experience and sports, including groundbreaking research projects, Bath athletes' participation at Rio Olympics, how students have fulfilled their dreams, and the celebrations of our 50th Anniversary.

After the launch, we promoted the page and individual stories over the 12 days of Christmas on the University's social media channels: Facebook, Twitter, LinkedIn, Google+ and Sina Weibo.

Looking back on the previous editions

Worldwide was born on 3 May 2016 when we launched the very first edition: the South Africa takeover.

The page aggregated content items to showcase Bath’s activities and impact in South Africa. The goal was to send clear messages about how our work in South Africa provided solutions to global environmental and social challenges, empowered future higher education leaders and developed top athletes of tomorrow.

Since this was the first time we have experimented to present the University's internationalisation on the website in this particular way, there was so much to learn throughout the entire production process, from content creation to curation.

Three months later, on 5 August when the Rio Olympics Opening Ceremony took place, we launched the second edition covering the Rio Olympics and Brazil takeover.

For this double-themed issue, we highlighted our Olympic hopefuls and demonstrated how the University was working with Brazilian partners to tackle environmental issues, understand the country's corporate governance reform, and strengthen links with industry.

This time, I worked with a wider range of sectors across the campus and produced a larger quantity of content. We also learned from the previous experience and iterated along the way to make the production process more efficient.

Adding a personal touch to the journey

Having been involved in every stage of the production process, I always feel bonded to Worldwide. Now I have to temporarily say goodbye to it as I'm expecting a new addition to my family.

There is no better way than to release a review version before I wrap it up and start my maternity leave.

A big thank you to all the colleagues I've worked with for making this happen. It's been such a pleasure.

I can't wait to deliver other exciting editions in the near future.

 

To infinity and beyond: my first 2 weeks in Digital

📥  Blogs, Team

2

As Christmas day fast approaches and the sound of tapping keyboards becomes a distant memory, I'm given time to reflect on my first few weeks in the digital team and what I've learnt so far.

About Me

My role within the Digital Marketing and Communications team is that of Content Producer. In time, I will be responsible for originating new content including audio, video and copy for the transitioned University website. I'm massively looking forward to this challenge and hoping I can use my creative eye, experience and vision to good effect. In the meantime, I have been somewhat haphazardly familiarising myself with the backend applications and processes that keep the digital team afloat. And which, quite frankly on the first day, gave me brain freeze!

I'm pleased to say this hasn't lasted.

What I've been up to?

There's no doubt there has been an awful lot to learn and mistakes have been rife. Justin and Rhian have been great and guided my early efforts with the patience of saints. This is all the more remarkable given the amount of work currently being shoehorned into place for Student Recruitment. So thank you and hats off! As with every well-oiled machine, it's important to be familiar with all the nuts and bolts that keep it ticking over and for the past couple of weeks I have been learning the basics: how best to use Trello, transitioning various content items on the Content Publisher, understanding the structure of Open CMS, learning about how the team functions, what Show & Tell is and how Standup works to name a few.

Am I the finished product? Not by a long shot, but Rome wasn't built in a day!

Who says all work and no play makes.....

In all honesty, I have been bowled over by the positive dynamic of the team as a whole. The agile method of working, something with which I was not all that familiar, actually works! Not only does it provide a great way to get to know the rest of the team but it encourages collaboration. The autonomy the agile method also provides really allows content producers to take full ownership of their deliverables whilst also advocating a 'two heads is better than one' approach. The functionality of the new CMS is clearly a testament to this. As is the laughter that sporadically echoes around the marketing floor!

What I've learnt?

What have I learnt in my first two weeks? Umm well, I've learnt I can eat Hanna under the table in an eating competition, that Richard has an incredible array of Christmas jumpers, and Phil (gone but not forgotten) has one of the most contagious laughs I've ever heard. However, I digress!

On a more serious note, I've learnt lots and am happy to have been thrown in at the deep end and given the freedom to make mistakes. After all, there is no better way to learn than by doing… then bogging it up… then doing it again… possibly bogging it up again and then finally getting it right! I feel fortunate that, in the heat of battle, frantically typing on my mac like something from the launch sequence of Apollo 13, I haven't got trigger happy and published anything I wasn't supposed to yet!

What do I like most about the department?

Attention To Detail - Everybody in the team is meticulous in their approach to content. Full-stop. No stone goes unturned and a real emphasis is placed on taking time to ask the right questions in order to develop 100% user-orientated content.

Passion - Everybody in the team is clearly passionate about their role and understands their contribution to the overall marketing strategy. This shared vision provides cohesion and direction.

Creativity - I really like the fact that the team's methodology is still a work in progress, people are open to challenges and finding new ways to improve their process. We are not afraid to tear up the rulebook or, of that truly terrifying word CHANGE!

Honesty - People can handle the truth here! I really like the fact that, because the culture is so positive, everybody is able to honestly analyse their own work and its value. In the best creative environments, there are no egos to tip-toe around, truth and logic can be handled and, as long as there's justification, challenges are welcomed and implemented.

The future....

What does future hold I hear you ask. Well, I'm looking forward to getting more familiar with the various faculty heads and processes, becoming a Jedi master of active corporate tone and, in time, helping to originate new content that meets the team's very high standards.

So thank you for having me, have a fantastic Christmas and, in the words of Tiny Tim,

'GOD BLESS US EVERYONE!'

2

 

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)

One Hour Upgrade - December 2016 edition

📥  One Hour Upgrade

The inaugural monthly edition of One Hour Upgrade was a quieter affair than usual as the Digital team was ravaged with Christmas plague. Thankfully our numbers were bolstered by a couple of One Hour Upgrade neophytes eager to get involved.

Fewer participants meant fewer stories added to the backlog (11) and a higher than average occurrence of pairing on stories. In fact, there were no lone wolves in this upgrade.

As always, we started with a Thursday prep session where upgrade ideas are jotted on post-its and pinned to the wall for consideration by the wider team. On Friday, we took a few minutes to organise ourselves, pair up and decide on the tasks we wanted to take on.

What we got done

  • John, Rod and Phil added a touch of Yuletide glitz to the office, with a decoupage Christmas tree made from stationery, some Health and Safety-baiting boughs of holly and artisanal paper chains.
  • Miao designed beta badges for our new starters who had yet to receive them. As a result she was then officially sworn in as a licensed beta badge creator.
  • Justin and Rhian added much needed disabled access information from our main travel advice page.
  • Dan and Tegan improved our default link state colours, in particular by removing the inaccessible yellow 'focus' state.
  • Tom and Iris added ‘last edited’ information to the status bar in our Content Publisher app. This makes it a lot easier to see when a content item was last changed and by whom.

What we learned

  • Even a small team can ship real improvements in under an hour.
  • Holly fixed at eye-level to a doorframe with sticky tape is not a good idea.
  • If a One Hour Upgrade task needs further technical or design review, it *will* overrun into normal sprint time and should be captured as a new story in Pivotal.

What's next?

Our next One Hour Upgrade is scheduled for 13 January 2017.