Digital Marketing & Communications

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

Posts By: Dan Dineen

One Hour Upgrade - May 2017 edition

📥  One Hour Upgrade

The stats

  • 9 eager participants
  • 16 stories added to the backlog
  • 11 stories popular enough to be moved into To-do
  • 7 stories started
  • 2 team-ups this time round, both cross-disciplinary
  • 0 Kinder Eggs

What was started

  • Dan and Suzanna looked at updating our fonts.com documentation but got bogged down in the fine details of project definitions and domain permission lists
  • Sean and Gabriel took a look at setting up a system of redirects that would allow the content team to find and edit source content from a go.bath.ac.uk short URL

What got done

  • Hanna put together a survey to find out how people around the University are using Flow, our editorial calendar tool
  • Tegan finalised candidates for the team’s Slack icon and set up a poll for all team members to choose their favourite
  • Rod F took another bash at trying to sort out the team Google drive and made good progress
  • John sorted out the office absence whiteboard, tidying up the ordering, adding new team members and providing a key for the various icons that adorn the board
  • Iris reviewed Tom T’s previous One Hour Upgrade task to get 'easy' editing via URL up and running

What we learned

  • Good documentation needs a clear aim and an understanding of the audience
  • Not everyone in the team thinks capybaras are cool. I’m not certain how we can fix this 🙁
  • The Google drive needs serious consideration before any rearrangement takes place
  • There are a number of small things that can be done that really do help the content team work faster and more efficiently. We'll continue to work on these in upcoming upgrades

What’s next?

The next One Hour Upgrade is planned for Friday 9th June.

 

One Hour Upgrade - April 2017 edition

📥  One Hour Upgrade

Although flat-out with sprint work, the team managed to squeeze in a quick One Hour Upgrade before the Easter break.

As it had been less than a month since the last upgrade, I was expecting fewer stories for consideration. As it turns out, I needn't have been concerned - a massive 16 fresh stories were added to the backlog, of which 8 were voted on to the ‘To do’ board.

Once again, pairing on stories was popular - 5 of the 8 stories were tackled by dynamic duos. There were a couple of cross-team partnerships in the mix but we could always do with more.

What was started

  • Tegan and Iris spiced up the deploy screen, adding more at-a-glance info and a fresh new design
  • Justin K spent his hour improving our Trello-based induction board for new developers
  • Rhodri and John worked through the summary paragraphs on our guides, improving consistency and relevance
  • Tom T began the hunt for a good HTML 5 video player for our Wowza live streams

What we got done

  • Dan’s attempt at a simple 'pens and pads' order turned into a clean out of the stationery cupboard. Turns out we have enough post-its to last for a while
  • Hanna and Rhian put together a proof-of-concept screencast for Content Publisher training

What we learned

  • We need to find a way to encourage more cross-team pair-ups for One Hour Upgrade
  • Our current video streaming services are still reliant on Flash
  • We have a lot more stationery than originally thought. We definitely don’t need any more Sharpies

What’s next?

Our next One Hour Upgrade is scheduled for 12 May 2017.

One Hour Upgrade - March 2017 edition

📥  One Hour Upgrade

This March we brought the sunshine with a productive One Hour Upgrade.

We had a record 19 stories submitted to the backlog, pruning those down to a manageable 8 with careful voting and some team discussion.

Participants opted to pair on 4 of the stories, with all the pairs comprising of team mates from the same discipline - content, development or design.

What we got done

  • Sean and Justin K got stuck on writing tests whilst trying to update our inventory parser to allow output ordering.
  • Rod attempted to tackle a tidy-up of our Google Drive account. He made some progress but had to admit defeat this time around. Due to Rod's competitive nature it's likely we'll see this story again next month.
  • Hanna and John mapped out an entirely new approach to our training processes and documented this on Trello.
  • In his first One Hour Upgrade, Rhodri reviewed the proposed audio for a project page screencast. He also discovered a new-found liking for his own voice.
  • Tegan and Dan investigated the accessibility of our main site navigation and came to the conclusion that nothing needed to change. They then updated various wiki pages documenting browser accessibility plugins.
  • The dynamic design duo also looked at creating a new Slack icon for the digital team. Ideas were sketched out and a few worked up in Sketch. Final designs will be put to the vote with the team later this week.
  • Tom looked at allowing content item editing via URL in the Content Publisher. The story's in review and will be finished off soon.
  • Iris remedied the weird title truncation in our filtered lists. It's in accept/reject and should ship soon, so no more chopped off titl…

