Barnsley Hospital Charity website – Part 5: The surprise lean launch!

Screenshot of website

v1 just went live

After 4 blog posts and over 2 months of work I’ve had to push out the Barnsley Hospital Charity site out for a ‘lean’ (AKA unfinished) launch.

What do you mean it’s not ready?

Sure, it looks pretty good, everything ‘works’ but this is actually a bit of a hack, let me explain:

  • It’s NOCMS, I didn’t use WordPress yet, this is just a few PHP files and a folder structure
  • Responsive mobile/tablet views are not fully tested – I actually wanted to do a lot more with these different views rather than just ‘hide stuff’
  • Bloated CSS – I used a hacks.less file to the hilt on this just to get certain things done
  • No performance fixes – loads OK, but could be better
  • SEO won’t work – as all pages are inheriting a single ‘header.php’ the page title/meta doesn’t change

But, it works and is now live so check it out. I’ll be able to start work on the next version in a couple of weeks!

Posted in Design, Development | Leave a comment

Building the new Barnsley Hospital Charity website – Part 4: Building digital prototypes and technology that was used

Previously I looked at how I engaged with the charity team to get to a stage where I was able to start work on creating design mock-ups and prototypes for their website while at the same time they could begin work on refining the content that would eventually become the building blocks for the final product.

What I had now was the chance to move away from my wonderful hand-drawn mock-ups:

Not perfect, but you get the idea - note the 'mobile' single-column view on the left

Yes, I am an artist

And start creating digital mock-ups using HTML and CSS.

Going digital

And why did I choose HTML and CSS? When I could have perhaps…

  1. Used one of the many prototyping/wireframe tools available (some of these are pretty awesome)
  2. Used a tool like Keynote/PowerPoint to flesh out the designs
  3. Fired up Photoshop and started drawing up everywhere my grid and designs and get those pixels flowing

Each of those approaches have merit. But as I’m working as a one-man-team on this build and will eventually need some HTML and CSS to play with I skipped right into creating some grey-box style HTML and CSS prototypes.

This would also make the job of building the responsive element a lot simpler as I could anticipate different viewports (screen sizes) and test them on-the-fly. This is something that you just can’t do in Photoshop without extensive work and extra time.

Tools used to build the prototypes

Finally, some technical stuff!

To speed up development of the prototypes I used the following set-up:

  • Flatstrap – the ‘flat’ version of Twitter Bootstrap. Basically the same thing but with all the gradients, rounded corners and colours removed.
  • LESS for my CSS (note that although Flatstrap does come with an alternative Sass version I choose not to use it this time)
  • Haml for my HTML (I seriously love Haml, more on this in later posts)
  • Prepros for PC and CodeKit for Mac to compile my LESS and Haml (most of this work was done in Windows 7)
  • FontAwesome for icons
  • Google Fonts for fonts
  • Placehold.it for dummy images
  • All the extras that you need like jQuery/Modernizr to help me with my browser issues (site has to work in IE7)

What did they look like?

Take a look:

For comparison, here is the ‘What we do’ page (AKA ‘Where your money goes’) with the digital version on the left and the paper version on the right:

Left: HTML/CSS prototype. Right: Hand-drawn mock-up

Left: HTML/CSS prototype. Right: Hand-drawn mock-up

What happened next

Once these were done I uploaded a ‘navigateable’ version that the charity team could click through on a dev server and get a feel for how it all worked together.

I also printed off screen-shots of each page that they were able to print off and then dissect into different numbered sections:

From digital to paper and back again

From digital to paper and back again

This allowed them to then start to flesh out the content that was already being written and deliver it to me in an easy-to-use format that I could utilise when moving onto the next phase (basically they created a massive Word document).

Coming together nicely

It’s been a long slog to reach this point but worth it. Let’s cover some major milestones:

  • The charity team have a handle on the content they need to produce
  • We have an outline of the site navigation and structure
  • Paper-based mock-ups were refined and signed off
  • A digital HTML/CSS prototype has been produced
  • Content is quickly being delivered to fill up this prototype in anticipation of the next phase

The next phase

I’ve already moved onto taking these prototypes and adding the final lick of paint that will transform them from dull grey wireframes into a representation of the ‘final’ product.

I’ll cover this in the next phase, but be warned, I hit a few snags in this process and had to change direction but don’t worry – it was for the best.

Posted in General | Leave a comment

Building the new Barnsley Hospital Charity website – Part 3: Further engagement and initial prototyping

In the previous post I detailed the initial engagement process with the charity team. In this post I’ll show how this engagement was taken to the next level and led to the creation of the initial websites structure and navigation plan which then helped pave the way forward to making some paper-based design prototypes.

Working out navigation, structure & homepage elements

