Starting in the right place

As mentioned in the previous post, gathering requirement & setting a scope provides a solid foundation from which to proceed. At the proposal stage it should already have been possible to check whether or not the requirements are achivable given budgets, time frames and how much the client is prepared to alter. Improvements to a shopping basket process will probably require more than some Photoshop mock ups. However, if there is an appreciation by the client of what’s required, and what’s achievable, then it’s time to get going.

The next thing to do, certainly if it hasn’t already been done, and probably even if it has, is to gather user feedback. Interviews with staff, customers, everyone who uses the site.

What to do when there is no feedback

There are a couple of strategies available for cases when no user feedback is available; ask those around you for feedback, and make yourself a user. In an in-house situation it’s likely that many of your colleagues will have suggestions for improvements, and will have heard feedback from customers. Often it’s possible to provide a strong enough case for placing a survey on the site, or carrying out more in depth reviews with customers. Otherwise constructing user personas, and testing against those is both invaluable and easy to arrange.

Using personas – putting yourself in the user’s shoes

Personas are fictional people whose personalities, knowledge, skill levels and so on, represent a range of typical users of a product or service. Getting into the mindset of site visitors is essential, and having these imaginary characters can be immensely helpful. In the case of the financial services site, which forms the basis of the next article in this series, it might be useful to build personas around existing and potential customers who’s knowledge of personal finance might range from novice to competent to expert.

Examine the experience from a user’s point of view – user journey

Once personas have been prepares, aspects of the site such as layout, tone of text and user journeys can now be tested in relation to the various personas. A good starting point is understanding the routes by which a visitor will have arrived at a page (or set of pages), what they will want to get from that page, and where they will head next – building a user journey. The objective here being to understand what the goals of the website are, determining an easy to follow path, and maximising the chances that the visitor will complete the intended journey.

When I’m asked to provide visual designs to improve conversions, or for designs based on some wire frames, I start to get concerned. When producing a good user journey, all aspects of web design in the broadest sense need to be considered as a whole including: visual design, copy, navigation, page layout,

Document the journey

Making notes about how visitors to a site, real or imagined, experience using the site helps identify areas of strength and weakness. These observations can be used to build requirements for improving the journey. Content may hard to understand, navigation may be hard to negotiate, with routes to complete actions not being obvious enough. Often a journey will assume knowledge which is obivous to someone who’s completed the journey before, but is totally baffling to a novice. Testing, either with real people or personas, should make any barriers very obvious.

See what’s missing

Hopefully by now patterns are emerging. It will be obvious why some things work and some things don’t. At this stage, solutions can be proposed, ideally by noting down possible actions; re-order navigation, reassess copy and so on. Together with the objectives, these form the basis of developing and testing solutions.

Acknowledge when something can’t be resolved

Sometimes all the criteria for a particular page, or detail on a page, simply cannot all be met. Sometimes this is because, with all the features incorporated, a step in the process has become too complex. If this is the case, it’s worth stopping, reviewing the criteria, asking “what is the problem we are trying to solve?” before reviewing both the criteria, and the possible solutions. Are all those features really required at that particular place on a page, or point in a process? Can something be done another way? What other possible solutions are there? Acknowledge that the original ideas or designs are not going to work, find new ones and test them against the new criteria, move on…

Wrapping it up

The completed research and findings can be inserted into a report. I usually try to keep the main body of the report concise, as that generally makes it more likely to be read and understood. Any lengthy analysis can be placed in an appendix for reference.

If you like this…why not check out my services & skills and contact me for a chat about what I could do for you?

Spending time defining the objectives and scope prior to commencing helps ensure that:

• The issues to be tackled have been correctly identified and that any solutions subsequently proposed will address them
• The work to be carried out is clearly defined.
• Upon completion of the work there are a set of requirements against which the work may be tested

I often start with a document containing the following headings:

1. Overview – a brief statement of why the work is required
2. Scope – an outline of what will be included and excluded from the work to be undertaken
3. Objectives – what will be done and  how the will it be judged
4. Main body of document
5. Limitations – factors outside of my control but essential for successful delivery
6. Conclusions – review of the findings of the main body of the document
7. Appendix – supporting material

There are many possible variations on the structure set out above. What’s important is to communicate clearly the objectives, the findings, the conclusions and any supporting material. The more in depth the document, the more important the overview, scope, objectives and conclusions become as these provide a summary for those people who are not going to read the whole document. Next, the review process.

If you like this…why not check out my services & skills and contact me for a chat about what I could do for you?

This set of Tumblr and WordPress themes were coded to scale for 4 screen sizes – 320px, 480px, 768px, and 1024px, and above – using a single set of templates. The varying layouts being achieved via @media queires.

