Digital Marketing & Communications

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

Designing the alphas

📥  Alpha, Design

The alpha launch culminated in 12 weeks of intensely-focused work after 12 months of research, investigation and design thinking, fitting around everything else we were shipping (check our sprint notes for details).

The critical design decisions that have been made in the run-up to launch are informed by data gleaned from our ongoing user research, site analytics and conversations in and round the university. To ensure our designs deliver, we have considered how each choice would meet the needs of our users.

The user needs for a site of this size and complexity are, of course, legion. However there are 4 cornerstones that underpin all of our work:

  • Responsive
  • Accessible
  • Flexible
  • Fresh

Responsive

Device-agnostic design. Every user should have an optimal experience, no matter the device they view the site on.

We’ve put a lot of work into how each element and module in the site reacts when viewed at different screen/device sizes, ratios, resolutions and orientations.

An illustration showing how content modules reflow depending on the size of the screen

Designing modules that can adapt to their location and context

Accessible

The Alphas have been designed with accessibility in mind from day one. We’re aiming to achieve a minimum WCAG AA standard across the board. This means giving equal consideration to the visitors viewing our site content and the editors and administrators who create it. We are well on our way to achieving this goal.

Flexible

No more designing individual pages one-by-one.

The new Alphas consist of a series of content types. There are 16/17 content types that include long-form editorial pieces to landing page collections and complex organisational information.

We’ve taken inspiration and guidance from a number of modular design systems, such as Brad Frost’s Atomic design, and have been designing from the smallest elements upwards. These elements are combined into reusable components that display and function consistently across every content type.

An illustration of an onion with the centre coloured red

Designing the smallest elements first and then combining them to make modules

Fresh

The Alphas sport a new visual approach that pulls together months of design thinking, research and investigation into a coherent design that truly represents the University of Bath.

The new design includes a comprehensively revised colour palette, a bold new typographic approach, a more flexible underlying grid structure and more besides.

We’ll be blogging about each of these cornerstones in more detail over the coming weeks. In the meantime the alphas are as their name describes - a starting point. We'll continue to experiment, iterate and refine the designs and user experience in preparation for the upcoming beta versions.

Digital Team sprint notes, 20 - 26 January 2015

📥  Sprint notes

In the sprint we've just finished Miao has completed her discovery sprint for the new International Relations Office section on www.bath.ac.uk. We now have a prioritised list of user stories based on needs, a sitemap and page tables for the content to meet the needs. All of this is going to be essential for helping us deliver the section.

Iris and Hanna have planned out a roadmap for improvements to research content over the coming months.

The undergraduate study section of the site now includes information for students looking to join us in 2016.

For the next stage of the new www.bath.ac.uk, our designers have changed our visual framework to use a 24 column layout rather than 12 and reworked key elements of our pages to work with this.

79 of the requests received by our support desk were resolved and 6 content maintenance tasks were also completed.

Our development team completed the move of two of our three alphas to a new set of servers and also got our Rails test reports working in Bamboo in an easily repeatable way (you can read how we do it on our wiki).

In the sprints starting today we're moving on to the next stage of working on the International Relations Office section, and performing further prototyping on a new online prospectus. These will be done to the background of improving our content inventory processes and performing some serious updates to three Professional Service sections.

Alpha site release notes, 12 - 19 January

📥  Alpha, Communication, Development, Style, content and design

On Monday 12 January, we launched an alpha version of our site to internal users, including a new external homepage and the about section, which is controlled by our new CMS alpha. Collectively we've been referring to these as the Alpha site.

The Alpha site is still a work in progress, and we're testing it with our internal users now because your feedback will help to shape its development. We want to see how you use it, whether it meets your needs as a user, and what problems you encounter — so we can fix them before they wreak havoc on a larger audience.

What we did this week

We've had a lot of useful feedback from our users already, and we've fixed some of the issues you've raised, as well as continuing to tackle pre-planned work from the Alpha backlog.

  • Fixed issues that meant some maps were difficult to find or unavailable, including updating redirects from old URLs and changing which page included the map links.
  • The homepage is now served statically, which will lead to performance improvements and better stability if the CMS is unavailable.
  • Improved how the lead image on the homepage displays on smaller screens. A much larger proportion of the image is now visible and editors can select the alignment for how the image is cropped.
Screencap of the homepage Alpha.

Image cropping on small screens before.

Screencap of the homepage Alpha.

Image cropping on small screens after.

  • Worked on a first iteration of an editorial calendar for the homepage to ensure it's frequently updated with interesting, relevant content.
  • Replaced the National Student Survey graphic in the homepage footer with a better-looking SVG version.
  • Standardised design elements in the header and search bar across the Alpha site.
  • Reordered the link lists on the about landing page so it now leads with our mission and values.
  • Changed the wording that links to location pages on team overview pages from "The team is located in [location page]." to the more flexible "Find out more about this team's location in [location page]."