What we learned

  • We should encourage more cross-discipline pairing on stories.
  • Directory tidy-ups seem like an easy win but rarely are. Because files come from across the team it's almost impossible for a single person to judge their relevance.
  • Before undertaking a One Hour Upgrade dev task consider tests that might need to be written first. Can both be the tests and the work be done in the hour?
  • Representing the digital team in a 128 x 128 icon is tricky.

 

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.

 

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.

 

Are we there yet? 3 years in agile design

📥  Design

It’s been almost 3 years since I joined the University of Bath digital team and, despite committing wholly to the agile workflow, I’m still struggling to reconcile certain aspects of our working practice with the freelance life I left behind.

As a designer with almost 20 years of experience and weened on a thoroughly waterfall design process the thought of handing over ‘unfinished’ work to a stakeholder is still an uncomfortable one.

How good were The Good Old Days?

In ‘The Good Old Days’ done meant done.

As an interactive designer I’d often be tasked with producing dozens of pixel-perfect page designs illustrating every conceivable content type, state and variant. These layouts were honed, polished, considered works-of-art (at least in my mind).

And these designs were considered final. The end of the design process. I was done. These static snapshots of a site were then presented to project stakeholders as a fait accompli.

“Do you like the design? This is what your site will look like”
“Yes. It looks great.”
“Wonderful. Summon the developers - we have a site to build!”

The Minimum Viable Product

In the Digital team, we use agile methodologies when designing and developing. In basic terms, this means that we are constantly iterating, improving and updating small, discreet elements of our designs based on feedback.

The upshot of this is that the first version, the thing you launch, the live site, is not perfect. In fact it never will be.

The MVP (Minimum Viable Product) is a base-level, functional version that lets the user do what they need to complete a task or locate a piece of information. For a designer, used to polishing a design within an inch of its life before letting anyone see it, the MVP is a rude awakening.

Things aren't perfect, they aren't the best they could be. They most certainly aren't finished. However they do meet the users needs for a functional, viable experience.

The lack of control still makes me feel nervous but designing for a specific user need has changed the way I think about my work.

Just ship it…

It can sometimes seem like an agile project has no plan, no overall vision for the end result.

From a design perspective, this can be frustrating when working on the conceptual elements of a design. Trying to get a grip on what *everything* looks like and how it holds together can be tricky when working on a single aspect of an interface component or tiny piece of functionality in seeming isolation.

The understanding of when an MVP can be described as viable is a skill in itself. The PO (Product owner) holds the product vision and is the arbiter of 'ready' - they say if a component, a template or a feature is in a position to ship.

And shipping happens as often as possible. One of the basic tenets of agile is that we look to get things in front of real users as quickly as possible. Any feedback the users provide is then used to refine or create further user stories to iterate on the previous work and make it better.

I may not have my pixel perfection but I do have real, genuine data from those on the coal-face using the things I have designed.

Caring (for your users) is sharing (with your users)

Putting things in front of people is still scary after all this time. No-one likes criticism. We certainly don’t like watching anything we have worked hard on fail.

The flip-side of this is that user-testing is a liberating, eye-opening experience for any designer. Watching a user struggle to find your meticulously crafted call-to-action or swiftly complete a complex multi-stage task brings you closer to your users.

I love this new-found connection with the end users of the products and services I design.

The MVP of embracing agile…

… is an awkward hug with good intentions.

Learning to embrace agile has certainly been a challenge. Three years in and my user stories could always be better, my fear of bad feedback has only slightly diminished and my frustrations at shipping something that (I think) looks like a dog has chewed it a bit have not abated.

However, the openness of communication and the interaction with the people who use the things I make on a day-to-day basis have meant that I believe my design skills have improved immeasurably.

Maybe it is possible to teach an old dog new tricks.

 

Development Plan Report Number 1

📥  Design, Show & Tell

Last month, I made a trip to the Library to delve into the archives of the University. Together with colleagues in Imaging, Design and Printing Services (IDPS), the plan was to get a crash course on brand design.

The head archivist, Lizzie, had sourced boxes full of printed materials for us, ranging from prospectuses to annual reports, promotional posters and pamphlets.

As designers we were first drawn towards the prospectuses. Published annually, it provides a fascinating insight into the prominent design trends in the year of publication. Our 90s 'rave' period is probably one to forget.

