The process of 'fleshing out' the CPP website from the wireframes into mockups revealed a number of issues that were not clearly apparent when developing the wireframes themselves.
The wireframe:
The following shows a developmental procession of the CPPAP site as the mockups progressed.
The first mockup which was developed from the wireframe as it stood:
The main image wastes far too much real estate with no real benefit to the user. The login is uninviting and cold and the search feature appears as an after thought.
So a second draft progresses:
The second draft gets rid of the large central image and replaces it with a series of promotional images that illustrate some of CPP's major clients, such as QANTAS, the AFP, the RAAF and other corporations. These are to be an animated slideshow rather than static images.
The search feature is now better placed as part of the navigation array.
However, the login, while better than the first draft, is still cold and uninviting with a more or less generic look about it. The IP Look-up is revealed with a flag with a fairly superfluous note beside it.
So, a third draft:
So... A new look. The 'having problems' links are removed. If the site detects that the user is having trouble, it can 'offer' assistance depending on the issue (like customised error pages, the site can address the problems specifically). Account management now appears afterthe user has logged in. It replaces the now superfluous 'create an account' component. a personalised note to welcome the user back in now appears after login.
A small 'information' button on the login panel is now in position at the top right, where the user can find more information about the reasons for logging in (if they are interested). The flag is represents the IP lookup, so the site can deliver region relative content, with the shopping feature working in local currency. If the user clicks on the button, they can change the location (if the IP Lookup gets it wrong).
The final image shows the shopping basket as a small floating panel that is accessible by the user from any page. This allows the user to move around and browse the site after having made initial purchases, similar to walking around a large store.
Clearly, the wireframe will need to be revisited to reflect the progression!
