Gov.uk - one website for all UK government digital services

"One Website to rule them all,

One Website to find them,

One Website to bring them all

and in the darkness bind them"

The UK Government are shutting down all departmental websites including arms-lengths-bodies (you don't use the word quango anymore) into one super-site. The question is... will it be super?  

As I often do, because I'm lazy, I've chosen to point towards someone who's said it far better than I can:

Rory-Cellen Jones wrote for the BBC:

"Can the government run one decent and cost-effective website, which gives customers speedy access to vital information and services? Unlikely, you might think given a track record of over spending on far too many sites that deliver a poor user experience at a hefty cost.

But today sees the launch of www.gov.uk which seeks to change all that. The vision is of one website to rule them all - or rather a single destination for the government's customers rather than more than 400 different addresses spread across the various Whitehall departments.

If this is to work it is going to need a change of culture, from one where the government viewed its web operations as something to be farmed out to some giant suppliers and forgotten, to something far more responsive.

When I visited the Government Digital Service - now in charge of this operation - there were some encouraging signs. At first glance the office appeared to be awash with T-shirts and ponytails, more like a technology firm than a government department, though with much worse coffee and no free food."

Full article: All right gov? Can government do the web?

In theory it's a great idea. One place to interact with the Government... that means you can renew your passport, driving license, collect pension, do your tax, renew your tax disc, etc online in one place. Businesses will similarly be able to register their business, get all the permits they need to run their business, check export/import rates, etc.

Anyone who's tried to renew their driving license online will know how painful it is to have to register for a Government gateway ID and follow the process to completion. It's doable, but not intuitive. As a starter I hope that activities like this will be simpler yet still secure.

I think this site will fail for users who don't know what task or info they need. There are heaps of random pieces of legislation and guidance out there for businesses and public alike. If I'm specifically searching for something, like renewing my driving license, that task is easy to find... but what if I'm a buiness, legally required to hold permits X, Y and Z? There are many activities and pieces of guidance for business and public, regulated by various Government bodies, that people simply don't know are there. Unless I search specifically for something it's hard to find what's relevant to me... as the Gov.uk site grows these lesser known bits of information may become more and more lost.

In theory the idea of Gov.uk is great; one website to rule them all.

We'll have to wait and see what the reality is. It'll all be down to how robust the architecture turns out to be and how good the content is. It'll also be down to how efficiently they continue to improve the site and how much support they provide the 400 departments and agencies that will now be feeding into the site. They've adopted an agile methodology; if they continually invest and improve this site then they've a fighting chance but it's a mammouth task - the needs of the Police vs Defraa vs Natural England vs the Post Office vs the MOD vs JobCentre+ are all very different and the needs of the many many different customers will be massively varied. After all the UK is a very varied place.

Project Management and Waterfall

This article outlines the "Waterfall" approach I have generally used in project management and offers techniques and tips to use to help make life easier and to solve some common problems – the end goal is always efficient, profitable, project management that delivers great products we can be proud of. 

Waterfall approach to Project Management 

 

“In a strict Waterfall model, after each phase is finished, it proceeds to the next one. Reviews may occur before moving to the next phase which allows for the possibility of changes (which may involve a formal change control process). Reviews may also be employed to ensure that the phase is indeed complete; the phase completion criteria are often referred to as a "gate" that the project must pass through to move to the next phase. Waterfall discourages revisiting and revising any prior phase once it's complete. This "inflexibility" in a pure Waterfall model has been a source of criticism by supporters of other more "flexible" models.” - http://en.wikipedia.org/wiki/Software_development_process#Waterfall_model.

As a project management approach Waterfall is a very natural process to follow. It’s the process we normally use – even if we don’t realise we are using it because it makes sense – you look at the project and break it up into distinct phases. Each phase is critical to the next; each phase must be reviewed and signed off before starting the next. Saying that, there is always scope for some flexibility – however too much flexibility and you risk the project.

The phases in Waterfall are (see diagram above) detailed below:

Concept

Early on you will want to define the concept; particularly for a campaign. This can inform the site requirements, the architecture, and the design.

Requirements Specification

A project should start with a clear specification of what you aim to achieve. A project scope will define what you are going to do and relate this to your budget. It will identify questions you might have – it maybe that you need to build in contingency to plan for unknowns. If you specify what you are going to do at the start then the clients expectations are set and managed from the offset; if they try to change the scope further down the line (eroding margin) you can refer to this original agreement.

At this stage you should define the objectives of the project from the user and clients point of view. The client may want to achieve X conversions or other goals but are their expectations realistic? Always make sure objectives are realistic and measureable.

The requirements specification phase can include standard copy about your project management approach – this helps tell the client how things will be run. Outline the phased approach above and highlight that each phase should follow the same structure – define your brief, carry out the work, test it internally (if it’s not up to scratch send it back), then allow the client to review – if they aren’t happy they will send it back, when they are happy they MUST sign off before going to the next phase. It is sensible to cap the number of times work can be sent back (iterations) from the outset. Otherwise you risk engaging a never ending cycle of review and amends. If the client understands their amends are limited they will provide all their feedback, and review things properly, first time around.

Don’t forget to set up hosting and Google Analytics and purchase URL’s early on. You will also want to agree the cost arrangement and possibly an ongoing maintenance agreement for post-launch.

At this stage you should define technical standards – e.g. The site will meet AA accessibility standards and be tested to Grade-A browser support.

Always build a project plan at the start of a project, share it with the client in a format they will understand most easily. Make it clear when you expect their involvement and what you expect from them.

Don’t forget to identify your stakeholders – your primary contact may project manage their side, but who is responsible for sign off. Your project plan should allow realistic times for everyone client side to do their bit.
Always provide context to any deliverable you hand over – make sure they understand the rationale behind everything you give them.

What if the client just can’t decide what they want?

Sometimes a client will want more things in their project than their budget will allow. There is a solution – sit down with them and create a requirements list. List out every feature in excel and put resource times and costs against it (but keep in mind sometimes you’ll get an economy of scale by doing some work together). Then get the client to prioritise it using the MoSCoW method:

• M - MUST have this.
• S - SHOULD have this if at all possible.
• C - COULD have this if it does not affect anything else.
• W - WON'T have this time but WOULD like in the future. Alternatively WANT.

Help guide them to work out what is really important and what they don’t really do based on their objectives and user requirements. If everything is a MUST have then they will realise they need more budget – but generally they’ll realise that some things just aren’t that important this time around.

A requirements list is also a good talking shop to workshop simpler solutions e.g. instead of a fully interactive video case study perhaps a written one will do, freeing budget for the ATS system they really need.

System and Architecture Development

Before you start to design the look you should consider the structure of your site from the USERS PERSPECTIVE. Produce a sitemap to tell you what pages you will need and produce wireframes to define the structure of each page.

 It is far more efficient to define reusable templates that are flexible for multiple pages, e.g. Homepage, Content Page, Landing Page, Case Study Page, etc. Try and think of the page layout in columns with modules that plug in – this will make your template more dynamic. One template can have hundreds of variations if you have blocks of content that can be turned on/off and reordered.

Always approach from the user’s perspective (not the clients) – who is using the site? How would they interact with the site? What journey (user journeys) will they take to achieve the objective you want them to achieve?

Sometimes it helps to write a user persona – essentially a bio of your typical user e.g. “I’m Geoff, I’m 35 and work in IT. I’m married with two children and live in Berkshire. I’m generally happy with my job but like to keep up to date with new vacancies just in case something interesting comes along. Normally I allow recruiters to find me rather than actively searching for roles” and “I’m David, I’m 25 and work in IT. I live in Reading in a shared house. I currently have a role in IT but I’m looking for my next big move.”
For an IT company based in Berkshire these two personas, typical of your users (do your research into what’s typical; and use intuition), require different solutions to engage them. Geoff has a family; he’s unlikely to relocate, but he already lives in Berkshire. He’s not actively looking but would consider a good job if it came along. A tailored newsletter would help Geoff – you’d have to get him to sign up, but if the newsletter alerted him to jobs relevant and near him Geoff would be happy and may just apply. David is actively searching; good SEO will help him find the IT company in Berkshire. He’s young and not too far, he may relocate – when he hits the site he needs to know that it’s relevant to him and nearby. This will influence your homepage design. Writing personas helps you think about the user and in turn the user experience; they can also help your client who will often think about what THEY want not what their users want until they see a persona – so get the client to sign off on the personas.

Always consider navigation – a horizontal navigation is great for a campaign site with few pages and fixed content, but a content heavy site nearly always needs a vertical navigation or a jumbo drop down. Accessibility is also important when considering your navigation – remember some users will want to increase their text size. Also, if your site might be translated keep in mind that your navigation may need to accommodate long words (e.g. German or Welsh). Your UX should accommodate this – don’t squeeze things in that will break when designed / built.

You will need to think about accessibility at this point. Don’t produce anything that cannot be built by a developer. If unsure get your site developer involved with defining the information architecture of your site.
Often all the above is produced from experience and intuition. If unsure you can try a few methods such as user testing and card sorts to help inform your UX with solid stats. The bigger the project, or the more important that you get it right, the more important it becomes to build your project on researched foundations over intuition. Concepts can be tested cheaply – investigate http://verifyapp.com/ (I’ve not used this service before – but it sounds interesting!)

Produce a content map that describes what goes on each page (what template, which modules - such as twitter feed, case study driver, driver, social media links, etc and include required content. You might want to say “This page serves to tell the user about the company. It will include copy about the companies history, values and culture. It will contain case study drivers that support the main content). Also produce a copy deck which identifies from the outset – what copy needs to be written. Don’t forget drivers, buttons, error messages, help boxes – they all need to be thought about.

If the requirements are not clear you may also want to define a Technical Specification. This will tell the developer how the site should be put together and include sitemaps, content maps, wireframes and later designs. This document will be the bible the site developer builds the site too. It will be what a contractor quotes against, and the stick you slap them with if they don’t deliver (equally, if you don’t put something in the document then they may charge extra as it was out of their scope).

Remember some golden rules in UX

• The homepage is not guaranteed to be the first page a user sees.
• People will NOT have fun “discovering” content – if things are hidden people won’t find them. Clear navigation – always!
• Avoid dead ends – use related links, drivers, on every page.
• Include social media elements to share content easily.
• The shortest pathway to the content you want is the best pathway.
• Don’t get crazy; there is a good reason why many sites are essentially the same. People scan the top left first – it’s fact; your most important content should be here. Your search should be in the top right, the logo top left – break the mould and you may find you confuse people. Breadcrumbs go at the top, not the bottom.
• Ignore me – do your own research; trends change, new research comes out – be cutting edge!

Design
If a concept has not yet been defined it should be. You may want to use moodboards to set a tone for the site. 

Are there brand guidelines that must be accounted for?

A good web designer can work with wireframes and understands that what they are creating doesn’t need to fit on an A4 page. Websites are dynamic, so too should be the person designing it. They need to consider both why the architect has defined things the way they have and also what the developer will do with it next. They need to consider accessibility – it’s no good to design a box that would be impossible to build properly in HTML, e.g. because it uses texturing that cannot wrap. This really requires understanding of how websites are built. 

Ideally you should provide the client with two design routes to pick from. These should be presented in person; never sent by e-mail “What do you think?” but instead in person or over the phone so you can say “This is why we have approached this the way we have…” Also, present it as “Do you think this meets your users expectations”. If you give them a choice of two they will be inclined to choose one; they may ask to choose a little bit from one and a little bit from another. This is normally a bad idea, if they don’t share common elements it’s because they don’t work together. Ideally try to manage it so they pick a design and have only a few tweaks. The more involved they feel the easier the sign off process will be – saying that, don’t be afraid to defend your corner as the digital expert. 


Designs should be optimised for a minimum of 1024 wide. Nobody uses 800x600 anymore. Keep in mind that browsers have scroll bars, so while the screen is 1024 wide, the web design should be no more than 974 - 984 wide. We should all be using grids in layouts, 960 is a great number as it’s slightly smaller than full width, and it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 (imagine the grid possibilities).  

Do not be afraid of scrolling. Remember the fold is not a line, it is a region. Do not be obsessed with everything being above the fold – just design in a way where the most important content is above it, and the user knows they can scroll.

Before going to client the designer should have checked the design for accessibility including insuring the colours validate. As a project manager you’ll want to make sure this has happened or check this yourself.

Make sure web-safe fonts have been used or you have the technical scope to use image replacement like Cufon on non-websafe fonts.

A developer should always review a design before it goes to the client – there is no point in exciting the client with something that cannot be delivered.

[NB: Involving the developer in design almost seems contrary to hardcore waterfall approaches. While phases are distinct they should also be a team effort. The UX leads UX, the designer leads design – but other disciplines should be involved to educate and inform the deliverable. Do not think of each phase gateway as a wall – the design should not be flung over the wall for the developer to pick up!]

Programming
The site developers will include the front end developer (working in HTML and CSS) and the back-end developer (working in e.g. PHP, but they could be .NET, ASP). They will deliver the site to the documentation defined at the start (A WTS if one was written).

The front end developer shouldn’t need to alter interface designs to make them work. This should have been thought of at the design stage by the designer.

The back-end developer should understand fully how the site works from designs, wireframes, sitemap, content map – ideally all explained clearly in a single Technical Solutions document.

System Integration
When the programming is done the finished templates need to be brought together with the back-end system and any third party software.

This is also the time that final content should ideally be ready to be added before testing.

System Test
Before the client sees the site internal testing should be carried out. The site should meet the accessibility standard specified at the requirements stage (normally AA) and be cross-browser compatible (meet A-Grade browser support, which now includes mobile)

Acceptance
At the end of every phase the client should review and sign off on content before moving to the next phase.

The acceptance phase is the clients chance to review that the project has been delivered to:

• The agreed specification
• The architecture they signed off on
• The designs they were shown
• Includes the content they have signed off on
• The technical standard they expect (the expectation you set for them)

Normally I suggest a user acceptance testing period (UAT) where the client reviews the site on a demo environment and checks that it is up to scratch. If not they provide a prioritized list of bugs and changes. Prioritised because during scoping you will have defined the amount of budget proportioned to amends. If you only have 2 days and they’ve asked for 10 days worth of amends you are giving them 8 days of time for free. The project manager may want re-organise the priorities, which should be discussed with the client. They might have prioritised something trivial over a bug fix that is a true show-stopper.  

When you and the client are satisfied the project has been delivered to spec it can go live (a final test) and then you can pat yourselves on the back!

Maintenance
It is a fact that in software development you will have bugs – a good client should be able to understand this. I am not saying a site should launch with show stopping errors; but if you dig deep enough you’ll find niggles. Even if on delivery the website seems perfect, browsers and operating systems will change, tweaks are made to the site and/or something was missed. 

When the client has completed the acceptance phase they have accepted the agreed project is done. There is a balance between good account management where you fix some post-launch bugs for free and good project management where you avoid spending the next year giving them freebies. 

For a large project an ongoing paid for Service Level Agreement (SLA) will allow for regular maintenance, bug fixing and updates. Smaller projects may need less frequent updating and warrant charged bespoke maintenance only. 

New functionality should ALWAYS be dealt with as a mini-project, not a bolt-on to the SLA – this means that the new functionality is properly thought out. If it’s just bolted on and added improperly it can and often does cause problems in the site elsewhere and may cost you more than you bargained for.
Don’t forget to keep track of agreed hosting and stats monitoring agreements.
 

Bringing UGC to recruitment comms

It's been seen before with such campaigns as T-Mobile's Life's for sharing. Instead of going out there and producing expensive content you get your audience to engage with the brand and create their own. It's a concept that has been copied many times - sometimes successfully, e.g. the Milky Bar kid campaign and sometimes unsuccessfully e.g. the Wella upload your own swish campagin.

To my knowlege it's a concept that has never been brought over to the world of Recruitment Comms. So I'm rather pleased to have been involved in a recent project where we did just that.

The idea is simple - via internal comms we asked Claire's employees to upload videos of themselves saying why they loved working @Claire's (with a prize incentive of course). These videos are uploaded to the site, the employee's informed, and they are encouraged to share across their social networks.

The uptake by employee's has been great. I recommending checking out the site www.clairescareers.co.uk/atclaires. At the time of writing we have yet to see if the site will create the viral noise we want. I feel certain that the videos generated by the employees are more than entertaining enough to get attention. Certainly the recruitment comms organisations will be paying attention to this project. It has already acchieved many of it's initial goals - to create something unique (in recruitment) that will show off Claire's as an employer from the ground up. These people aren't directed, their thoughts are their own! Another goal - to create a pan-european experience; this is the first project Claire's have worked on which works across all of their countries. This has defintely been acchieved, we've had videos from Spain, France, UK, Ireland, Germany and more.

There were a few technical problems to overcome - such as how to get the content (a simple upload form solved this) and how to convert the videos; keeping in mind that mobiles and handy cams use a plethera of formats. YouTube provided the answers, every video we've received has been uploaded to YouTube which sorts out issues of compatibility and hosting. Hoorah! Not to mention uploading it to the Claire's YouTube channel means we've been making use of a so far largely neglected social media channel.

I look forward to seeing how the campaign unfolds this year and what noise and attention it receives.

Brand new shiny website for Claire's

Blood, sweat, tears, glitter and sequins! It's been a busy fair few months, but after writing a painstakingly organised 29 page "Website and Technical Solution" document (it was mostly wireframes and designs with explanatory text), producing some very refined and carefully constructed Visio wireframes, many iterations of  interface design, a 50 page copy deck, several meetings and a thorough build and QA cycle the reward is here - a brand new careers website for Claire's - see www.clairescareers.co.uk. (Which they love!)

The old site (see below) was off brand and clunky. While a great piece of work when it was launched it had dated.  The biggest challenge I saw were bring a fashion brand like Claire's to life online while at the same time providing a clean and quick user experience for what is essentially a very content heavy site. The solution, jumbo-drop down.

The new site features at the top level large seasonally updated background imagery to position Claire's Careers not just as a recruitment site but to highlight it's a recruitment site for a fashion brand! As you drill deeper into the content the images become banner headers, randomly selected on page load, so that it is the copy and not the image that dominates. Still, Claire's products and seasonal photography dominate every element of the site from the backgrounds, page heading to the drivers that help guide users to related content on the right hand side of every page.

The jumbo nav lets users drill down to the content most relevant to them in one click rather than a convoluted search through landing pages and various navigation elements.

We wanted to introduce a social element to the site so every page features the latest tweets from the Claire's Career's twitter account. Every page, including job postings, contain share this links to Twitter and Facebook and "Add this" which covers most of the other major social networks.

 

To encourage engagement with the Claire's Careers channels every page also gives the user the ability to quickly join their Twitter, YouTube or Facebook channels. 

The site has been built to be as accessible as possible. While it is not mobile optimised, the way it has been developed means it will work on most smartphones to a degree. Every element of the site has been built with a layer of graceful degradation in mind. If you don't have JavaScript, no problem - you can still use the nav, you can still view video, and any flash components are not core to the journey and are politely hidden from sight. The navigation will need some tweaking to get it fully working on an iPhone, but not much.

To offer a level of interactivity, and to make a break from the tedium of reading through reams of copy, we've introduced video profiles to give an insight into what some Claire's employee's do. To avoid hosting costs, and because it just works, we decided to use YouTube instead of building a bespoke player. By default you will see the video played in full, for example see Glenn Pollards video profile, but you can skip to individual questions from a menu below (our MD's idea, a source of much grumpiness from me, but worth it). Each segment is supported by a transcript for those who are hard of hearing or just sneaking a look while at work.

