Morph got the opportunity to celebrate his first birthday in style on Sunday as a he got to meet up with all his Vizsla mates at as Vizz Whizz at Wiverley Plain in the New Forest. My favourite shots from those that Laura and I took are posted here, the other 32 photos (plus the full version of these shots) can be found on Flickr.

Where can I find part one?
Part one can be found on Paul’s blog Short Bored Surfer.

Paul is a UK based User Experience designer and Web strategist who likes to make things, surf boards and ride bikes.

To recap, Paul took the current site, regrouped and prioritised the content and removed distractions by grey-boxing the content. I played the part of the visual designer on this project whilst Paul handled the UX and UI design. This post details the second half of the redesign process for the Money Saving Expert website.

Sketchbooks at the ready

The first step in any design process for me doesn’t require any expensive apps or clever gadgets, just pencil and paper. This allows me to iterate through ideas quickly without the restrictions of unnecessary steps that get in the way of the idea generation process. The way I work is in a sort of visual mind map. I sketch a thumbnail of an idea and that might spark a couple of variations or new directions which I jot down around the thumbnail and link out to with arrows. I follow on from this by creating thumbnails or written descriptions for the new ideas and in turn they generate new directions.

By using arrows to show the flow from one idea into the next I can follow my stream of consciousness in either direction, which helps to add context to an idea when I look back later, ensuring I understood what I meant by my scribbles now I am no longer in the moment. I normally work like this until I have filled a page and then I go back and colour in or in some way highlight the best ideas on that page, and they become the starting points on subsequent pages for new visual maps.

Gridding the wireframe

Picking up the baton from Paul, the first thing that I wanted to do was to bring some visual structure to the work that he had done by working out a grid structure for the content to sit on.

Consistent spacing

I took the grey-boxed wireframe and whist keeping the hierarchy and scale that Paul had laid out, I worked out a grid structure that the content could sit on, whilst comfortably avoiding the constrictive, and in places, cluttered feel of the original design. I based the layout on a 960 pixel width keeping the right hand column in a similar proportion to the main content as the original.

Prominence within a framework

The other key component that I needed to consider at this time, was how I could break the rules that I was laying down with a rigid grid, and therefore draw the eye and control the flow of the users eye through the content and down the page. I wasn’t sure at this point how I would do this, but again I needed to be sure that I wasn’t being too restrictive with my gutters and column widths.

Consistent visual vocabulary

Once the structure was set, I moved on to deciding the style for the site, taking into consideration the audience as we had understood it. I was also conscious that we didn’t want to alienate the loyal following that Money Saving Expert had built up by straying too far from the feeling and style of the original.

As with the grid structure, setting up rules for a site that are followed throughout are important if a user is going to understand how to find their way around. In this instance it was also important to consider the rules that had been set on the original site that the users had already learnt, and keeping as many of these as possible.

Tweaking the colour scheme

This was another easy way to ensure consistency with the original design and help visitors from the old site feel as comfortable as possible. I took the opportunity to ensure the greens and blues toned better than they had previously, but otherwise I locked the pallet down to these key hues. The plan was to evolve the brand colours so that they emulated the colour of money, specifically a five pound note, rather than the bright colours used currently. I was concerned however, that this would make the site feel too polished for a site that was all about cheap deals and discounts.

Keeping the icons

To redress the balance with the colour changes, I kept the idea of using icons, but went for a set that brought some colour to the design and countered the potentially formal feel from the colour scheme. The icons were an obvious element to keep as they feature heavily in the original design and also they helped to give a more friendly feeling to the page along with the added benefit of breaking up the copy.

Button styles

There are actually quite a few buttons on the homepage of Money Saving Expert, not just for the search, but also for the email signup, purchasing books, polls, the primary navigation and the hero area. All of these sections are in slightly different contexts and serve different purposes but they all need to have the same feel and affordance to help communicate that they are clickable and are links. I tied the style of the navigation and buttons together and gave them a subtle gradient to lift them on the page.