As is often the case, our most interesting discovery came from a rather unexpected source.

Development Plan Report Number 1

In 1965 an unassuming document outlining plans for the new University in Bath was published. With a brown and cream two-tone cover and type set entirely in Helvetica (known at this time as Neue Haas Grotesk) Development Plan Report Number 1 wears its 1960s origins proudly on its sleeve.

The report itself is a beautifully typeset outline of the plans for the proposed University of Bath. It’s stuffed full of abstract, organic diagrams and line drawings that are almost cellular in their approach. Throughout the report living, studying and social spaces are referred to as organic entities, flexing and changing to suit the needs of their occupants.

Origins of the logo

The first real surprise adorned the back cover - A large black and white photograph of the Sulis head found in the local Roman baths.

The Sulis head

Bas-relief from the pediment of the Temple of Sul Minerva in Bath

The creative decision to position this particular image here has had long-lasting ramifications for our design direction. The Sulis head has been inextricably linked with the University from its conception.

Which is why it was such a delight to discover a small hand-rendered version of the icon on the inside front leaf. This subtle design element cements the relationship between the nascent University and the Sulis head icon.

Sulis head icon on the inside cover

Sulis head icon on the inside cover

The first diagram of the university

Having discovered the impact the report had made on the University's brand identity we dug deeper, looking for yet more insight. In the first section - Aims and Principles - we found 'The first diagram of the university' (the actual title of the image).

university-diagram

The first diagram of the University

This incredible diagram illustrates a number key design tenets repeated throughout the report - namely a campus that grows outwards from a central hub (the spine/nucleus), close integration of residential, academic and social spaces and restrained (but not constrained) campus structure.

The beauty of this diagram is how well it effectively communicates relationships between traditionally disparate spaces. The campus is visually described in anatomical terms - It feels like a living entity, exactly as intended.

University patterns

Development Plan Report Number 1 eveals that the University of Bath was conceived from the very beginning as something new, something different, an institution to challenge.

The plan discusses possible residential and social patterns at length. Two of these patterns are based on the structure of existing academic insitutions  - A traditional 'Redbrick' college and the 'Oxbridge' model. A third proposed pattern is considered new and unique to Bath.

pattern-types

Three patterns for University structure

Redbrick

In the Redbrick pattern there is little relationship between the academic activities of the departments and the social activities of the students. These elements remain isolated from each other.

Oxbridge

With Oxbridge the pattern consists of a loose ‘community’ of independent colleges and scattered teaching departments. Colleges lose some of their academic significance to the departments and students live either within the college or in separate lodgings.

Bath

In the Bath pattern both study and socialising are closely linked in a concentrated urban setting. The university is conceived as a single varied community. There is no attempt made to separate or isolate the different facets of student life.

A parade of limited length

At the core of the proposed new campus is the parade. Designed to flex and grow as requirements change, the parade is never more than (about) 2000ft long - roughly 8 minutes walk from end-to-end at a leisurely pace.

Once again the thinking behind this concept it outlined in a series of beautiful abstracted images. Lacking in actual detail these illustrations still manage to convey a sense of movement and space between the edifices that make up the central area of the campus.

That the last illustration (the selected option) is still recognisable as the parade today is incredible.

parade-patterns

Flow patterns through the parade at the heart of the University

A view of the future

It was clear from just the short time we had to spend with the Design Plan Report Number 1 that things hadn’t changed as much as we might have originally thought. The founding principles of the University still hold true today including the Sulis head representing the University at a core level.

The beautifully executed line drawings summon up an image of a sophisticated, unified campus blending all aspects of student life into a seamless experience.

We came away inspired, motivated and with renewed optimism that the University brand was not far off alignment.

The design function Christmas wishlist 2015

📥  Design, Tools

After a busy year, the onset of Christmas always provides a brief moment to step back and reflect upon everything that has happened over the last 12 months.

2015 has been our year for honing workflows, trying out new tools and technologies, and shipping, shipping, shipping.

This intensive regimen has left us shouting "This is great!" almost as much as "Why can't you just work, dammit!" Here are the top five things the Digital team design function would really like to find under our Xmas tree to make us feel all happy and fuzzy.

5. A GUI Git client with interactive rebasing

42 un-squashed commits in that PR? You have fun with that…

My chosen Git tool - Tower - lacks the functionality to make interactive rebases. This means I end up having to drop into the command line to squash commits for my PRs and that’s just asking for trouble.