The first thing that we decided to tackle was the main structure of the site.

This involved outlining the main areas, what they would be called, deciding on language choices (for example ‘who we are’ rather than just ‘about us’) and the scope of how many top-level sections the site should have.

After a few hacks and sketches the team and I came up with this:

Site structure 1.0

This gave the site 5 main sections:

  1. What we do
  2. Get involved
  3. Our events
  4. Donate now!
  5. Partners and volunteers

Homepage elements (content)

Now we had a good indication of the scope of the navigation I could begin to estimate the ‘size’ of the site and more importantly how complex the designs/layout would be for the separate sections.

The first of these sections that needed to be clarified was, of course, the homepage. So we set about taking information from our initial engagement sessions and refined this down into a list of elements (content, images, calls to action etc) that would be on the homepage.

This was done and re-done a few times before we decided on:

First draft of what elements would go onto the homepage

First draft of what elements would go onto the homepage

Once I had this I could now put my top-notch art skills (ahem) to use and develop a paper-based and very basic mock-up of how the homepage could look.

Eventually we settled on this:

Not perfect, but you get the idea - note the 'mobile' single-column view on the left

Not perfect, but you get the idea – note the ‘mobile’ single-column view on the left

This sketch may not look like much but it was the first step in building out the rest of the main sections.

Aside: you’ll notice the ‘mobile view’ to the left of the ‘standard’ view on this sketch. It’s important to note that the the site was not built using a purely ‘mobile-first’ approach, more of a  ‘mobile-in-mind’ approach. I will cover this more in the technical post.

Fleshing out the rest of the site on paper

After the homepage was signed-off I moved onto creating mock-ups of the agreed top-level sections.

Mock-ups were drawn on sheets of A4 with the help of the charity team and took around an hour to finalise.

Charity website mock-up gallery

Involving the team in the ‘physical action’ of drawing out their website on sheets of paper was the best way for them to fully appreciate how the site was coming together and a great way for them to ‘own’ the content.

Time to get digital

Up to now, apart from the initial quick mock-up I did in Photoshop (see previous post) I had done no work ‘at the computer’ on this project.

This is an important note to make for projects of this type, do not rush into building things, get the ideas right, do AS MUCH AS YOU CAN on paper first and engage, then engage again.

In the next post I’ll outline the digital prototypes that were developed based on these sketches and how the charity team helped to populate these with ‘real’ content before moving forward with a more advanced build.

There will also (finally) be some technical/code stuff to talk about. Although I’ll try my best to keep this simple.

Final word on engagement

You can read about the amazing charity team in the June issue of our hospital magazine

You can read about the amazing charity team in the June issue of our hospital magazine

In terms of engagement  – it’s worth adding that I was lucky that the charity team is very small (2 people, 3 if you count the mascot) and they have a very clear vision and are incredibly dedicated to this project.

If things were different (larger team, less dedication, harder to engage with) then this process could have taken months and frustration and doubt could have crept in.

This can often lead to a ‘sod it build it’ approach where code/designs and even fully working prototype sites are made before the team responsible for the information have shown any commitment or drive to make the site a success.

Obviously, this isn’t the right way to build any website and although no ‘formal’ process has been followed in building this site the end product will be much better for the engagement that was done.

Posted in Development | Tagged , , , , | Leave a comment

Building the new Barnsley Hospital Charity website – Part 2: Engagement

Over in part one I covered how the branding and design elements had been developed for the new Barnsley Hospital Charity and how a ‘quick fix‘ website was put in place that sat inside the main hospital site structure.

In this post I’ll look at the engagement that was done with the Charity team. This  was done before any design or build decisions were made and included:

  • Content workshops
  • Meetings
  • Sketching ideas
  • Sharing information
  • + usual email back/forth, chats in the corridor and generally bouncing around of ideas

Essentially, we did everything we could to reach a point were it was right to start building the site.

I wont detail everything that was done before we reached this tipping point – just the meaty highlights. Like the workshop(s):

Team workshops

These sessions were designed to engage with the Charity team as a group but also allow them to do exercises as individuals (a 2-person team) and then assess the outcome before coming to a common conclusion.

Getting started

My content workshops start with a series of questions about the project. These are designed to help the team understand the requirements for getting the information on the website into the right format and help the site builder (me) gain a valuable insight into the culture of the team (or individual) I’ll be working with.

First off, some general questions were asked:

  • Who is the target audience for the website?
    • Break down the target audience into different groups.
    • List and number these groups in order of importance.
  • What should the main message be on the site homepage?
    • What should the main message/action be throughout the website?
  • What elements (links, text, images) do YOU (individual team member) think should be on the homepage?
  • What’s information do YOU (individual team member) think is important to the success of the website?
  • What’s information do YOU (individual team member) think is not so important to the success of the website?