Keep it coming

Please continue to share your feedback with us. Your feedback is most helpful when it's specific - let us know what task you wanted to accomplish on the website and what stopped you, and we'll look into how we can fix it.

Show and Tell, 16 January 2015

📥  Show & Tell

It was a big crowd for our first show and tell of the year and that wasn't just because we've had two new starters in our team!

Transport discovery and advice - Paul

Paul used a rare Friday in the office to make a starring role in the line-up. He kicked things off with a talk about his work on our transport advice. He had carried out a content audit, inventory, analysis and a benchmarking exercise (phew) in order to find out what our current provision is like
and how we can improve it. His benchmarking involved looking at 20 websites, including other universities, and companies that dealt with large volumes of visitors such as the 02 Arena. From this extensive research and discovery project, he was able to make a series of findings and recommendations.

Crucially, information should be centred, in one place and not spread out through the site. People shouldn't have to journey throughout the website, taking wrong turnings in order to find out how to get here. However, despite providing central information, a balance needs to be struck. Information should be concise. We'll provide a postcode, GPS information for sat navs and then signpost users to useful information on public transport rather than replicating information ourselves. Instead of creating our own content on bus timetables and cycle routes for example, we should link to the pages curated by those in charge of those services. We also won't hide the important information in lots of extra content, that may or may not be relevant.

This means we can be sure the information is accurate and up-to-date and our visitors know what they are doing and that they can visit us, without worrying about every single detail.

Go Live - Tom N

Tom N treated us to a display of how we launched our homepage alpha. Yes that's right. In case you haven't heard, months of hard work boiled down to a few tense moments as we 'hit the button'. Our alpha homepage is live! However one does not simply hit the button as Tom pointed out. LOTS of preparation was needed and lots of hard work happened, so that it could be that simple when the moment came. Thanks to all of this hard work, going live involved the changing of a few characters in the code that had been slaved over for months. If for any reason we need to go back, we can. All we need to do is revert those characters again. Hopefully though, we won't need to do that and we can enjoy watching our alpha venture out into the world to be received by others.

Customer Relationship Management: maximising the impact - Graham (a warmly welcomed guest speaker)

Graham took us on a metaphorical journey to help us understand how to maximise the effectiveness of our communications. There are some key, key parts to this. Timed to perfection - Any messages need to be timely and accurate.

  • Focused on the target audience - This means you need to know them. How old are they? What is their year of entry? Our messages need to be focused on our audience, why does this message matter to them?
  • Functional and relevant messaging - If your messages aren't functional or relevant then it could damage your relationship with your audience.
  • Reliable - This is about trust. If we send out a number saying it can help, and it turns out to be the wrong team, or the wrong number altogether, the person who tried that number will have a negative opinion on that message and of us.
  • Coherent - Any and all messages should be confusion-free. Your audience must be able to understand what you are saying.
  • Informative and expected - You can't assume. You must ask and be prepared for them to change all the time.

This journey was part one of two, so we're looking forward to the next leg.

Pattern Library - Liam

Websites are made out of chunks, but how do we organise them? This was the topic of Liam's presentation.
Examples of these chunks are:

  • the search bar
  • accordions
  • drop-down menus

These are 'patterns', items that can appear on multiple pages. In order to get an overview of all these chunks, Liam created a pattern library. This library contains these chunks and the code that makes them work. This library also draws from the style guide and includes how dates should be formatted. In the future this library will be built on and typography will be included. Already it is an excellent resource that will aid page building and help make design decisions.

How and why we make our design decisions? - Dan

Dan followed on from Liam with a talk about design decisions and how the process is changing with the increasing advent of technology and the 'internet of things'.

The old way - designers made a page, outwards in. They knew the size of the page - the size of an average desktop / laptop screen. The page was rigid, it had elements on it in a fixed location on the page.

However this was when computers were the only way people viewed webpages. But what happens when pages are viewed on mobiles, tablets, watches or even fridges? Fixed pages will not provide a good experience.

The new way -  We should design inwards out. Small discreet elements of functionality which can then be placed anywhere on the page, depending on screen size. Line heights can also change depending on the device used to view the page.

Cool name? There are many many different design methodologies capturing this area:

  • Atomic design
  • BEM
  • SMA CSS

Dan and Liam are using a mix of these ideas and theories and will be coming up with their own name soon!

That was it for this Show and Tell, we're looking forward to the next one already!

Elements-or-tetris

Page designing or Tetris? - Photo kindly supplied by Kelv

