Launching the pattern library

Lego blocks organisedToday we launched version one of the pattern library on ux.jisc.ac.uk – a collection of 30 key user interface elements. These should allow developers to quickly bring a consistent and high quality user experience to new and existing Jisc websites.

When to drop the beta tag

Working out when to lose the beta label is tricky. For us the big thing was making sure the patterns were stable. They should work (for makers and users) and meet our own standards (including accessibility). This doesn’t mean everything is perfect – but known issues should be minor. When we release fixes, makers should be able to upgrade to them without anything breaking.

Effort and experience

Getting this far with the pattern library and the site has been a huge undertaking.

Ben’s fantastic work to produce clean and elegant patterns, extending and developing the Jisc look. CX’s efforts in pattern creation, support and advice. The heroic work of our front end developers, Leigh and Tom, to not only build patterns, but to raise the quality of our engineering, and keep us true to our standards. All tied off with the dark arts of Simon and the back end developers who made the site and the library delivery possible (and put up with us getting used to Git).

Meeting the team behind the BBC’s GEL was a great place to start the whole project – but it’s been a huge learning curve for us all. There aren’t many other (public) examples of what we were trying to achieve so a lot of the time we had to make our own way. We’ll try and post what we’ve learnt here, or if you’re interested then drop us a line.

How we’ll develop the library

First we’re going to start working through our known issues, and tidy up those loose ends.

We’re already working with some site owners to help them adopt the pattern library. We will be working with a handful more over the next few months. These transformations are a chance to iron out the kinks, make sure it’s easy to use, and to give live examples for others to see. We will also be creating new patterns as we encounter problems that need them.

Ultimately we expect use of the pattern library to become entirely self-service. We still want to have close contact with developers and service owners, but hopefully as more of a community – sharing experiences, issues, and through this – identifying new patterns or those that need work.

This regular feedback is how we plan to grow the library (and site). We know that to make the most of our investment we’ll need to keep it fresh – provide new patterns outside of the core set, and adapt and respond to new insight, and changing user behaviours and expectations.

Our ambition

Today is a big step towards our ambition of a consistent experience for users of all our sites. Tools to allow makers to create interfaces based on robust user experience and engineering principles. Increasing quality, reducing costs, and allowing us to react more quickly. Pride, passion and pace. Yep. Think this ticks all three.

What’s in a name

hello_sticker

Following on from my previous post I wanted to explain the logic for the change of name on the project formally known as global experience language.  

In CX partners initial assessment of our web estate they recommended that

“Service mode sites should be made to feel consistent with other Jisc services using modules from a flexible global experience language (GEL).”

In my previous post I said;

Search for global experience language on the web and you’ll find the BBC’s GEL. I’m not sure if they coined the term, but their version is certainly the most visible and well developed example – and it’s an example that we can draw many parallels with.

“The BBC have had to tackle a sprawling web estate that has grown in an organic way, that has been developed by geographically separated and structurally segmented teams. The BBC describe their GEL as “the glue that ties all BBC services together” and that is something that we’re very much striving to achieve.”

We had a vision of how we wanted to unify our web estate and the BBC’s GEL was an excellent example to help people realise this–something tangible that we could share early on in the project and say, ‘we’re building something like this’–and our assumption was that we were building our own version of a global experience language.

The problem with words

Terminology amongst our own project team is a problem, scale this up to the whole business and it gets even worse. Early on in the project we used terms like component, module, element, pattern and template to describe the various ‘bits’ that make up our pattern library, but these words have different meanings to different people.

“Excuse my ignorance, but could you give me an example of what a component is” – Service Manager.

The words we use need to be clear and simple, language that technical and non-technical staff can both understand. Global experience language is a perfect example. During user testing we found that some back-end developers thought the word ‘language’ referred to a programming language that they would be expected to implement.

So this got us thinking was the term ‘global experience language’ right, moreover is what we were building actually a Jisc ‘global experience language’?

So what are we building

The term started to feel too ‘throw away’, as though all we wanted was for ‘the GEL’ to be implemented on website X, Y and Z and then they’re done, as though it was some kind of silver bullet.  