The main call to action

This was the area that users needed to stop at first. Money Saving Expert is set up around the principle that users sign up for the email on the first visit and return to the site in the future via links in the mail outs. A combination of the Queen’s eye on a five pound note, a clear statement using words like ‘free’ and ‘money’, as well as highlighting the sign up field and getting it in a central place on the page all add to the prominence of the call to action.

Laying out the content

There is a lot of content on the front page of Money Saving Expert, but without a discernible structure to organise the mass of links, the eye has to do a lot of work making sense of the page. It was here that the grid comes into its own. I stripped backed the styling and stuck to the three column grid and introduced regular white space throughout, allowing the eye to make sense of the page very quickly. The end result is that the redesign appears to have a lot less content, when in fact it is exactly the same as the original.

Martin Lewis the brand

In the same way that the layout of the content areas needed addressing in the main body of the page, the same was true of the secondary column. The focus of this content was to provide details about the site and Martin Lewis, keeping it separate from the core site information.

Separate the man from the discounts

A big part of the draw to the website must be the promotion by the site owner Martin Lewis. Through his appearances on TV and articles in print, people have come to trust him as the only word in saving money. All that being said, the website is, in reality, all about the email. Repeat visitors arrive via their in-boxes, straight to the offers and don’t pass by the front door again. Therefore the homepage and more specifically the secondary content on it is content for the first time visitor. I had to ensure that it was clear what the site was about without getting in the way of the offers. I did this by sitting the content on a darker background but featuring Martin’s face in the strapline pod at the top. This balanced the page and the main call to action whilst still chunking the information correctly.

The finished article

Although Paul and I have tried to explain the steps that we went through in putting this concept together, the whole process was condensed down into a precious few hours to meet the article deadline. There was more that we could have done given the time, but we are pleased with the result nonetheless and it is always satisfying as web designers to see your work in print every once in a while.

Saving the Money Expert

On a final note, it turns out that the Editor of Web Designer Magazines knows Martin Lewis and has passed our mock up on to him. We probably won’t hear anything from him, but who knows, we could end up ’saving the money expert’ for real.

As you can see from the photographs the weather wasn’t anything like the blazing sunshine we enjoyed on the last Vizz Whizz earlier in the summer. It rained so much that I had resigned myself to not getting the chance to take any pictures at all. However there were a few breaks in the clouds and Laura and I took those opportunities to shoot what we could.

It was a great to see Morph’s friends again (there were 18 vizslak all told) and my favourite shots of the morning are below, including a fluked blur shot of Morph as he ran through the trees. All the rest of the pictures can be found on Flickr.

This is my favourite shot from a selection I captured whilst walking the dog down at Barton on Sea. The spray from the waves crashing against the groynes was creating massive puddles quite far up the beach and I had to be careful not to get salt water into my camera. I managed to huddle against a lifebelt stand to get some respite from the spray and it also provided some steadiness in the high winds that were swirling around the coast.

This is a desktop wallpaper I created merging five shots taken in quick succession as Morph ran at me over the heather on a walk near Burley in the New Forest on the weekend.

So it’s official. As of this week I have finished the strategy project I have been working on over the summer and moved to the other side of the studio to take up my new post as Head of Design at Redweb. In a strange way it didn’t feel real until I saw it print on my new business cards and in last weeks New Media Age magazine.

There won’t be any changes on this site, although there may be the odd reference to articles I contribute to the Redweb blog, as I will now be writing posts for them too. The main difference for me will be less hands on work with client projects as I now turn my attention to providing the strategic direction for Redweb’s designers, shaping the team, our processes, inspiring creativity and nurturing innovation in our work.

Don’t get me wrong, I am as big a fan of Apple as the next geek, but even I have to draw the line at the sorry state of affairs that is MobileMe. Introduced with much fanfare alongside the launch of the iPhone 3G, it has never quite lived up to the hype. The site often goes down without warning and constantly reloads the page when trying to read emails and calendar events. Needless to say, it hasn’t been good value for my seventy pounds.

