Forth Valley Royal Hospital – Website Design Process

Art & Design, Photography, Sites I've Designed, Web Design 1 Comment

As promised I am going to briefly summarise the process I followed in order to create the Forth valley Royal website. I started work on the project with no design software, a content management system I’d never used before and a 10 week deadline. So I certainly had plenty of challenges in place from the start.

Step 1 – Requirements Capture

The initial brief was ‘We need a website for the new Forth Valley Royal Hospital’. While I waited (not very patiently) for the Adobe CS software to arrive I used the initial brief as a starting point for a more in depth requirements capture. It was essential to have a clear perspective on the purpose of the website before I began. This is an important website to both the NHS Forth Valley Board and the population of Forth Valley, so it was essential to produce a website that provided site users with as much relevant information as was possible (within the project timescales).  I asked exactly what information the public would like or need to know about the hospital. After extensive and in-depth discussions, as well as referencing similar hospital websites I had a better idea of what was required.

Step 2 – Site Map

The next step was to consider the site structure, which was illustrated through the use of a site map (created using powerpoint). This supported my understanding of the information architecture and the structure of the content. The site map also provided a clear visual guide to all of the site’s pages, which was helpful in project managing the gathering of content. I encouraged comments on the site map from various project stakeholders to ensure the structure made sense and the content was full and complete. After feedback, I made a few minor amendments to the site map and the site structure was confirmed.

Step 3 – Content Requirements List

Because of the short timescales on this project it was essential to ensure that content for the site was in place quickly. Therefore the next step in the project was to create a content requirement list (using excel). This list displayed the page name, a summary of the content required, the person/department responsible for producing this content, the deadline date for providing the content with the drive location the content was to be saved to. Once this list was in place, the people responsible for producing the content were contacted by phone, email or through meetings to make them aware of their commitments and the expected timescales for completion.

Step 4 – Template Wireframe Design

Armed with my site map and a clear understanding of the content required for each page I then began the process of designing the wireframes of the page templates. This site would be content manageable through a system called Activedition. Activedition uses html templates with specific Activedition tags written into the html. Consequently I had to evaluate the content and how best to structure the information on the page using a limited number of templates. I wanted to keep the number of templates to a minimum because of the short timescales for the project and to make it more easily manageable for future users of the content management system. I came up with the following templates:

  1. Homepage
  2. Generic three column page
  3. Generic two column page
  4. Three column page with centre panels for ‘getting to the hospital’ and ‘floor plans’
  5. News homepage
  6. Mutimedia homepage
  7. Multimedia – gallery

Step 5 – Site Design

I now knew how many templates I would need to design. So, as always I began with the homepage design. I find this helps define the look and feel for the site and is a great starting place as it is the point of entry for many users. I mocked up two different approaches to the wireframe for the homepage. Once I was happy with both approaches I presented these to everyone in the office and we discussed the initial reactions to the design. With everyone’s comments taken on board I then produced a third design. This design encompassed the feedback from the first two designs and provided us with a final look and feel for the rest of the site. Using this design as a basis for the rest of the site I then went on to create the other templates required for the site. While I was working on the design I was checking that the content was being produced and was in place for the final push to get the site launched. I also went to the hospital during its final stages of construction, donned a hard hat and took photographs to be used on the site.

Step 6 – Code the Site
Once all the template designs had been created in Photoshop I now had to code the site. The detail of which I won’t go into here as it would take too long. But I used the doc type xhtml 1.0 Strict, external stylesheets and some jquery. I also built the homepage slideshow and the controller functionality from scratch in Flash.

Step 7 – Create Activedition Templates
I had all the templates pages coded and checked across as many browsers as I could get access to and now I had to produce Activedition templates from this code. Some of this work was entirely straight-forward, other parts were, well, lets just say, slightly mind bending. It was mainly the referencing of files and the menu system that proved to be the most difficult to work with. The version of Activedition NHS Forth Valley has is over 6 years old and lacks a great deal of the modern functionality of contemporary content management systems. I had to make a few minor amendments and simplify the left hand navigation design in order to make it work with the Activedition Menu systems. But other than that I managed to stay true to my original designs.