The layout for the two larger sizes is 3 column, while the 2 narrower sizes are linearised, with each column stacking up below the next. For the 2 narrowest sizes the menus items were made a uniform full screen width. The number of items is a row was also reduced as screen width came reduced. So features were also substituted. Slide out layers became visible beside or below images. I was not convinced that the 3 column solution was best for the 768px layout. The reason choosing 3 column was that, on Tumblr especially, the sidebar content is likely to be very long and the body copy very short. It would be useful to review how the layout at that screen size look once the blogs are full of actual content.

Support for older versions of Internet Explorer was via a dedicated jQuery file and style sheet. The principle function of the jQuery being to do the work of the CSS3 selectors which those older versions of IE do not support.

jQuery was also used to provide slide out panels and apply styles to the last items in rows as the widths changed. This was at first achieved via media queries and CSS3 selectors. However, using jQuery to do some maths allows the last items to be found whatever the width.

The differences in the layouts between the Tumblr and the WordPress theme is due to the differences in the features and functionality of the two platforms. At the time of writing, Tumblr has a feature set that is very limited compared to WordPress. Consequently, while it was possible to implement pretty much all of the required features in WordPress, the Tumblr theme was much simplified.

If you like this…why not check out my services & skills and contact me for a chat about what I could do for you?

These desk top images are part of a series of 6 produced in 1024×768, 1280×800 and 1280×1024 sizes. Source images were manipulated where necessary to fit the screen sizes. Other details added included insertion of reflections and shadows.

At the time I was rather pleased with the improved reflections. If I went back to do them again, I’d add more shadow, move the guy further infront of the screen and adjust, slightly,the angle of the reflected monitor body.

Project time: approximately 1 day.

If you like this…why not check out my services & skills and contact me for a chat about what I could do for you?

Banner promoting a conference. The style was in keeping with the general identity for the conference.

As with all the banners for this client, this ran as part of a series of 3 on the site home page. Where as this loops, when deployed the looping would not be seen as the next banner would load.

Built using Flash.

If you like this…why not check out my services & skills and contact me for a chat about what I could do for you?

This took its visual cue from the video which it was promoting.

As with all the banners for this client, this ran as part of a series of 3 on the site home page. Where as this loops, when deployed the looping would not be seen as the next banner would load.

Built using Flash.

If you like this…why not check out my services & skills and contact me for a chat about what I could do for you?

This banner was designed to get people to enter a competition for the best graphics produced using client’s software. The image used are entries in a previous competition. With little else to go on, I had inserted a little playfulness with the swinging conference pass.

As with all the banners for this client, this bannar ran as part of a series of 3 on the site home page. Where as this loops, when deployed the looping would not be seen as the next banner would load.

Built using Flash.

If you like this…why not check out my services & skills and contact me for a chat about what I could do for you?

For this banner promoting a software product I made use of images produced using the software. The animation plays a simple visual trick using a screen grab of a Flash player.

As with all the banners for the client, this ran as part of a series of 3 on the site home page. Where as this loops, when deployed the looping would not be seen as the next banner would load.

Built using Flash.

If you like this…why not check out my services & skills and contact me for a chat about what I could do for you?

This previous version of creativeglo.co.uk had a life of around 18 months before it was replaced. I loved the design, but elaborate detail combined with extensive use of background images made the whole thing far too difficult to maintain. Also, it was far too inflexible when it came to changing requirements. A lesson learned. The next iteration was visually simpler but still seemed too elaborate for a portfolio website. So, in March 2011 along came this even simpler version. At the time of writing (November 2011) it’s undergoing a transformation into a ‘responsive’ layout suitable for tablets and smart phones with no need for major visual changes. Hopefully it’s got life in it yet.

If you like this…why not check out my services & skills and contact me for a chat about what I could do for you?

Second time around I searched around to see if there were any references to the bug. The closest references I could find suggested it might be something to do with margins. Regrettably, I’ve only been able to carry out a limited amount of experimentation. However, it’s become clear that it’s something to do with specifying line height, margins and padding for the paragraph where the bug appears. The attached screen shots show the original bug, and the same section of code with margin, padding and line height removed. There are a couple of odd things about this. First, even though all the paragraphs have identical styling, the bug affect only this paragraph. Second, The margin values are zero. These are set only to ensure unwanted margins are not added in by certain email readers.

It’s been suggested that the bug might be being caused by Outlook trying to insert a page break. Strangely when the email is printed from Outlook, the text formatting is perfect, and the page doesn’t break at that point.

I hope to be able to experiment further and update this post at some point. If someone has a practical solution which doesn’t break the layout in other email clients, please let me know.

If you like this…why not check out my services & skills and contact me for a chat about what I could do for you?