Digital Team sprint notes, 13 - 19 January 2015

📥  Sprint notes

What we did

In the sprint we just completed, the Digital team:

  • Made improvements to the Alpha site based on our backlog and responding to feedback from users
  • Finished prototyping design elements that will make up our new content types, writing them up in HTML as a pattern library to serve as a ‘primer’ for the visual and interactive behaviour of our Beta site
  • Continued updating /study in line with printed version of 2016 prospectus
  • Ran user story workshops with members of International Relations Office (IRO) and started production of the new IRO section on bath.ac.uk
  • Ran a discovery sprint with Computing Services to set up working practices and procedures for them to self-manage the preparation of their content for transition to the Beta site
  • Submitted a report about improving our advice on traveling to and from the campus to senior management and created content for this new travel advice section
  • Deleted Office of Policy & Planning content that is no longer required, fixed broken links, documented pages requiring additional content/rewrites prior to transition to new page templates
  • The Content team completed 8 content maintenance tasks
  • The Support Desk received 80 requests and resolved 66.

What's coming up

In our next sprint, the Digital team will:

  • Iterate the Alpha site
  • Apply the design patterns to content types for testing
  • Begin detailed inventory of content in sections of bath.ac.uk ahead of transition to the Beta site
  • Archive obsolete site sections
  • Iterate the new Prospectus application
  • Develop the roadmap for Research sections of bath.ac.uk
  • Add filtering to blogs.bath.ac.uk
  • Progress the development of IRO and travel advice pages, and the preparation of Computing Services, OPP and Postal Services for transition.

Building alpha.bath.ac.uk

📥  Alpha, CMS, Development, Tools

We've changed just about everything to do with how we manage bath.ac.uk for the alpha, and this includes the underlying technology.

The live www.bath.ac.uk is hosted dynamically from a monolithic Java-based CMS (OpenCms) running on Solaris servers with Oracle as a back-end database and all the code is in Subversion.

The alpha site is being served from static HTML files generated by Hugo. The inputs are provided by multiple Ruby on Rails apps running on Linux servers using MySQL, MongoDB and an off-site service for data storage, and all the code is in our local GitHub Enterprise installation and is deployed from Bamboo by Mina.

The difference could not really be much bigger! It's certainly been a challenge to get up to speed with so many new things all at once but we think that this stack, or some version of it - that's what alphas are for! - should be more future-friendly than our existing infrastructure.

We'll go into more detail on how we're using each piece of technology in the following days and weeks.

Improving our short URL service

📥  Style, content and design

Starting from today, if you ask us to create or edit a short URL on www.bath.ac.uk, we'll provide you with a go.bath.ac.uk web address instead.

Benefits of go.bath.ac.uk

Short URLs are shortened web addresses which are used in marketing campaigns, social media and printed publications. They're sometimes called vanity URLs or shortcuts. They allow users to go directly to a page in a website without the need to navigate through the site or use a search engine. They are also often easier to say than the full address.

In the past, we created short URLs by editing a file on a web server. This has been the wrong approach; it's slow and over time this file has become harder to maintain as we've added more addresses.

go.bath.ac.uk addresses have been introduced incrementally over recent months but with the deployment of a new URL shortening service that we have developed, we are ready to roll out go.bath.ac.uk URLs as standard. The benefits are:

  1. It's much easier to create and update short URLs
  2. We now keep a history of changes made to a short URL
  3. We now keep a log of whenever someone visits a short URL.

Existing short URLs

If you ask us to edit an existing short URL starting with ‘www’, we will also create a go.bath.ac.uk web address for you to start using.

We'll agree a timeframe with you to retire your old 'www' short URL. You'll have time to update any marketing materials, letterheads or business cards to use your new go.bath.ac.uk URL.

New short URLs

To make it easier for users to read your shortened address, all go.bath.ac.uk addresses will use hyphens (-) between words. This will make our URLs consistent with the rest of bath.ac.uk.

Example of a new shortcut:
go.bath.ac.uk/research-group is a shortcut to http://www.bath.ac.uk/department/research/research-group.

To make sure that your short URL request is accepted you should ensure that:

  • the short URL doesn't already exist
  • the address can be easily read and understood by other people
  • it only contains lowercase letters, numbers and hyphens.

Requesting a new short URL

You should email web-support@bath.ac.uk and include the go.bath.ac.uk address you'd like to use and also the web address of where you'd like to point it to.

Redirects

This change does not affect redirects which we use to send users to the location of a page or folder which has moved.

URL standards for bath.ac.uk

While we are on the subject of short URLs, if you are interested you may wish to familiarise yourself with how URLs are used on bath.ac.uk and their formatting requirements. These standards are subject to regular review and we will post announcements of any updates.