Please Santa, can we have a well-designed, feature-rich Git GUI client with interactive rebasing for Xmas?

4. sudo vagrant ‘please just work’

Vagrant has been a real boon allowing us to run up an exact copy of our publisher and editor apps on our local machines. However it can be a bit of a nightmare to manage if you don’t lean towards the technical side of things.

Please Santa, can we have a better way of managing/configuring Vagrant boxes that doesn’t mean I have to know what my $path is?

3. Web fonts that work everywhere

As a design team we’ve really gone hell for leather with regards to our implementation of web fonts this year. Although we’re very proud of what we’ve achieved, it has been hard work tackling cross-browser rendering issues, OpenType hassles, caching and pre-loading, font verification and much, much more.

Please Santa, can we have a standardised web font format that works perfectly on EVERY browser and platform?

2. A version of Sketch with the line-height bug fixed

We’ve pushed almost all of our preliminary design work through Bohemian Coding’s Sketch over the last 12 months. I've been working with Sketch since the heady days of version 1.0 but the software was completely new to Liam. Although he could see the benefits of the stripped-back interface and laser focus on interface design, he was constantly infuriated by Sketch’s little ‘eccentricities’ and general bugginess.

Please Santa, can we have a version of Sketch that’s stable, reliable and fixes that awful line-height bug once and for all?

1. Project Comet to hurry the heck up

Adobe’s last great hope? Maybe that’s a bit dramatic, but Project Comet is looking like a genuinely interesting contender in the race to grab the interface design crown.

Please Santa, Comet looks better than anything Adobe has made in ages. Can you get them to speed it up a bit? (Or at least get us on the Beta.)

Have a very merry Christmas and a happy new year! May all your workflow wishes come true!

 

Typesetting the Alphas

📥  Beta, Design

It's almost 10 years ago now that Oliver Reichenstein published his thoughts on the fundamental influence of typography on web design.

Web Design is 95% TypographyOliver Reichenstein

At the time the article provoked a lively discussion amongst the design community. Today you're unlikely to find many voices disagreeing with Reichenstein – unless it is to argue for an increase in the quoted percentage by a few points.

Designing a typographic system to underpin the large-scale redesign of the University's website is a complex and involving task. The seeds of our thinking regarding a full typographic review have been germinating since early-2014 when Liam presented his thinking around the haecceity of Bath.

The development of the alphas provided an excellent opportunity to implement a vibrant new typographic approach for the University of Bath.

Setting out our requirements

The first step was to outline the minimum criteria for our new typefaces. These criteria fit broadly into 3 categories:

  • Functional - The key technical requirements
  • Aesthetic - Legibility, clarity, flexibility and flair
  • Connection - The personality and the feel of the typeface

Functional

A full, flexible character set

It was clear from previous flawed implementations of open source/free typefaces that a full and varied character set was a must. When assessing typefaces we looked for diacritics, non-Latin characters, beautiful ligatures, alternative characters and more.

Reliable, performant delivery method

Typefaces with multiple weights and variants can clock in anywhere up to 1MB in size for the full set. We needed configuration options to reduce loading time, the option to self-host on local servers and other methods of cutting down were all explored.

Aesthetic

Rendering

A well-designed, crafted typeface should render optimally whatever device it is displayed on. Proper hinting and optimisation for screen display is vital.

Legibility and clarity

Our chosen typefaces must work at varying sizes and lengths of content. Clarity and legibility of text is paramount.

Connection

Personality

How does the typeface 'feel' when set on a page? Does the typeface genuinely reflect the University of Bath and the persona we have in mind?

Meaning

It's too easy to create a false relationship where none exists - we wanted typefaces with genuine meaning and subtext that enhanced the user experience.

With our criteria in place we started looking at typefaces. Many, many typefaces …

Over a handful of sprints we narrowed our typeface selection to a shortlist from foundries such as Dalton-Maag, Jeremy Tankard, Hoefler & Frere-Jones and other typographic luminaries.

And what did we find?

To meet our technical criteria we elected to use typefaces in the Opentype format delivered as web fonts via fonts.com. Opentype gives us the flexibility to add or remove typographic features as and when we need them - key to reducing the initial load time for multiple fonts. The fonts.com web font delivery service is fully featured, robust and offers a variety of font hosting options.

Early on it was decided that we should work towards selecting typefaces from a single foundry. Selecting our typefaces from one source meant that we could be sure that each face would share a commonality in design-thinking, style and concept. These values help to ensure different typefaces work together harmoniously when paired on the page.