As an internal customer service team we’re user experience (UX) evangelists, engaging with other teams across the business we try to influence and educate in the practices of user-centred design. Just because some of us have UX in our job titles doesn’t mean that we are the only ones that have to worry about it, it’s the responsibility of the whole business.

This is where the BBC’s model fell down for us, they already had user experience and design teams embedded across the business that believed and cared about their GEL, we didn’t. We don’t just need our own pattern library or GEL, we need to build a UX culture across the business.

Jisc user experience and design

So what we’re building is the home of user experience at Jisc. A place that we can share patterns, examples, guides and best practice. A place to get practical advice, learn new methodologies and get inspiration. it will be the toolkit for everyone involved in building digital products for Jisc.

Jisc user experience and design (ux.jisc.ac.uk) is the clearest and most concise way we can express that this is the home of user experience at Jisc. However we felt as UX is still not universally understood as a concept that we the word design needs to be explicitly expressed so that our offer is clear to all our users.

What’s next?

With ux.jisc.ac.uk out of beta in early November 2015 our focus is shifting to supporting the implementation rollout – learning, developing and iterating as we go. We’ll be sure to share our progress, so I’ll be back soon with another post.

Web writing: back to basics

web-writing-banner

As one of three web content editors at Jisc, much of my time is spent editing raw content into something clear, helpful and engaging. At least I hope so!

Training our subject specialists

Jisc has a brilliant team of subject specialists who, despite their busy roles, have been working with us to update our quick guides.

The total number of guides on the site is only going to grow, so a few weeks ago we asked the lovely Christine Cawthorne from Crocstar (who has trained content producers at Government Digital Service) to give the subject specialists a brief introduction to the things they should consider when writing for the website.

Why writing for the web is different

If you’re reading this, I’m probably preaching to the converted. But sometimes you have to go back to basics.

It’s well-documented that people read web pages differently from print and are more likely to scan to find what they need, often reading less than 30% of a page. Helping people scan content without interruption is one of the reasons we favour sentence case over title case (we also think it makes everything feel a little less formal…)

Here are a few simple ways you can help transform your content:

  • Put the most important information first
  • Use meaningful headings
  • Write as you would speak: use plain English and cut the jargon
  • Keep sentences short and concise, wherever possible
  • Avoid long paragraphs
  • Use bulleted lists where appropriate

Even Google is a fan. They agree that writing clearly is good for search engine optimisation.

Writing for the web – for everyone

Being able to structure your content and write clearly for the web isn’t just for use in guides or features. It’s a helpful skill for anyone who wants to communicate something: writing a job advert, blogging about an event, even generating interest in that sofa you’re trying to sell on Gumtree!

One of the tools Christine shared was Hemingway Editor: great for cutting the waffle. There’s also some excellent guidance on gov.uk which dives into more detail.

Tweaking the IA

Help us improve the information architecture of jisc.ac.uk:
take our tree test

While running quite a few big projects* we’re also busy keeping the main Jisc website up to scratch.

We’ve been working with internal teams to test and revise the IA of the site, in particular how we group our products and services. We’ve run public tree tests before and found them to be fantastically useful – though they do raise lots of questions. For that reason, this time Nomensa are running facilitated sessions alongside the online test. This way we should get some qualitative insight alongside the numbers.

If you’d like to get involved then do have a go, and help us keep jisc.ac.uk as usable as possible.


* Some other bits that we’re up to:

  • Our shared pattern library and guidance for all Jisc sites
  • Migrating thousands of pieces of content from our array of websites into one place
  • Rebuilding jisc.ac.uk to provide self-serve tools, and deliver single sign-on for Jisc’s services

We will definitely, probably, eventually, get around to blogging in more detail about these. Promise.

Best seat in the house

Kirsty and Vix at mission control - the best seat in the house

Me and Vix at mission control – the best seat in the house!

Last week, myself, Vix and Rich headed to Birmingham for Digifest. Having helped out at last year’s event on the digital dream wall, talking to customers and listening to their issues and needs first hand, my role this year was much more behind the scenes but vital especially for delegates following online.

With what I reckon was the best seat in the house, dubbed ‘mission control’, I kept an eye on the action from the main hall in between uploading presentation slides from each of the sessions as soon as they had taken place. No mean feat but worth it to enable anyone attending the event or joining in online being able to access all the content almost immediately!

