theNetFlow.com

Phoenix Park Website – A Critique, a Redesign, a Realignment…

The phoenix park is the largest enclosed urban recreation space in any capital city in Europe. Located to the west of Dublin, it is 707 hectares of parkland, forest, lakes and recreation space. A gem in the centre of the city and anyone who visits Dublin, this location is a must visit for a number of reasons.

The website, while not the worst example of government sponsored web design in Ireland or the world at large, probably wont help you plan that visit very well and I think it definitely could be much better. There are a number of very bad design and usability mistakes that I feel could be rectified by both redesigning and realigning the site to better serve any visiting users.

A Critique…

Layout

The layout of the site is a sign of being designed with a specific screen size in mind. In fact, on the main page it looks like the news & events list has grown much longer than the original designer had intended. In the menu, the layout doesn’t seem to take into account any differences in browsers/Os’s as you can see above unfortunately it has started to wrap on the line below. Drilling further on, the layout of the site does not give itself well to announcements of various sizes. This may well be an issue that again has become prominent since the design was completed. Maybe not enough work was completed on what was actually going to be displayed on the pages. Its always a difficult step to reach out to the client to find out the various types on information that they are going to want to convey, and to then image your design with that content in it. Getting that info very early in the process is very important.

The layout suffers from a lack of highlighting or direction. The three/four column layout is a little confused, and doesn’t help highlight any particular column or even separate them very well. And this layout is used nowhere else on the site so there is no familiarity when you go deeper into the site. Now I don’t expect the homepage layout to be featured everywhere else in the site but having familiar index type pages is a very useful tool for guiding users around.

The main pages lack of direction and how to fix it is something that I talk about later on.

As one of the most beautiful places in Dublin you really want to be able to show that off. The homepage of the site has a couple of images that show a bit about the park. However, the images aren’t ideal – they are small, not optimised for the web, and don’t really add anything to the page. Example – The image on the right is of the Wellington monument. One of the parks main attractions. However – nowhere on this page is it even mentioned. There’s no way to find out anything else about what that images is. If they were only for decoration – I think you use better photos?

Digging a little deeper, to the following page for example – http://www.phoenixpark.ie/visitorinformation/attractions/ and you have the main attractions of the park listed. Again, the images used, while they could be excellent, are too small. Unfortunately, there seems to be no thought about where the images are going to be used throughout the entire website. All of the images on this particular page are even different sizes, and this leads to another point – there’s no template for image sizes. This is a common website management tool – you know where the images are going to go – so you know what size to make them.

The phoenix park is one of the most beautiful places in Dublin, and the imagery of this site does not do it justice.

Navigation

This is one of the main usability problems with this site – the navigation is not as clear as it could be. Imagine the scenario – A couple, in planning a Saturday day trip with their family wants to see a map of the park – which item would they choose? They choose “maps” of course. But say they want to plan to see some of the attractions?

One of the most important things about any brochure/informational website is being able to give people the information they want as quickly as possible. And for that to happen – the menu’s have to disambiguate as much as possible. You don’t want a user to have to click on 3 different menu items because they’re quite similar. So with this, you either reduce the options, or give them more precise options. The risk with giving fewer options is that you could then end up not helping the user at all as they might think the site does not cater for them. And on a site like this - which has no site search functionality that is definitely a possibility.

To not give a user an easy means to search your site is a usability error on the highest order. It might never get used if people get to your site through Google and are immediately gone but on a site like this – the homepage is where people start. And people are used to have site searches, and its so easy to implement that it is a very strange omission.

The Redesign

Making it better

There are a few ways to guide people when they get to your website. The two I tend to focus on, are to either to try guide the user where I want to, or to try and imagine what the user wants to get from my website. In this particular site there is no real reason to guide the users in one particular direction. No product to sell (apart from a visit to the park of course, but thats different) or no signup to gather. In this case we want the user to be able to get whatever information they want about the site as quickly as possible. Not just a redesign but a realignment. Both in fact.

Redesign vs Realign

I feel this website needs both – a redesign to look after the usability and other design flaws, and a re-alignment to better suit the users that are going to be coming to this website. If you want to read an excellent article on the both of the above – and when either is warranted check out the following article from WebDesignerDepot – I feel this website needs both – a redesign to look after the usability and other design flaws, and a re-alignment to better suit the users that are going to be coming to this website. If you want to read an excellent article on the both of the above – and when either is warranted check out the following article from WebDesignerDepot – http://www.webdesignerdepot.com/2010/06/redesign-vs-realign/.

Redesigning the Layout

The current layout is unfortunately a bit dated, and unfortunately over time and without a content strategy, the front page design has suffered. This is because over the years, the image sizes have obviously changed, the number of new articles has also changed and I suspect the number of menu items has changed – and this has meant that the design has not grown with the content or no set content strategy was in place to ensure that the the users of the site were able to update it over time without affecting the layout.

The one important column on the page is overused, with both news and events listed there. And even with the link text it can be quite difficult to see which each of them are without clicking on the link. I propose changing that out – You want your most recent items on the homepage – and you want it under the right headings so people can gather information very quickly about whats on or whats new in the park. On a minor note the heading for that column isn’t great – It just looks like another item in the list – not great for usability or anything else for that matter.

So I redesigned the site using a three column layout – Each column for a different type of update – News, Announcements and Events. This covered the three most used types of post and also allowed the user to quickly see which was more important to them! Each of the headings should be clickable to bring them to posts of only that type. I highlighted the events column as this should stand out – You want to attract as much attention as possible to these as you want to attract as many people as possible to the park!

This brings on the second part of the front page changes – realigning the navigation.

Realigning the navigation

The old navigation was confusing – at least to me. Whats the difference between “visitor information” and “about”? And unfortunately you have to click on both to find out. Meaning if you got it wrong then its just extra clicks to get back. What my concept calls for is a drop down menu with lots of information. This means that you can click on both – See what comes under them and then click on the appropriate item that you might be looking for. I’ve added this for many of the menu items – this should ease the navigation for the user.

It also means that the website owners have to think better about where items go – and what overall heading to use. I personally can’t see the difference between about and visitor information – and I feel these should be amalgamated under one heading on the navigation. The added advantage of drop downs is that you can then separate out below that if you really feel its necessary.

Then I added a search options – one of the glaring omissions from the original site. This is also in the form of a drop down just to keep in line with the design but that isn’t entirely necessary either.

The new front page I feel better serves users and helps them find what they are looking for quickly and easily.

Other Additions

I’ve also included a revamped footer – which I feel also benefits the users. First off is the addition of a sign up box for news or event updates. This is a pretty big omission from the original site as it can offer an excellent opportunity to advertise new events to people who are interested in the park, and to send out announcements as well.

Next is immediate contact information – Address, phone numbers, etc. Although this information was already on the site, it wasn’t that simple to find immediately or in a hurry.

The footer now also includes a little map, with the location of the park, but that map is clickable to bring up a bigger Google Maps page of the map. This means you can get directions etc very easily from wherever you are.

Below that again you could add sponsorship logos and the OPW logo etc.

Conclusion

Normally I would but more work into the article pages of websites but this mini project was unfortunately cut short by paying work. Unfortunately I’m also very busy in work so I don’t think I’ll get back to this concept any time soon. However I did offer the design and code to the OPW but they didn’t reply to my follow up mails. That doesn’t really bother me so if anyone wants the code or to use the design – feel free. Obviously the logo and other images are property of the Office of Public Works.

Live site – Front page, article page(not finished, nor will it be unfortunately)