Alternatives

After speaking to others and trawling the web for options to replace MobileMe, it seemed that the services offered by Google and DropBox provide all the connectivity to the cloud that I need without costing me a penny. Sprinkle on top a couple of choice apps for syncing to Outlook and I have a better and more reliable service than that which I had previously endured with Apple.

Other benefits of this setup are that I’m no longer tied to Apple and next year, when my contract is up, I can choose to move to Android if the iPhone OS doesn’t catch up in the meantime. Many of the iPhone owners that I spoke to when looking for alternatives to MobileMe are using Safari to browse to Google Calendars. This is because they are using their one available Microsoft Exchange account to pull in work email from Outlook and they were keen to know how to get seamless read/write access and syncing to their Google Calendars on their iPhone alongside pulling in their work calendars from Outlook too.

So for their benefit (and mine, in case I have to do this again) below are the steps to take if you want to enjoy a free equivalent to MobileMe, for minimal fuss, for when you can’t sync to Google through Microsoft Exchange.

Calendars

You can sync all of your calendars to your iPhone, with the same colour highlighting as you have in Google. You can even sync with calendars that you subscribe to, both those made by Google (for holidays etc.) and friends and family. The one exception is Google Sports calendars at the moment, because they don’t provide a link to the .ICS file.

It is a surprisingly straightforward three step process to get your calendars onto your iPhone once you know where to go and it is all explained below.

Step one – Tell Google which calendars to sync