It was a busy but fun couple of days with time to soak up the atmosphere, meet colleagues from across the organisation and check out the exciting technologies at the ‘fab lab.’ The amazing, fully immersive Samsung Gear VR headset took me on a rollercoaster ride and diving to the bottom of the ocean which, for a landlocked sea lover, rounded the event off perfectly 🙂

Building a global experience language for Jisc

GEL

First up let me introduce myself as I’m new here. I’m Benjamin (not to be confused with Ben) and I have joined the team on secondment as user experience (UX) specialist. The main challenge in my new role is to lead on the creation of a global experience language (GEL) for Jisc – so that’s what I’m talking about.

Background

Jisc’s web presence has grown organically, along with the organisation and in a communications audit we identified 150 websites each with a different design, navigation system and tone of voice. While individual websites are often excellent, the user experience of our web estate as a whole is fragmented, confusing and inconsistent.

We run the risk that customers are not finding the products, services and advice they need. Where users do regularly engage with services it’s sometimes unclear these are provided by Jisc, and how complementary services in the same area can be accessed.

Customer and user experience consultants cxpartners were commissioned to conduct an independent assessment of the Jisc web estate and advise on how best to bring clarity and consistency to our digital offer. Core to their assessment were the principals that the default home for all our customer facing content should be jisc.ac.uk, however exceptions would be made where it is clear that the long-term user experience will be significantly diminished by bringing content or services onto the Jisc website. This led to the need to create two flavours of ‘In’ – full integration and service mode

In their own words:

“The content and functions of service mode sites are aimed at Jisc’s core audiences and so should be firmly brought ‘In’, however there is recognition of the complex UIs [user interfaces] and standalone nature of these services. Service mode sites should be made to feel consistent with other Jisc services using modules from a flexible global experience language.

A centrally managed and designed GEL will not only improve the user experience by creating consistency across the web estate but also save time, money and duplication of effort where individual teams are creating separate UIs for each of their sites and services.”

What do we mean by a global experience language?

Search for global experience language on the web and you’ll find the BBC’s GEL. I’m not sure if they coined the term, but their version is certainly the most visible and well developed example – and it’s an example that we can draw many parallels with.

The BBC have had to tackle a sprawling web estate that has grown in an organic way, that has been developed by geographically separated and structurally segmented teams. The BBC describe their GEL as “the glue that ties all BBC services together”, and that is something that we’re very much striving to achieve.

Defining the Jisc global experience language

At it’s essence the GEL will be a pattern library and style guide that will bring consistency to our digital output. But more than that, we want it to express the rationale behind these elements and how they can be combined to best effect. It’s about interaction, feeling and behaviour – a toolkit for everyone involved in building digital products for Jisc.

As Heidi Lightfoot says in her recent article Let’s Ditch the Brand Guidelines:

“We now judge the success of a brand not by its ability to manage its brand mark but in its ability to be recognised without its mark. Success comes in capturing the essence and spirit of a brand; which requires a broader range of assets delivered by ‘style guides’ rather than ‘guidelines’.”

And this is something we believe a GEL can help us achieve. And we also believe that this is something user experience design can help us achieve. Wikipedia defines user experience design as:

“The process of enhancing user satisfaction by improving the usability, ease of use, and pleasure provided in the interaction between the user and the product.”

Through the GEL we want to make the experience of Jisc’s web estate clear, simple and fast. Where individual services become familiar, easy to use and consistent, helping the user understand our portfolio of services and the value of Jisc’s offer.

One of our key objectives is to where possible enhance the user experience of sites as they’re brought inline with the GEL. With only a small dedicated UX team we’re under no illusions that this is going to be a challenge, but as Leisa Reichelt says “there is no UX, there is only UX”. As an internal customer service team we’re UX evangelists, where we engage with other teams across the business we try to influence and educate in the practices of user experience design. As Lisa suggests in her post, just because some of us have UX in our job titles, doesn’t mean that we are the only ones that have to worry about it, its the responsibility of the whole business.

With the GEL we have an opportunity to showcase and surface the tools, techniques, resources that we use on a regular basis to the business as a whole. Our hope is to empower individual teams, to get them to start exploring and experimenting with these techniques, to start thinking of themselves as UX-ers, to start to build a UX culture across the business.

