One of the sites I posted an image of was an early version of our New PAS campaign site:

Which was recently polished off to look like this:

The idea here is that we hook-in hospital staff with a simple and engaging design which is much more effective that posting out a simple news post to our dreary Intranet news feed or sending out those dreaded global emails.

How I built it

The key components here are HTML5 boiler plate, 960.gs a mix of free icons and some illustrations purchased from stock.

Using 960.gs and HTML5 boilerplate meant for extremely rapid prototyping. I was able to get a layout set up in less than a day and populate it with the provided content. This was then sent for review and after another days work tweaking and cleaning up the site was done.

Feedback for this site in particular has been very positive – in fact, overwhelmingly so. So much so that I’m now sketching out some ideas about how these sites could be converted into reusable templates with CMS functions which would make possible easier and faster developments in future.

Adding a bit of old-school flair

So, what can be done when you have a campaign or message you want to get across and your Intranet is holding you back because its been slapped with the ugly stick? The answer is to bypass the core system and develop a ‘microsite’ or ‘landing page’ using just plain ‘ol HTML and CSS.

This is what I’ve been doing to help promote some of our campaigns over the past 6 months and its been a huge success.

Here are a couple of examples that I’ve put together recently (some still in development) that are simply HTML/CSS flat-page sites that are simply thrown into a new folder on our IIS web server:

The fact that these pages look and feel different to our ageing and tired Intranet makes them easier to digest and more importantly interesting and fresh.

They don’t take that much work either (although sadly they do all have to work 100% in IE6).

Tools used

Generally I use the 960.gs and a few pre-build patterns and icons that I’ve collected over the years. I’ll even make use of some free pre-made templates like the ones on offer over at Smashing Magazine if the deadline is short.

The code doesn’t have to be pretty, or even that efficient because the target audience are all on a local network and they just want to see something that works.

When I researched the new hospital website design I knew the sort of design I needed to create very early on. I knew it had to be clean, simple and have a lot of white-space. It also had to look like an ‘NHS site’ but significantly different to our old site.

Pulling inspiration together

So I spent some time noticing key features on certain sites I frequented and when I saw something new I would bookmark it for later use.

Some obvious examples for inspiration were the Number 10 website, the new BBC Beta site and the Whitehouse. Some less obvious examples were sites like MailChimp, Font Deck and Evernote.

Once I had a decent library of inspirational work I took screenshots and then printed them off so I could physically play with them and move them around on a spare wall in my office – this became known as the ‘inspiration wall’:

Similar to a giant mood board (which I’ve used in the past but not on this scale) the wall supplies a constant reminder of the style that you are trying to achieve.

Making your own inspiration wall

1. Find a blank wall (doesn’t have to be in the office, try a corridor)
2. Print off A4 sized landscape screenshots in black & white (no colour please)
3. Don’t just use the homepage/above the fold also print footers and sub-pages
4. Use post-it notes to leave ideas and comments on inspiring elements

Why this is a great thing to try

1. Your screen may be big, but its not as big as the wall behind it
2. Its tactile, you can draw and sketch, cut, tape and play with things in a new way
3. Common design trends are more easily noticeable
4. It helps engagement with other people

Involve co-workers

You can also try this little test with one of your co-workers, preferably not another web designer:

1. Make 5 post-it notes with the numbers 1 to 5 on them
2. Find a willing participant who has never seen the wall before
3. Give your participant one minute (no more) to rate the designs on the wall on a scale of 1 to 5 by sticking the post-its on the designs they find most appealing
4. Repeat the test with other participants and note down any interesting results

The one minute time-frame is the key here. Don’t make people think about what they like, let instinct decide.

I did this in our office and the results were very similar. Almost everyone went for the Number 10 and BBC Beta as their top-rated choices. MailChimp was also popular (people do enjoy primates).

My inspiration wall for this project worked better than I imagined for a number of reasons but the main one was the feedback and conversations that came from collogues who would experience the wall and use it as a way to better understand the hows and whys of the web design process.

• NHS Employers
• NHS Direct
• NHS Choices
• Monitor (an independent regulator)
• DoH (Dept of Health)
• The Care Quality Commission (CQC)

and …