Google will only send your primary calendar to your iPhone when you sync. To send all of your calendars (or any combination of your choosing, go to the iPhone select page on the Google Mobile website. You may be prompted to log into your Google account, but once you are in you will be presented with a checkbox list of all your calendars. Tick the ones you would like to have on your iPhone and click Save in the bottom right corner.

Step two – Set up on iPhone

Grab hold of your iPhone and follow the screenshots below, clicking on the highlighted links on each screen. The last screen shows that in the field labelled server, you need to enter www.google.com.

1. On your iPhone Springboard tap Settings
2. Tap Mail, Contacts,Calendars
3. Tap Add Account
4. Tap Other
5. Tap Add CalDAV Account

On the add account screen enter the following details into the fields:

• Server- www.google.com
• Username – Your gmail address
• Password – Your gmail password
• Description – Whatever you need to remember what this account is

Tap Next and the little Applebots will scurry away and validate the account.

Step 3 – Add your Interesting Calendars

The final step is to add any calendars that you subscribe to from Google’s interesting calendars list. To do this you need to go to your Google calendar and bring up the settings screen for the interesting calendar you want to display on your iPhone.

To get the address you need, right click on the green ical button (see the screenshot to the right) and select Save link as…. Paste the address into an email to yourself and open the email on your iPhone. Copy the address onto your iPhone clipboard and follow the actions outlined in step two, but this time, instead of Add CalDAV Account, tap Add Subscribed Calendar.

Paste the address on your clipboard into the server field and tap Next to complete. You can add as many of these types of calendar as you wish by repeating the steps with a different address.

Getting Outlook to play nice

The final piece in the puzzle is syncing events in Outlook with Google, so that ultimately they end up on the iPhone too. This requires the installation of the free, evaluation version, of a small application called gSyncIt onto your PC, which will sync all events on your default calendar with your primary Google calendar.

As gSyncIt only allows the syncing of 20 contacts with the free version, you can use GO Contact Sync. This is a straightforward piece of kit that will sync both ways with you Gmail account’s contact list.

Storage

I have replaced my iDisk with Dropbox. There is a free iPhone app to allow you to view files on the go, just like the iDisk app from Apple. On my Mac the functionality is essentially the same as before, but on my PC, I now enjoy automatic syncing with my Dropbox account. A 2GB account is free and although this isn’t the same as the 16GB that iDisk gave me, the ease of use means that I am likely to clean it out more regularly.

Mail

Here I simply replaced MobileMe with gMail. There is a gMail specific wizard built into the iPhone OS, just click on Mail, Contacts and Calendars inside Settings.

Contacts

As I explained above, you cannot sync you Google contacts onto your phone without using Microsoft Exchange, therefore I synced my iPhone contacts to the Outlook account I was using Exchange with and in turn linked these contacts to my Google account via GO Contact Sync(see above).

Ta da!

So there you have it, one iPhone tied to the cloud, connected to Outlook, and not a penny spent. If you have found any better apps, or indeed better ways of connecting an iPhone to Google and Outlook, then please leave me a comment below.

I have written before about my opinions on using URL shortening to help in real world situations where space is at a premium. I have now had the chance to put it into practice, but not quite in the way I originally intended. My idea was to use customised URL shortening to generate a memorable URL that could be put on a ‘car for sale’ poster that would help potential buyers to remember one simple address (such as tr.im/corsa) and find out the details online. This time I used the same principle but for a slightly different purpose.

The advert

I wanted to sell a washing machine which came as part of our house purchase last year, but we had never used. The local paper was offering text adverts for a pound, but previous experience told me that four lines of text wasn’t enough and people will call with questions and want to view and other such inconveniences. So I decided to put a customised shortened URL into the advert so that I could provide as much information as I wanted up front, and cut down on the questions and time wasters.

The design

This didn’t take very long. I just wanted a one pager that made the washing machine look as good as possible and made it nice and clear just how much we wanted and how to get in touch. After that I had some extra information from the manual such as dimensions and wash cycle, along with some photos that Laura had taken of the machine. I laid out what I wanted in one sketch, and then went into Photoshop.

I knew that I wanted a water based, but fresh looking colour scheme to compliment the big white photo of the washing machine that was going to sit on the right of the layout. I choose yellow to focus users on the price and the call to action with a darker colour for the block to promote the free manual and hoses. I tweaked the position of the price sticker and the hose and manual block once everything was in, and in the end I decided to leave my logo out of the footer, not least because it wouldn’t fit in with the colour scheme.

The final page

So here is the final page – sketched, laid out and built over an evening – that sat behind the shortened URL. By the way my mobile number doesn’t really have nine zeros in it!

Result

It was suprising how many people visited the page over the weekend after the paper was printed. As the screenshot to the right shows I had 117 unique page views (second row down) by Sunday night, by which time I had had nearly a dozen phone calls. Needless to say I sold it pretty quickly.

These are some of may favourite shots from the day, but you can see all of my photos from the walk over on Flickr.

I have been asked to write for the JavaScript section of new designer focussed blog Six Crayons. In their own words it consists of of six front end web design blogs all made for everybody that is interested in learning more and sharing. You will find a multitude of worldwide creative and inspiring designers on sixcrayons. All sharing what they know.

The request arrived on Twitter early last week, only a few days after I had completed the sixth post for this site which had allowed me to launch. So I started thinking about my experience with JavaScript and how I could write a post that would inform, entertain and send a few people over here to check out my other musings.

Sir Jimmy

The title of the post is going to be “Why JS doesn’t stand for Jimmy Saville” and will discuss, amongst other things, the development of JS in recent years and how the current ease of implementation is not reason enough to “let JS fix it for you” (did you see what I did there?).

I am also considering whether to try and did out some Jim’ll fix it related imagery to sprinkle on top of the post, but that will all depend on how much time I have with other projects that I have in the pipeline at the moment.

Brand Randomapricot

I see this article as an opportunity to begin to raise my online profile now that I have a permanent home in this blog. I have a few other tricks up my sleeve to help with this cause, both online and off, and I hope over the next six months to put them into action. My aim is to become an recognised as an individual for my industry leading thought.

I can’t believe that I am writing this. For the longest time I have been a staunch advocate of Launchy and it’s simplicity. I have even gone so far as to think about investing time into building the Helvetilauchy skin that I designed.

However, after moving desks a few weeks ago, and having to reconfigure my dual screen set up, I couldn’t get Launchy to work. Whilst having a Google for a solution, I stumbled across a link to Enso, an interesting bit of kit I had seen before, but had discounted because it was shareware. This time when I arrived at the Humanized site the banner read “Enso is now free”.

Obsolete key

Enso sits in between you and any application that you have open, allowing you to do small tasks such as open files, folders and links, make a caluclation, look up a word or embed a map, finally making use of that good for nothing waste of keyboard space, the Caps Lock key. Now I don’t know about you, but this is not a button I push very often, if ever, finding that the Shift key will suffice for most of my capitalisation needs, but with Enso installed it takes on a new purpose.

By holding down Caps Lock a welcome message appears in the corner of your screen inviting you to enter a command. It is here that the fun begins. Depending on whether you have text selected or not (more on that show stopper further on) you have a range of functionality at your disposal.

More than a launcher

What sets Enso apart is that its primary function is to help to perform simple tasks in a consistent way, whatever application you happen to be working in at the time. This could be opening another app, file, folder or web page, but equally it could be finding the definition of a word, adding a map centred on a location, or changing text from capitals to lowercase.

I went for the full beta install which gave me all of the Enso functionality currently available in one package which includes the ability to learn new commands.

Highlights

As I alluded to previously, the jaw dropper for me is Enso’s ability to manipulate a text selection. Highlight a placename in an email, press the Caps Lock and type ‘map’ and a Google map centred on the location you specified will be inserted in it’s place. Highlight a URL in a browser, a file or folder in a window or on your desktop and this time type ‘learn’ (or ‘le’ with the inbuilt predictive text) and you will be prompted for a shortcut name to use in the future.

I could go on, talking about the ‘definition’ command or doing sums on the fly, but this is really one that you have to experience for yourself. This application is free, unrivalled, and set to improve as more downloadable packs are made available by the generous folks over at Humanized.

I get easily distracted when I write. If there are settings to tweak and functions to play with, I will procrastinate by playing with them rather than getting on with the task at hand. Until recently my only way around this was to use Notepad, as all I could really change was the font and the colour and that only wastes ten minutes or so. I guess that it is in my nature as a designer to be thinking about layout and presentation at the same time as creating the content, but I have always found this affects the flow of my writing, not to mention the length of time it actually takes for me to finish.

So imagine my surprise when I came across DarkCopy, a free online application that goes full screen, blocking all distractions, stripping the functionality right back but leaving the all important in-line spell checking from your browser. Add to this the ability to save out to a text file plus the slightly geek nostalgia from green on black text and you have the perfect blend of text editing simplicity.

…the slightly geek nostalgia from green on black text … the perfect blend of text editing simplicity.

I should mention that DarkCopy came about as a free spin off from Hog Bay Software’s WriteRoom, which provides this Mac only functionality as a paid for software. If you are PC bound (as I am for a lot of my work based typing) then I can recommend Dark Room as an open source, stand alone equivalent.

DarkCopy was a lifesaver for me when writing a 300 page report recently, and I now use it to help me focus when writing anything from emails to blog posts. I recommend you check it out if you are of a creative disposition and you spend more time worrying about widows, orphans and the kerning on your headings than you do about getting your content written.

We are thinking about selling Laura’s car, but I don’t want to pay to put it in Auto Trader and I’m not desperate enough to stick it on eBay yet either. Basically if someone is willing to pay what we are asking and is near enough to collect it then we have a deal. It seems to me that most of the time, when people are faced with a similar conundrum, they go all Tony Hart and turn their motor into a mobile advert.

The usual rubbish

On the face of it, this would seem like the perfect solution. As you drive your car around the local community, your A4 advert proudly displayed on the inside of the back window, it can be seen by all of those potential buyers. The reality is somewhat different. You have a shorter than normal window (no pun intended) of opportunity to get any information across to the viewer as you go tanking it down the high street and to top it all, they have to memorise your contact details in a couple of seconds. Unfortunately the approach most people seem to take is to pile on as much information onto the advert as possible; in the smallest font they can get away with, and sign off with an eleven digit mobile number. Now I don’t know about you, but I don’t have the reading skills of Johnny Five and I certainly can’t recall a full mobile number after a five second viewing.

The montage at the top of the page show some typical (and not so typical) solutions to this challenge as provided by Flickr and a five minute search. They are representative of most of the attempts that I have seen in my time and I think they are all missing a trick. None of these guys are capitalising on the web to get the bulk of their information across and ensuring that the viewer can more easily remember our contact details with only a few seconds exposure.

My social experiment

To be honest, I’m not sure whether the general public in the sleepy New Forest town where I live are ready for shortened URLs, but that is my solution and I’m sticking to it. The way I see it, the car is the advert and all I need to tell people is that it is for sale, roughly what I want for it and how to find out more. You don’t need to know the make model and engine size, its written on the boot, and you can tell if it is a good runner or not by the rattling noise it makes when it turns the corner at the end of the street.

I want to give you as little information as possible, letting the car do the selling, allowing the user to spend the time remembering the web address. Then they can log on at home, I can tell them all they wanted to know (but would never have fitted on the ad) and let them make their decision, or even ask a question, in their own sweet time.

The solution

So here it is, my answer to the Car For Sale challenge. Only three lines. All you need to know.

Job done. I have put the emphasis on the For Sale at the top to draw the eye and establish the purpose of the sign. Then its onto the address I need them to remember. As a bonus, the price and dub dub dub have been added, knocked back as secondary information, to show a guide price and that the link is a link.

My biggest concern with this is that the unenlightened will miss the dot between the tr and the im and never reach the site. I also have no way of knowing how many will see the ad versus those that visit the web address. This is not my usual flavour of vigilantism, but if we do decide to sell the car I will write a follow up post to show if the experiment worked.

February

April

May

June

July

August

This is how I want my Launchy to look. Full screen and proud with a just hint of Swiss, not hiding in a lozenge in the corner. This is my vision for the form meeting the function that helps make using a PC bearable.

I have wanted to start a blog for a longtime. At first I tried micro-blogging with Twitter to see if I had the discipline to add content on a regular basis, without the pressure of styling the output. The natural progression from this seemed to be Tumblr, but I convinced myself that Wordpress would be less restrictive and I could implement a simple layout relatively quickly.

Man, how wrong could I be?

Act first

I have attempted for the last six months to put together a simple blog very little furniture, that would allow me to use any imagery I wanted in a post and wouldn’t date as a design. What I hadn’t bargained for was that the snatched hour here and there that I found to work on the site did allow me to make progress, but if there was a gap of more than a fortnight then I would be bored with the layout when I returned.

I ended up stripping out more and more functionality in order to give me less to tinker with, which did eventually let me complete the build. Having built the site in Camino and Firefox, I then did a quick around the grounds on some PC browsers to see how the layout fared through the Microsoft window.

I ended up stripping out more and more functionality in order to give me less to tinker with, which did eventually let me complete the build.

Luckily the design (mainly due to a lack of frills) holds its ground across all the browsers I checked in, bar a few little quibbles which, being the client for a change, I have the luxury of ignoring if I wish. So, as not to impede the addition of some content, which after all was the raison d’être this project, I have overlooked those issuettes for now.

Clean up later

So, my vision for this website. It will inevitably evolve over time both in terms of layout and content, but for now it is to be a more permanent and more visible home than my moleskine, for the thoughts and ideas I have about design and the web industry.

The other reason is because I wish to become a better writer and to become better known to my peers. I have been in the web industry for a decade now, and in my current role I plan and oversee the design and build process rather than be part of it. I see things from up here that I just wouldn’t have seen from the ground and I want to see what others think of my opinions.

So feel free to leave your own comments and thoughts as I may at times be controversial in my prose, but all with the intention of leading the industry in new directions.