We know this is a tough challenge, and this is a long road, but all roads start somewhere and this is where ours begins.

New web project manager – the ‘hello’ post

It’s always hard to know precisely what to put in a first blog post, so I’ll take the easy route and go with “hello”, my position in my new team, what I’ll be doing and how I work.

Web team PM

I have joined Jisc as a Project Manager in the Web team – “a relatively straightforward brief” I thought – but I have since learned… The challenges will be varied, exciting and rewarding, as the nature of the project portfolio is diverse.

The projects

To kick off, I have a few projects to get stuck into:

R&D section of jisc.ac.uk: Nathalie wrote about this in her 18th September blog post, and it is one which lots of people within Jisc are aware of. This new part of the website will house the information about the great projects, which Jisc helps to germinate and fund, that drive web technology development in the Higher Education and Further Education sectors. There has been lots of best practice deployed in this project which will certainly feature as the basis for another blog post.

Moving maintenance of Jisc’s website in-house: Jisc provides excellent web services to a huge number of institutions, but at the moment isn’t using this expertise to manage its own web presence. This project will change that, making the Jisc website a fantastic advert for what Jisc’s web services can do.

The big one… I will also be involved in the Unified Web Presence (UWP) project, in which we are looking to bring a common look, feel, navigation and editorial voice to all of Jisc’s vast web presence – it almost sounds easy when you put it that way…

How Jisc Web Projects link up

All projects working in harmony? Easy Peasy…

 

My approach

I have used both Prince II and Agile project management techniques and like to, where possible, combine the best bits of both. To me, this means using the up-front control and general structure provided by Prince II, and the dynamism and quick results generated by Agile. Whatever the methodology, I believe it’s crucial to capture and share lessons learned from any project – and I am sure there will be plenty of Lessons Learned posts to come.

So that’s a quick romp through who I am, what I’m doing and how I work. I’m always keen to collaborate and learn new things so don’t hesitate to get in touch!

Sharing the love (and our office)

Our friends at customer experience consultancy cxpartners have shared their experiences of collaborating with us on the project to redevelop the R&D section of the Jisc website.

We invited the team to come and work in our offices during key stages of design development. This meant that, rather than communicating through long – and sometimes slow – email exchanges, they could just swing by our desks and run their ideas past us in person.

hello

What’s more, as the development of the R&D section is of interest to so many colleagues outside of the web team, it was lovely to have an open door so people could pop in and have a nose at what we were up to.

Read Neil Schwarz‘s blog post in full on the cxpartners website: How a goldfish bowl and a biscuit tin helped us collaborate. He’s keen to hear inspired collaboration ideas from others.

Same seat, different role

Vix with GromitOh hai!! I’m Vix, the latest addition to the Jisc web team.

Some of you might know me, I’ve been knocking around Jisc for a couple of years now, working in the press team and covering our internal comms work.

Like Kirsty, (who beat me to it on the blog a few weeks ago) I’m joining the team on secondment for 12 months to help out with the unified web presence (UWP) project.

Although we’re yet to get stuck in to UWP from the content side of things, I’ve really enjoyed my time in the team so far, learning more about Photoshop, doing a bit of coding and rewriting copy for the site. All good practice for what’s to come, which will involve all of these skills but on a much larger scale.

Although I haven’t physically moved (I’m in my same spot next to Nathalie at One Castlepark), I’ve had to change the way I work, and mostly, the way I look at the website.

In the press team I’ve had a fair bit of dealing with the site, writing and uploading press releases and blogs. Now I’m on the other side of things, I’m much more aware of the way in which we present our content, making sure that it not only looks great but that it makes sense too.

I’m genuinely excited about the UWP project and helping form a better picture to our customers (and everyone else!) of what we do. I’m sure I’m not the only one who started at Jisc not really knowing what we do and although I know now (I think!), I’m looking forward to working on further connecting the dots of the exciting and varied work that Jisc does.

When I’m not geeking about at work, I’m geeking about at home, riding around on my other half’s motorbike, baking brownies and trying to get my Rubik’s cube time to under two minutes…