To this end, we have selected two typefaces from a well-respected, long-standing UK type house now based in the Netherlands, The Foundry.

One of The Foundry's principle designers David Quay has a history with Bath having been the lead on the team that developed the Bath city typeface used for signage, way-finding and infographics. The Foundry are well regarded for their work in creating legible, elegant typefaces that have a quintessentially English feel but global appeal.

The typefaces

Foundry Origin

A beautiful, modern slab/Egyptian serif for headlines

A sample paragraph of text set in the Foundry Origin serif typeface

Foundry Origin - A quiet design with a big presence.

Foundry Sterling

A clean, legible sans serif for body copy

A paragraph of text set in the Foundry Sterling typeface

Foundry Sterling - A modern sans with a quintessentially English flavour

If you're quick, you can see the typefaces being used on alpha.bath.ac.uk and alpha.bath.ac.uk/about before the Alpha exercise comes to a close at the end of this week.

 

Show & Tell, 30 January 2015

📥  Show & Tell

A packed Show & Tell this week as we decamped to a more glamorous location than usual - The Chancellors’ building on the East side of Campus. Apologies to those who couldn’t find us in time to attend - you missed a doozy!

Tom Natt – CMS infrastructure

Tom talked us through the thinking and practicalities behind the infrastructure of the new University of Bath CMS.

The new setup involves a number of discrete applications handling tasks such as editing and publishing content. This content is then ‘fed’ through a static site generator which builds a robust, stable, and blazingly fast site.

This is a non-traditional set-up most elegantly described as ‘Small pieces, loosely coupled’.

The main benefit of this approach is that we are no longer beholden to the vagaries of database uptime. As the pages are compiled into static HTML/CSS/Javascript the site will continue to function without an active database.

A slideshow presentation displayed on a wall in front of a large audience

Tom giving an overview of our elegant new CMS infrastructure

Kelvin Gan – How to code

Kelvin took us on a wild ride in the first of his show ’n’ tell sessions on how to code.

This inaugural session covered $variables. Kelvin explained that variables are reusable 'buckets' that hold values - a string of characters, a single digit etc. If you find yourself repeating a value regularly (eg: margin-top: 20px;) then placing it in a variable will help simplify your code. An added benefit is that with your variable in place then changing multiple instances of a single value becomes trivial.

In fact, the most complex thing about variables is coming up with the right name…

An illustration of a bucket and an employee name badge

Variables are buckets for information. Naming them is hard!

Graham Hackney – CRM: Benefits for Bath

Graham wrapped up his 2-part series on our potential new CRM (Customer Relationship Manager) with a run down of the potential benefits for the University.

  • Coordination of our outgoing comms
  • A significant technical and functional upgrade to our existing software
  • An increased understanding of our target market
  • Enhanced conversion of the top students by making it easier to identify them earlier in the induction process
  • A greater understanding between departments, faculties and groups across campus
An illustration of outline figures. The central figure is a gold statue lit from behind

A new CRM will make identifying top students easier

Marie Salter – MOOC big data

Marie shared some insights into the performance of our MOOC (Massive Open Online Course) over the past 12 months and highlighted some of the emerging patterns we can see from the data captured.

Although we can’t share the exact figures it’s clear from the stats shown that MOOCs are an increasingly popular and efficient way of learning.

A slideshow presentation projected on to a big screen

Marie provides some up-to-date stats on the success of our MOOCs

Liam McMurray – Break conference

A mammoth session from Mr McMurray as he attempted to summarise an entire 2-day conference in a 5 minute presentation.

Break took place in Belfast back in November 2014. It pitches itself as a design-led conference that eschews technical information for a more inspirational approach.

There were a wide variety of speakers and topics over the 2 days but, as time was short, Liam focused on the talk from Sarah Richards, formerly of GDS and now at Citizens Advice Bureau.

Sarah shared some of her insights into working on gov.uk and how these are being applied in her new role at CAB. To summarise:

  • Make it simpler - Start with user needs and cull everything else
  • Make it clearer - Speak in plain English
  • Make it faster - If you can answer a question before the user actually gets to your site then all the better

Take a look at Sarah’s slides from the Break conference

Take a look at Liam’s slides on the Break conference

A slideshow presentation projected on a big screen

Liam shrugs off the pressure of summarising an entire conference in 5 minutes