Digital Team sprint notes, 6 - 12 January 2015

📥  Sprint notes

The first sprint notes of the new year and the office has been very busy.

What we did

In the sprint we just completed, the Digital team:

  • Went live with the CMS homepage, /about section and events alphas.
  • Drew, with sharpies, all the different visual elements that make up our new page templates (i.e. Search bar, link lists, button groups) and then committed them to HTML to produce a pattern library once satisfied with their structure.
  • Conducted a page discovery of the new International Relations Office (IRO) section on bath.ac.uk by carrying out an inventory and audit of the existing content.
  • Worked on an update of /study content to bring it in line with the 2016 prospectus which will be printed later this month. Making sure that the web content is user focused and targeted at the correct audience of potential applicants.
  • Met with key stakeholders in Transport and Security to discuss plans for an overhaul of information related to travelling to and from the University.
  • Started prepping our production infrastructure for further alpha work.
  • Carried out a content audit of Postal Services in preparation for an upcoming sprint.
  • Carried out a content audit of Computing Services for the sprint starting this week.
  • There were 84 tickets received into the Web Support queue with 69 tickets resolved by us. 4% of tickets needed more information before resolution.

What's coming up

In our next sprint, the Digital team will:

  • Complete the /study updates ready for the release of the hard copy prospectus.
  • Start IRO sprint zero - content and user story planning for the IRO section.
  • Go postal - work on the Postal Services pages of the staff information section of the website.
  • Work on the Computing Services section of the site.
  • Continue with alpha work.
  • New template design - continue work on the new content types for the alpha.
  • Carry on with support and look at suitable candidates for replacing the current RT system.
  • Ruby production - move applications which power the alphas to a new set of servers.
  • Put live the forms for applications for International Students who apply for scholarships.

Launch of alpha.bath.ac.uk

📥  Alpha, CMS

We are pleased to announce the launch of a new test version of bath.ac.uk. The launch of the Alpha is a major milestone in our programme to improve the University’s digital communications.

Included in the Alpha are a new homepage, new page templates and a new content management system. Each of these Alpha elements represents our new approach to leaner, user-centred publishing online.

The purpose of the Alpha is to put our approaches to the test with a larger user base than we’ve previously had access to. From January 12th - February 28th we are redirecting all staff and students to the Alpha homepage and About section. During this time we’ll capture feedback and data to steer the next stages of development, which will be the Beta [site and CMS] to completely replace the current bath.ac.uk from Summer 2015.

The Alpha was produced in between our other project work over the course of 3 months by a small multidisciplinary team. We based the design and development on data and insight drawn from analytics, casual feedback, discovery projects, support tickets and structured user interviews and testing.

The Alpha infrastructure could not replace the current bath.ac.uk at this stage. Over the course of the Alpha period we will be publishing follow up posts to this one explaining in more detail the approaches we've taken with design, technology and the editorial model, where we hope that they'll take us as well as what we are learning from the experience.

If you visit the Alpha, we hope you find it a positive step forwards. Feedback is always welcome and can be provided via the survey on the Alpha pages, via web-support@bath.ac.uk or in comments on this post. We look forward to hearing from you.

Digital Team sprint notes, 16 December - 24 December 2014

📥  Sprint notes

It's been very quiet in the office this week - except for the Christmas music blaring out of the iMac at the end of the room.

This has produced a different atmosphere in the office which seems appropriate for the last two days which I'm calling our Christmas micro-sprint (23 - 24 December). These sprint notes cover this additional time as well.

In spite of our ever dwindling numbers as people go off for the Christmas break, we have been busy with a variety of things.

  • Continued work on building the research experts directory
  • Started work on deploying our exciting new alpha sites
  • Updated the International Scholarships application pages, ready when new applications open next year
  • Started the sprint for the online undergraduate prospectus to make sure that it will be in line with the hard copy prospectus when it is released later in January 2015. Introduced the Faculty Web Editors, Liam, Iris, Charlotte and Maree, who is looking managing the print prospectus, to the Trello board for this sprint.
  • Completed an audit and reconciliation of our visual and stylesheet assets, in preparation for a fresh new approach to the way our content is displayed in the beta stage of our new publishing apps
  • Worked on improving our PHP app deployment process
  • Started work on a new section for the International Relations Office
  • Updated the way our undergraduate prospectus app deploys.

We have also been making sure to take appropriate rest breaks in our work day.

The Health and Safety Executive requires us to have regular rest breaks

The Health and Safety Executive requires us to have regular rest breaks

Next year we will be working on many exciting things, but until then we're off to have a well deserved break.

We wish you a very happy Christmas and New Year.