Step 8 – Populate the Templates with Content
Once I had completed the Activedition template build I began populating the site with the content. As we had a multimedia section on the site I created an NHS Forth Valley channel on YouTube to store the videos as our server seems a bit slow and not particularly reliable.One of the videos was a speech from the Chairman Ian Mullen and so I used the subtitling functionality in youtube to make sure this video would be accessible to everyone. It was quite interesting to see what the automated subtitling made of a Scottish accent! Needless to say I had quite a lot of work to do to amend the subtitle file produced by youtube to match the actual speech.

Step 9 – Test the Site
The code for the site had already been tested across multiple browsers and browser versions, but I checked this again and also checked that the site was easy to update using the content management system. I asked a selection of people within the organization to ensure the site rendered correctly and provided the information required of a hospital website. There were no technical issues, just a few minor content additions were required. I also went to the Sensory Centre in Falkirk to test the site with people with visual impairments using Jaws – Screen Reading Software . I was reassured that the site was navigable to people using screen readers and the people involved in the test were happy with the usability of the site. The only request that I wasn’t able to fulfill at that stage was that of a text only version of the site. However this is something we will look into at a later date. Or perhaps if we have a new content management system installed. I can but dream.

Step 10 – Launch the Site
I was happy that the site worked, had the information expected of a new hospital website, looked good and was accessible. Luckily enough we were ready to launch the site on schedule. It helped that my boss told me that the site had to be ready to go live one week earlier than I thought, but hey, turns out it was a good strategy as we hit our deadline and the site went live a week before the hospital opened.

Feedback from users of the site has been very good. Everyone feels it is easy to use, clean and contemporary, successfully reflecting the architecture and the ethos of the the new hospital. There are a couple of things that bother me slightly about the way the page loads, but if I ever get a bit of time to revisit that I will try to address this issue. Other than that I was happy to meet the deadline, especially since I had absolutley no experience of Activedition. I hope people enjoy using the site, but my key aim is to allow users to navigate quickly and easily to the information they are looking for.

Forth Valley Royal Hospital site goes live!

Art & Design, Photography, Sites I've Designed, Web Design 2 Comments

At last after much hard work and wrangling with a little known content management system (Activediton) the NHS Forth Valley website has been launched. I’ve been entirely responsible for the project management, design and development of this site. Working with the NHS Forth Valley Communications Department we have created an informative site for the patients and staff of the £300m hospital, which is the largest NHS construction project ever built in Scotland and one of the most modern and well equipped hospitals in Europe.

I have been working for the NHS Forth Valley for three months now and I am proud of what I have achieved in that time. Considering I only had access to Photoshop 5.5 and no other useful software for the first month, I feel I have managed to pull together a pretty solid site. The site has valuable content, which is accessible (well, as accessible as I can be within the confines of a 6 year old version of an obscure cms) and easy to navigate.

I am planning to share the process that I followed in order to complete the site, both for my benefit and hopefully to help anyone else approaching a project of this nature. So watch this space!

More fantastic colour photography – Holi 2010

Art & Design, Photography, colour No Comments

Here are some amazing, joyful, colour photographs from Monday (March 1st), people in India and other countries with large Hindu populations celebrated Holi, the Festival of Colours. Below are a few of my favourites, you can see more of these fantastically colourful photographs here. I wish I’d been there, although I’d probably need a plastic bag wrapped round my camera, as I’m not sure how you’d avoid getting covered in colour.

My pick of the web’s best funny dog photos

Animals, Dogs, Humour, Photography 2 Comments

A few photos that made me titter. Some of them look very familiar. Ehm Max…….

Carnival 2010

Art & Design, Photography, colour No Comments

Colour always inspires me. Its what drives me to paint and what excites me in photography. I’d be happy just sitting in an empty room if there was colour all around, its life, energy and emotion. These photographs of carnivals around the world are full of vivid and fantastical colour I love them! Take a look at more of these wonderful carnival images here. Below are a few of my favorites.

Stunning B&W Wildlife Photography – Nick Brandt

Animals, Art & Design, Photography, Wildlife 2 Comments

Take a look at some stunning B&W wildlife photographs by the photographer Nick Brandt here:

This is one of my favourites.

Top of page