• … any local organisations such as PCTs, clinics, drop-in centres and partners like the local council.

And of course these all have to sit alongside your standard footer links such as:

• Terms and Conditions/Copyright
• Disclaimers
• Freedom of Information details
• Contact Us
• Investors in people logo/disability info/employment info/E&D links
• Reports and policy

… the list goes on … and on …

Of course, these links are all useful to some people some of the time but not to all of the people all of the time and in short, you can’t ignore them – they need to be visible.

The mega-footer approach

To combat this I came up with what I’ve been calling the ‘mega-footer’ on our new site design (warning LONG image below):

Feedback on the mega-footer has been split. Some people think its too much, a little scary and overbearing. Others think its great, everything on-screen at once is useful and makes things easy to find and notice.

Personally, I can appreciate both sides of this argument. I know that by doing this a lot of what some people may deem as ‘key information’ has been pushed WAY down to the bottom of the site and that some users may not think to look. But I also know that the footer is just another tool to help visitors find information just like the site map, a-to-z and search option.

Time will tell if our footer gets bigger or smaller or is re-worked in any way (I’m not certain the news feed needs to be on ‘every’ page for example) but if you have an option on this new site feature I’d love to hear it in the comments.

Your feedback

Work is currently ongoing to improve site content and clear up any technical hitches that slipped though testing but I urge anyone of a critical denomination to visit the site and send feedback using the new Found a problem? form:

New key features

• Cleaner more accessible design
• Improved navigation, especially in the large footer area
• Complete structural overhaul/refresh which concentrates on key areas such as patient info and visitor info
• Improved search system (uses Relevanssi)
• Updated contact us page which includes a new in-depth online form
• Integration with twitter/facebook on news posts
• User comments/feedback on news posts
• Improved photography used throughout the site
• Feedback/report a problem form integrated into every page (see above)

Technical stuff

• Latest version of WordPress+MultiSite
• Uses latest HTML5/CSS3 standards (using Modernizr for legacy browsers)
• Integrated Google Fonts (Merriweather) for increased compatibility
• Progressively enhanced with less-capable browsers (IE6/7/8, FF3) fed a modified layouts (a good example of this is the homepage animated banner which is ‘static’ in IE6)

Stick with us

Being a very small team with only one web designer/developer (me) significantly working on the project meant that certain aspects of the site development had to be delayed. This is by no means a negative thing. New features being added to the site is great PR and we have plenty of these in the pipeline.

The key point here is this isn’t the end of the development cycle, its the beginning. The site will grow exponentially in the next 12 months now that a clear strategy has been outlined.

Real artists ship

If we were to wait until every-single-cool-new-feature was added and every-single-piece-of-content was updated the site would never (trust me, never) have made it to launch.

Our aim is simple, to make the Barnsley Hospital website the best NHS Trust website in the country and to do this using internal resources, open-sourced tools and collaboration with our 2000+ members of staff.

After all the site is as much their site as it is ours.

Things that were delayed (techy + non-techy)

Finally, for the ones who care, here are a few back-burner items we are working on:

• Responsive design (more on this decision later)
• Updated Accessibility functions to the very-basic ones we have now
• Full/proper WordPress MultiSite expansion (see previous post)
• Unique design for each  ‘top-level section’ (see Patient Info for example)
• Services content re-fresh (a lot of our services pages are still out-of-date and need some serious TLC)
• ‘Proper’ NHS Choices and Patient Opinion integration (via RSS/XML feeds, although both sites are mentioned in our feedback section)
• Better contact info for the media team (this page is a compromise until we get our act together)
• An advanced members section allowing online application and a secure log-in area for discussion and information sharing
• … there are a few more but less important… check back later for more insight…

Non-techy readers can look away now.

Yep, its still WordPress

4 years ago we were the first NHS Foundation Trust (and one of the first NHS organisations) to adopt WordPress as our CMS. Since then, WordPress has grown to become the #1 CMS on the web with massive penetration and growth happening over the past 18 months (take that nay-sayers).

Not long after launching our new WordPress-powered site I spoke about the experience and challenges that were involved at the WordCamp UK 2009 conference in Cardiff Bay, Wales.

Check out the slides from my presentation on SlideShare:

