A while ago a site came to my attention that looked like a great candidate for a usability makeover exercise. This article looks at the journey through the existing site before going on to propose changes that should make for a better experience for visitors. The site, which sells personalised greetings cards online, is a sub-section of a site whose main revenue is online photo processing. All the observations made here were based on the site as it was at the time the article was originally written. In reviewing it for post I see some things noted here have now been changed.

Arriving via the main home page

Main site home page

When reviewing the user journey it’s interesting to start from the main site home page as it can be assumed that not all users will have gone direct to the sub-site. From the main home page (image on left) there is no immediately obvious link to the greetings card site. There are is a well placed horizontal menu, but none of the drop down menus contain an obvious link to the site. ‘Cards and stationary’ leads to a page relating to cards and stationary made from user’s photos.

The greetings card home page

Sub-site home page

The greetings card home page itself (image on left) is immediately engaging due to the, Flash based, carousel of cards. However the layout would benefit from some rationalisation. There are 3 introductions, ‘How it works’ top left, ‘Take a tour’ towards the bottom of the page, and ‘Get started’ just above that. There are a couple of invitations relating to signing up ‘join’ top left ‘Discover photobox’ bottom left. In all there are 5 ways to start selecting cards.

The ordering process

The ordering process itself seemed to work well enough, until the sign in stage. It probably just because I’m using a mac that I was unable to sign in. The browser itself had not crashed yet the ‘stop’ button on the browser window was not available. Within the Flash application it was not possible to click on the ‘close’ link to stop the process. The only option was to close the browser window and try again. A second attempt to sign in was also unsuccessful. Switching off javascript, which also disables Flash, left me with no means of viewing or purchasing cards. Once off the home page, the only route back there is via the ‘Greetings by photobox’ logo.

Recommendations

It could be argued that my experience while trying to find the site and make a purchase was less than satisfactory. So how could things be improved?

Recommendations for the main home page

1. Find space to promote the greetings card site on the main home page. Preferably somewhere that will be above the ‘page fold’ for most visitor’s browsers.
2. If this sub-site is suitably important, give it it’s own tab in the horizontal menu.
3. Place a link on the photo greetings card page to assist visitors who’ve arrived there searching for personalised cards

Recommendations for the Greetings home page

Revised design

The greetings card home page would benegit form reorganisation and simplification:

1. Give the ‘Take a tour’ link more prominence
2. Remove the tag cloud in the welcome panel. Although it’s a nice idea it’s taking up valuable space.
3. Move the ‘Click here to join’ away from the welcome panel. Its presence there could suggest that registration is necessary before browsing the site.
4. Rationalise the routes to selecting a card.
5. Give more prominence to the welcome message.

Other greeting card home page changes

Slide out menu

The ‘Choose an occasion’ panel has been removed completely. This is a risk, and testing might lead to it having to be reinstated. In it’s original form it seemed to be large and unlovely. I’ve moved it so that it’s now accessed via a nice big, bright, pink ‘View all cards’ button, the one that’s hopfully sitting prominently just below and the the right of the card carousel. Here it’s part of the main body of the page, clearly part of the card selection process. clicking on the button will open a pop-up layer menu (image left). It could have been called ‘View cards by category’, but that takes up a lot of space. Without more information about user interaction, and the ability to test, one can’t be sure what will work best. I’m hoping a clear, and elegant solution will work. The issue of what happens when you select an item on that menu is one that opens up whole new user experience questions. For that reason the reist of the article covers some of my initial observations, but doesn’t cover the whole journey. May be one day…

Take a tour

This is a rather text heavy page that may well be skipped over, or exited immediately. It would be more engaging as Flash presentation, opening in a pop-up layer on the home page, or perhaps reworked to include less text and some simple diagrams or images to illustrate the process.

The order process

Cart page

The main problem was the use of Flash. Apart from not being accessible, it also was not very usable. For as much of the process as I was able to see, the screens were what could be described as functional. From my point of view it would be a given that the process, and layout would be examined in detail as part of a redesign. For example the ‘back’ button could be moved from bottom left to be part of the ’1,2,3′ steps. I’d thought this was a breadcrumb trail. The fact that it is not is a missed opportunity (although it does change colour to indicate progress).

The ‘send your card’ page, reached as part of the buy blank option, could re organised. The prominent ’1,2,3′ steps. Could be repositioned to allow a better flow to the page. The main body of the page could be reorganised to look less daunting. Suggesting to the user an order in which the tasks should be completed and separating the postage information from the inputs required of the user.

Conclusions

There are several lessons to be learned here. Once I started to look it became obvious that there are so many things that could be twaked. Listing everything was to large a task so, this article has been cut down. First of all, it’s really beneficial to consider information architecture, usability and accessibility at the start of a project, and to test and revise as the project progresses. All to often, these aspects of the design process are ignored, and making changes later is inevitably time consuming and expensive.