Some more technical/specific questions were asked:

  • Draw out (on paper) a ‘site-map’ for the website with all the important pages/sections at the top
  • List the items you think should go into the main navigation (for example ‘Contact Us’ etc)
  • What different content ‘types’ will be used to make up the website experience? (group exercise with instructions – outcomes were things like ‘events’, ‘blog posts’, ‘donate buttons’, ‘PDF guides/packs’)

The outcome of these sessions was a better understanding between the team (charity) and the site builder (me) to what would be required in making the site happen and be a success.

Engagement session notes (they make sense to me!)

Engagement session notes (they make sense to me!)

Tricks and bait

Yes, some of the questions were bait, and some were tricks, some were also pretty useless but they serve a purpose of passing on knowledge and understanding of how a website is put together and the thought process that goes into building one – something that the charity team would need for their project to succeed.

After this initial workshop I left the team alone for a week-or-so and let what was learned from this session sink in.

We then had a few follow up meetings that roughly went like this:

Content & navigation follow-up sessions

After coming up with a decent idea of what the structure/navigation of the site should look like and what information was important for it’s success it was time to refine this into something I could use in mock-ups/prototypes (digital and analogue).

I actually started this process by providing a ‘tease’ of what the charity site could look like. This was just a 20min mock-up I’d done in Photoshop that used the charity branding elements and some info from the ‘quick fix’ version of the website:

A quick 20min mock-up I made in Photoshop

A quick 20min mock-up I made in Photoshop

I found this tease worked really well in focusing the efforts for deciding on things like:

  • What should go on the homepage?
  • How the navigation would be organised?
  • What ‘calls to action’ should the site be promoting?
  • Are any assumptions/ideas from the previous engagement session wrong?

This session, alongside the quick and dirty mock-up I did led to the first draft of the website strategy (in the loosest sense) and allowed me to go away and begin R&D into how best to achieve some of the solid ideas that had been put on the table.

The final session(s) involved interactive sketching of the main website sections. I’ll talk more about these in the next post.

Posted in Engagement | Tagged , , | Leave a comment

Building the new Barnsley Hospital Charity website – Part 1: Branding and quick fixing

Note: This is the first part in a multi-part series of posts. I’ll try and publish updates every week.

In 2012 the hospital committed to developing a new charity and fundrasing initiative. This began by creating a new fundraising team inside the Communications & Marketing department.

Without going into too much detail, here is a snippet from the official charity blurb:

Barnsley Hospital Charity exists to support every ward and department in our hospital. From our children’s ward to our cancer services, we fund care that goes above and beyond and every penny raised for Barnsley Hospital Charity will make a very real difference to treatment and care.

To support the charities activities a new website would be needed. This series of posts will explain the work I did to make this happen, from initial inception through to launch.

Already branded

Design and branding work for the charity was done in early 2013 and is currently being used in printed media (posters, envelopes, pop-up banners etc).

Here’s the logo and professional brand guidelines:

Logo

Logo branding guidelines

From the Charity logo branding guidelines document

And the delightful mascot:

New-Mascot-for-Barnsley-Hospital_FINAL-FILES

This work was done by an external design firm and illustrator and was driven by the outcome of team design workshops that were held in late 2012.

Here are some photos of the notes from these sessions so you can get an idea where we came from on this:

It was great as I was able to be involved in the design process for the charity and watch the how the team nurtured the branding out of these initial ideas.

The external designer and illustrator both did amazing jobs in taking the ideas and messages and transforming them into a noteworthy package of design elements that I can tap into for the new website.

Back to the website

Early into the charities inception it was decided that their own website would sit away from the main hospital site and they would have their own domain name (barnsleyhospitalcharity.co.uk – note the absence of .nhs.uk prefix). The new site would also need a different look and feel to the ‘corporate’ look of the main hospital site.

This was a noble idea, but a big project, and it would take me a few months to be able to clear my schedule to fit this in. So, in the meantime….

Quick fixing

This was built in February 2013 to simply get initial information online about the charity in one place:

Did someone say award nomination?

Did someone say award nomination?

This version will remain online until the new site is ready. The new site will use a brand new design and layout which has been built from the ground up specifically for the charity and driven by ideas from the charity team.

Technically, this is just another sub-site on our MultiSite network (WPMS) this allows the charity team to log in and modify content without getting lost in the haze of the 100′s of pages/posts we have on the main site.

In the next episode

In the next post I’ll outline the engagement work that was done with the Charity team and how this helped to shape the elements that would be used on the new website and it’s content and purpose.

Another note: The final charity website is not finished, I’m still building the templates and the team are still working on honing content. Launch is scheduled for end of June 2013.

Posted in Development | Tagged , , , | 3 Comments