Word Press In The Health Sector

I personally never looked back after moving to WordPress and since then have helped advise other NHS Trusts and NHS organisations on their move to the platform.

Going MultiSite

One lesson learned about WordPress is that for a large multi-headed beast of a site like ours a standard install isn’t enough.

Don’t get me wrong, we are coping fine with having over 500+ pages in our site on a purely technical level but structurally and organisationally our WordPress-install has outgrown its initial purpose. Thankfully WordPress has a trick up its sleeve to solve this; the WordPress MultiSite feature (AKA WPMU).

Our new structure will consist of a top-level site (or ‘root’) containing general information about the Hospital with our Services and Corporate information being given their own sub-sites in a MultiSite network.

Why do this? Here is a good example using buckets as examples that show our old (existing) structure and the new (planned) one.

Old site (existing) structure

New site (planned) structure

As you can see the MultiSite system not only allows for an instant improvement in the way our information is organised it also gives us greater flexibility as each sub-site in a MultiSite install can have its own custom theme, plugins and settings if needed.

In essence each site within the MultiSite system is its own, self-contained website.

Its also a massive improvement for Hospital staff as we can (eventually) nominate and train staff to have editor access to these sub-sites without worrying about them impacting on other areas.

With every site no matter how small being siloed-off like this (some will be no more than around 4 pages) we can ultimately build a flexible and future-proof network of service information that will be easier to keep track of and update than having multiple sites under a single WordPress install – pretty cool no?

What else?

Well, too much to go into here, but I’m sure you can imagine the questions:

• Better integration with Social Media? Yep! 
• More effective Contact and Feedback options? Of course!
• Improved SEO and Accessibility? Sure thing!
• Better all-round performance? Damn straight! (even talk of a CDN on the horizon…)
• Responsive/Mobile ready/all that jazz? Yes, eventually! (this has been dropped as a launch priority)

This post should cover most of the technical aspects of the new build but I hope to publish more info over the next few months. We have saved a LOAD of time and effort by using WordPress more effectively this time around and although the development time-frame of this new version has been almost 12 months around 80% of that was spend doing strategy, engagement and R&D. The actual build-time will be no more than a couple of months.

Any further questions or feedback please leave in the comments

Without further delay, here are some images of the new site concept (click for larger versions) WARNING LONG IMAGES AHEAD!

Disclaimer: The following content is a mixture of dummy/example text and images alongside some real information. For live and up-to-date information about Barnsley Hospital visit the website.

New Homepage & Footer

New Top-Level Section

New ‘Service’ Page (Audiology used in this example)

Please Give Us Your Feedback!

This re-design has taken a lot of time, work and effort by the Trust Media & Communications team and we would love feedback from patients, visitors, staff and members.

Please leave comments on this preview using the comment box below or if you’d like to contact the designer directly you can do so using:

• Kimb Jones – kimb@nhs.net or call ext 4583 (hospital switchbord: 01226 730000)

I made this video to help get an overall view of the work involved in migrating our site to a new structure. The video shows our full website structure printed onto 6 pages of A4 paper and stuck to my office wall.

It is SO big I actually had to stand on a chair then hop off half way though filming.

Note: The areas marked with the red line are our main services and make up the bulk of the site the area marked in blue near the bottom is corporate and business information.

Why did I do this?

In a word, perspective. You see I’ve bragged for a long time that we had a LOT of pages on our site, its one of the reasons I advocate the use of the CMS Tree Page View WordPress plugin for navigating large hierarchical sites like ours, without it I’d be lost.

Printing out every section and every page is a great way to see this for real right in front of your eyes. It makes the mass of content tangible and allows you to stand and stare and think and discuss the way this structure came about. Was it intentional? Is it right? Can we make it better? All great questions like this are FAR easier to answer and comprehend when you have something as impressive as this to physically look at and play with.

What next?

I’ve known for a while that this structure is wrong so it will change significantly in the new version of our site. All the content will of course remain but be shifted to new sections or consolidated into more intelligent areas.

Ultimately this venture has proved incredibly useful. Without it I don’t think that any of the team working on the new site would have been able to grasp the true scale of the job in hand.

Let me explain how this works.