All drivers are content managed from a central library and all the random seasonal images pull from a set folder. When we want to add the next seasons imagery it will take 5 minutes rather than running through everypage changing individual images.

The homepage features a carousel of drivers, easily content managed, to promote urgent roles and key content in the site. To make it flexible there are different driver types - big image with a link, big image with text and a link (two layouts), or a flash box (with an image fallback). Watch that space for some creative promotions in the future.

Online application - of course one of the biggest parts of the old and this site is the ability to apply entirely online using ThirtyThree's very powerful, and all ours, Applicant Tracking System. And if you don't find what you want today you can sign up for job alerts - forgotten your password, that's a new feature too (surprisingly!).

What else? A global search, links to the many European sister sites (Claire's a transnational company btw), site help, application help and a plan to roll this site out across Europe.

Perhaps the most exciting part of this project is Phase 2. I can't tell you much, it's a big secret at the moment! What I can say is we'll be trying something that, to my knowledge, has never been tried in the recruitment comms industry before. Fingers crossed it'll be a rip-roaring success and we'll be seeing some big accolades for Claire's Careers and ThirtyThree.

If you can't beat them join them

Hoorah, for Microsoft??? Yes Microsoft are going to open up Kinect to let hackers play around with it according to the BBC. This is great news for everyone, Kinect is a great peace of hardware with enourmous untapped potential. Check out this article for potential uses for kinect (google for more, there are heaps out there). Everything from controlling Windows 7 to controlling robots!!!

My favourite potential use for Kinect is that it provides the technology to build Minority Report style interfaces.

To my knowledge the ultimate use of Kinect has yet to be applied. That is of course to allow cats to use the internet. Due to a lack of opposable thumbs cats have thus far been excluded from the net. They have to do with make do with manipulating their owners into managing their social presence with some success. An estimated 10% of all internet traffic is now related to cats.

The iPad was the first device that handed control over to our future feline masters (with so far, limited success):

It won't be long now until some fool owner creates software that connects Kinect with cats. Then we're doomed; 99% traffic will be cat related and 99.9% of e-commerce traffic will be cat related, mostly ordering kibble.

Fireworks the best tool for wireframing

After reading this article I may have to give Fireworks a go for wireframing.

What is User Experience?

A brilliant article here that is a great introduction to user experience (etc) and why it's the most brilliant thing since sliced bread.