You see, not just anyone can go out and ‘buy’ a domain ending in .nhs.uk, you have to be screened and poked by CfH to see if you fit the bill. In fact, recent policy changes meant that these domains are even more limited than they used to be and Foundation Trusts should now stick to using sub-domains for off-shoot sites. An example of this is this blogs web addresses which is: evolve.barnsleyhospital.nhs.uk.

A warning about non-NHS domain names

It’s important to note that NHS organisations should not shun more standard domain prefixes such as .com, .net and .info or they run the risk of spammers/scammers buying up these domains leading to user confusion and damage to their online brand.

This happened to us last year when we discovered that barnsleyhospital.co.uk had been snapped up by a company who’s core business is to “buy, sell, lease and develop domain names”. We refused to pay an overpriced fee for the domain and expensive legal action was out of the question – a lesson learned the hard way.

Our domain collection

A recent server move for the main Barnsley hospital website gave me the opportunity to finally organise all of our domain names, this is the result:

Non NHS domains

• barnsleyhospital.info
• barnsleyhospital.net
• barnsleyhospital.org
• barnsleyhospital.com

All of the above domain names simply re-direct to our .nhs.uk site.

NHS domains

• barnsleyhospital.nhs.uk
• evolve.barnsleyhospital.nhs.uk (this blog)
• dev.barnsleyhospital.nhs.uk (not used but registered with CfH)
• pathology.barnsleyhospital.nhs.uk (not used but registered with CfH)
• gp.barnsleyhospital.nhs.uk (not used but registered with CfH)
• healthy.barnsleyhospital.nhs.uk (not used but registered with CfH)
• nursepractitioner.barnsleyhospital.nhs.uk (not used but registered with CfH)
• clinical.barnsleyhospital.nhs.uk (not used but registered with CfH)
• bhnft.nhs.uk (our old website address – redirects)
• barnsleyrd.nhs.uk (our R&D departments old site – redirects to their new version)

As you can see, we have a LOT of sub-domains that are no longer being used. These are relics of projects that have either been absorbed into the main site OR are still being worked on for future release.

Screenshot of our Intranet Analytics for March 2011

OK, so it may look pretty cryptic, let me decipherer it for you. The /forums/showforum?… lines relate to our staff message boards, or forums. These are broken down into 2 clear areas “General Chat” (does what it says) and “Sales & Swaps” (staff can buy/sell and promote items).

Month upon month these sections are by far the most popular area of the staff Intranet and by adding up the usage percentage figures from the image above we see that around 20% of Intranet use is based around our forums. This is a pretty big number which equates to tens of thousands of individual pageviews per month.

Its important to note that the forums are not a free-for-all. Each user is asked to agree to a strict ‘acceptable use policy‘ before they can post a message and each form has strict rules about what can and can’t be posted. Staff are NOT abusing these forums, they are simply using them and they are doing it  en-mess.

So what’s the big deal? Well, its not very clear, the staff in the Hospital use the forums for a number of reasons:

Want to sell you’re old car? Use the staff forum.

 

Want to rant about the state of car parking? Use the forums.

 

Want to get help on how to fix you’re iPod? Use the forums.

Nothing really out of the ordinary right? But even these lacklustre topics can elicit a decent return. In fact, a quick scan of the first 20 posts in General Chat show that only 6 have zero replies with the rest having at least 1 reply but most between 3 and 5 replies.

These kinds of figures for a user base which is under 2000 users are impressive. If scaled up to millions of users you’d have a rather decent user-driven network with advertisers and marketeers frothing at the mouth to get their ads inserted.

I can’t say for certain why our staff forums are so popular because frankly, I don’t use them (maybe I should?). What I can say is last year we had to close them down for a few weeks in order to tighten the usage policy (we now allow small local-business promotion) and do some technical work and re-ordering of the system. A simple fix but it took time because of the red-tape and frankly awful technical system the forums are built on.

During this outage not a day went by when my phone didn’t ring or I was emailed or stopped in the corridor to be asked the simple question “when will the forums be back?!”.

Its clear that our staff are very affectionate and protective about these forums and because of this they should be nurtured and looked after.

They are after all a great example of digital engagement between 1000s of public sector staff.