A simplified, user-centred homepage realignment for Careershifters boosted the homepage conversion by 40% and decreased bounce rate by 15%. Read on for the process and results.

Careershifters is a service for anyone making a major career change, run by people who have done it successfully. The service is centred around a website stocked with articles, guides and top tips, and is coupled with a series of UK-based workshops providing face-to-face advice, inspiration and coaching. Over time – experiencing typical growing pains – the homepage expanded to feature an assortment of articles, along with various calls to action to sign up to a newsletter, purchase a guide or book a place in a workshop. Conversions were ok; but there was scope for improvement. When isn’t there scope for improvement?

The brief

Boiling down the list of objectives – including boosting newsletter sign-up, converting more visitors to customers, reducing bounce rate, funnelling more visitors to guide and events landing pages – the brief was summarised as follows:

Executive summary: We want to redesign our homepage to improve ease-of-use and to sell more stuff.

Perfect. Let’s go.

The process

The concise, no-bullshit executive summary is the work of Careershifters Creative Director Neil Collman. Neil and I tackled the realignment together with an open, collaborative process. We chucked quick mockups back and forth via Mockflow and involved the wider Careershifters team via Basecamp. The process was efficient and effective. Moreover, it was bloody fast. Within a short space of time we had a stack of concepts to take into basic user testing, and design and development raced forward from there. High-speed. Rapid. Agile. Whatever you call it, know this: it’s fast, open, collaborative and it works.

The results

We’ve compared the first week with the new homepage against a similar week before the change. During both of the sample weeks Careershifters was featured on BBC’s ‘Working Week on a Wednesday’, so the weeks are fairly comparable. Ha! Congrats if you just picked up on the subtle play-on-words.

Newsletter conversion sign-up is up 40%
Conversion rate for guide sales is also up about 40%
Bounce rate for the homepage – overall – is down by about 15%
Bounce rate for the homepage with certain keywords – e.g. “career change advice” – is down 45%

There’s something particularly interesting about these stats. The bounce rate is far lower for some keywords than others, which Neil attributes to the new homepage appealing more to those who are looking for “advice” better than those looking for “career ideas”. Which is spot on; that’s the sweet spot for Careershifters.

High fives all round. Neil and the team are a progressive group happy to work in new, smart ways to achieve stellar results. It was great to be a part of it.

Before & after

Before

Careershifters Homepage - Before

User experience collaboration for Careershifters

Careershifters Homepage - After

I’ve been prototyping in Fireworks for years, and it’s great; until I need to iterate the prototype. In an effort to find a fast iterative prototyping method I’ve finally settled on Blueprint. It’s efficient, easy to use, and above all, real. Nothing beats real code. Read on to discover why mocking up with markup is a good idea.

Here’s the simplest view of a typical agency approach to user-centered website production (sans research, content strategy, and lots of other important bits):

  1. Sketch wireframes on paper.
  2. Create some neater, more complete wireframes (neat sketches, OmniGraffle, Axure, etc). Throw away the paper from step 1.
  3. Prototype the wireframes and interactions (Fireworks, Axure, etc). Throw away the wireframes from step 2.
  4. Design comps detailing layout and artwork (Fireworks, Photoshop, etc). Throw away the prototype from step 3.
  5. Code it up. Throw away the comps from step 4.

Why this is broken

The most obvious issue is wasted effort. Spending so much time doing what is essentially re-work to get to a coded design means less time on  critical user experience elements like interaction and user journeys. Essential UX devices such as page-specific call to action design and bespoke content layouts can’t be achieved without a fat prototype and stack of design comps, which takes (too much) time.

The best approach? Get a mockup coded and into the browser. Not a semi-usable prototype. A prototype that feels real enough that it could be an un-styled website. If you ran out of cash for artwork you could launch it. That’s how real it should feel. Use real copy and a full IA. Iterate, iterate, iterate. In the browser, with code. Then design it.

Andy Clarke recently gave a must-see presentation on why the old approach to web design sucks. Aside from the obvious issue of wasted time, Andy highlights some other shortcomings;

While static visuals are useful for conveying look-and-feel, they are less than useful in conveying how a page will look and function when implemented in markup and CSS. Without a great deal of effort and perhaps multiple design files, static visuals cannot demonstrate:

  • the effects of liquid layouts
  • what will happen when text sizes are changed
  • the font stack
  • browser inconsistencies
  • simple interaction such as :hover and :target
  • JavaScript behaviors or dynamic AJAX content

Worse still are the expectations that static visuals set in the minds of clients, particularly when designers use these visuals as a method to get sign-off for a design. Is the fact that so many web pages are fixed width and centered a direct result of clients signing off fixed width design visuals?

How we can fix it

The quick answer is to skip from step 1 (paper sketch) to step 5 (code), iterate, and add design elements and artwork as the prototype matures.

Get working code online, test, iterate, and add some design elements as you go along. Think of it as a repeating loop, not a step by step design process.

This approach highlights issues with the mockup faster and allows more time for critical user journeys and bespoke site templates. In Andy Clarke’s words:

When I spend more time designing and developing than I do managing, my clients get a better job and I am more satisfied with the result. These are some of the areas that have made a big difference to me.

  • Coming up with new and better workflows
  • Designing in the browser
  • Learning to live with constraints
  • Designing systems, rather than sites

In summary: Achieve better user journeys faster by mocking up with markup.

How to do it: Hello, Blueprint

Methods for iterative prototyping are receiving good airplay at the moment. There’s been some good discussion at IxDA on the best approaches, Konigi is assembling a promising framework and Todd Zaki Warfel has penned a new book breaking down the options. Amongst the chat Blueprint is typically well regarded. Importantly, I’m fairly sure the world-beaters at Clearleft and Blue Flavor sling Blueprint-inspired code whenever they can, so that speaks volumes to me.

I’ve done some wrangling in Blueprint, and it’s great. If you know some basic HTML and CSS – and hey, if you’re a web pro of any flavour, you should – you’ll get a handle on Blueprint fast enough. Montoya and co have done a lovely job with the online demos; I poked away with Firebug for about 15 mins, copied the demo code and had some (rough!) mockups hacked together inside an hour.

How I work with Blueprint

I sketch on paper first. Paper sketches are limited to 5 minutes each, and are usually done within 2 minutes. I sketch a few different ideas, then take the layout that feels most successful and put it together with Blueprint. I try a few different approaches – I continue to sketch with both pen and paper and code. I’ve found time taken to mockup with Blueprint is comparable to mocking up with Fireworks, if not faster. The initial layout takes longer, but testing and iterating is way more efficient. And testing and iterating is where you should be focusing your time anyway. Fireworks is still great for interaction design, but when I’m mocking up and need to create real prototypes, Blueprint’s the clear winner for me.

Re-using your Blueprint prototype

I assume at least a few smart peeps are integrating frameworks such as Blueprint into their development workflow to avoid re-coding. There’s also a method for cranking Blueprint code into a WordPress theme (using a child Sandbox theme, for the WordPressers out there). So there’s definitely some possible code re-use, which is great. In any case, the prototyping results from using Blueprint are well worth the toil. Mocking in markup lets you identify problems faster, iterate faster and gives you the chance to re-use your prototype.

Beyond Blueprint

Meagan Fisher’s 24 ways article on mocking up in markup has me all riled up to learn some better front-end development skills. Here’s why:

In the past we’ve put up with Photoshop because it was vital to achieving our beloved rounded corners, drop shadows, outer glows, and gradients. However, with the recent adaptation of CSS3 in major browsers, and the slow, joyous death of IE6, browsers can render mockups that are just as beautiful as those created in an image editor. With the power of RGBAtext-shadowbox-shadowborder-radius, transparent PNGs, and @font-face combined, you can create a prototype that radiates shiny awesomeness right in the browser. If you can see this epic article through to the end, I’ll show you step by step how to create a gorgeous mockup using mostly markup.

Wow. Again, iteration efficiency wins:

Making color changes is another groan-inducing task when working in Photoshop. Finding and updating every background layer, every drop shadow, and every link can take forever in a complex PSD. However, if you’ve done your mockup in markup with RGBA and semi-transparent PNGs, making changes to your color is as easy as updating the body background and a few font colors.

Awesome stuff.

If you’re mocking up in markup, what’s your approach? Have you found a clever way to integrate your prototype and development workflow to minimise re-coding?

What happened? Andy goes MIA and is found a year later

by Andy Howard on December 20, 2009

Over a year ago in November 2008 I hit the publish button on my most recent blog post, then took a hiatus. A one year hiatus. Needless to say, life since then has been fun. And challenging. And amazing. So what’s been happening? A lot. Let’s put it in context and rewind back to 2008, then I’ll give the lowdown on 2009.

2008 – Globetrotting, remote working, geo-arbitrage and lifestyle design

Most of 2008 was spent trotting across the globe, and some remote working posts gave a few clues as to my location – there was some inspiration found in NYC and a classic example of geo-arbitrage from Costa Rica. Flickr and Twitter made my movements a little more obvious, but I slowed things down there for a while too. Without listing a stack of countries, I’ll outline the loose itinerary;

  • Thailand – what better way to kick off a trip? A couple of weeks in the sun, then took what I think is one of the longest flights possible; Bangkok-New York City (16 hours).
  • USA – started in NYC and took 3 months to drive across (and up and down) the country with my best mate. Loved it. Decided I’d live in the USA at some point in my life. Worked a little, partied a lot.
  • Mexico/Central America – crossed the border from the USA and spent a few months living comfortably, working remotely and surfing quality waves. Recovered the fitness I lost in the USA. Put the amazing theory of geo-arbitrage into action by working remotely for various clients at commercial US rates whilst living very well, and very cheaply.
  • Europe – flew to Amsterdam from Coast Rica. Worked my way overland through Eastern Europe (it’s Europe.. but it’s cheap!) for 3-4 months until I hit Russia. Didn’t enter Russia (visa, etc) but went as far as seeing St Petersberg from the Estonian countryside. Eastern Europe is incredible.
  • UK – flew from Tallinn to London. This whole time I’d been travelling with my best mate, and it was time for him to head back to Australia. I wanted to spend my birthday with my twin brother in London (well, our birthday) and put my UK ancestry visa into action.

So there I was. I was in London, it was November 2008, and I was at the tail end of an epic year. I based myself in the very cool area of Shoreditch and sub-letted a room from Dave of the-affair – isn’t that neat? I caught up with friends I hadn’t seen in a long time, partied some more (it’s a trend, I know) and snuck in a quick surf trip to France with a few mates (why not?). The $USD and $AUD were weak against the pound, so I worked a short on-site contract in London and started spending pounds instead of dollars.

2009: Professional development – from Consultant to Director

Here’s the thing about lifestyle design and remote working. You can earn an income in a stack of different ways. Most people aim for automation, a theory also known as muse creation and popularised by The Four Hour Work Week. I’m on my way there, but I’m not there yet. I earn my keep from consulting, and the value of my consulting, like most consultants, is largely determined by my experience. Now my CV was strong, but it wasn’t amazing. I’d designed experiences, set digital strategies and produced websites for some big names and had achieved good results. But I hadn’t done it all – I hadn’t directed large projects end-end and delivered. I mean really delivered something great – including the entire management and orchestration of every single little detail. I wanted to invest some time. A year, maybe two, maybe more. I decided to put my remote working goals on ice until I’d achieved a level of Experience Design Director.

It was like a capital investment of time; an expenditure of time to achieve a greater return in the long run.

Get me out of here

London wasn’t the place to be. I’d been there for around six weeks, and the day rates are good, but at the time it was the world’s third most expensive city. It’s also big, busy, filthy, and has an awful public transport system known as the Undergound. Beaches are beyond reach for daytrips. There are hardly any swimming pools (although I was swimming regularly in an outdoor heated pool in London Fields). Rent is exorbitant. International airports have been dropped in awkward locations. You get the idea – for all of its reputation, I really don’t rate London highly. It was time to leave. I made a lifestyle choice, and moved to Edinburgh.

Edinburgh

I took an opportunity with the best experience design agency in Edinburgh and immediately fell in love with the city. Who wouldn’t? Beautiful architecture, almost unmatched walkability, creative arts culture, underground vaults, international airport 20 minutes from the city, the immensely impressive Edinburgh Castle, a jovial and irreverent vibe, the Edinburgh Fringe festival, Arthur’s seat, the attitude of Scottish folk,  incredible and affordable accommodation.. it goes on. The architecture deserves a second mention. Edinburgh is the most beautiful city I’ve lived in.. and I’ve lived in Sydney (which is amazing, for those who haven’t been there). I just love it there. Luckily enough, another good friend of mine moved there at the same time and we started planning getaways from day one.

Professional development

I worked hard and threw everything into the gig – I wasn’t working ‘long’ (working long hours is what inefficient people and wankers do), but I worked hard. As 2009 started ticking away, I was in a senior role directing experience design for some big corporates. It’s not the style of work I’d like to do long-term, but it’s what I needed, and I made it enjoyable. We partnered with some other niche agencies in the UK and did some outstanding work – the projects I delivered are some of the highlights of my career.

Lifestyle design for location dependents

I mentioned the getaways. My ‘boss’ – she’s one of the most hands-off, flexible and capable MDs I’ve encountered – was extremely cool and is pursuing lifestyle design herself, so time off wasn’t a problem. If the schedule allowed for it, I was free. Over the course of nearly a year with the agency I had over 10 weeks off. Sometimes long weekends, sometimes weeks, sometimes a month. A few highlights:

  • Hiking in the Scottish Highlands – I dragged some friends along (reluctantly) and we climbed Ben Nevis, the UK’s highest mountain. By the end of the day they were as stoked as I was. We climbed it in winter; ice makes things more interesting.
  • Australia Day Ironman in Edinburgh – Frosty sand, a run, a swim, and lots of beer. Wearing nothing but speedos. The video describes it better than I can. (I’m the first guy interviewed – I’m shorter and not wearing a hat).
  • Snowboarding in France – Friends, French alps, wine, cheese, enormous bar tabs. And some rad snowboarding – the cover wasn’t great so I spent a few days only riding switch.
  • Surfing in Portugal – We hit Supertubes, one of the sickest waves in Europe. The surfing was fun, and meeting my girlfriend was cool too (ha!).  She’s an American who was living in Paris. Then she came to visit to visit in Edinburgh, and six months later was still there with me.
  • Australian Rules Football tournament – I played most of an Aussie Rules football season for Edinburgh, and we went down to England for a UK cup tournament. We made the final (good), but during the final I dislocated my shoulder (bad). Subsequently (as a direct or indirect result, I’m not sure!) we lost the final.
  • Exploring Europe – My girlfriend and I spent some time exploring Europe. I won’t list all the cities, but my favourites were Istanbul, the Amalfi Coast, and Rome.
  • France and Spain in a VW van – Surfing (who would’ve thought?). A thieving Frenchman broke into our van and stole passports, wallets, credit cards, cameras and some more stuff, but it was still a good time. You can’t let the loss of possessions get you down – it’s all stuff you can get back.

I was working hard directing experience design, but I was playing almost harder. Lifestyle design doesn’t have to be achieved working location independently – during the year I spent in Edinburgh I wasn’t going to let a day job alter my lifestyle design ambitions.

The opportunity I was waiting for

Whilst most of my remote working ambitions were on hold, I was still working on a couple of side projects with my good friends Zac and Zolton Zavos (who were recently named Creative Catalysts for 2009). We have a few projects spread across the interweb, and some others we’re launching soon. We’ve been gaining a lot of momentum over the past couple of years, and Zac and Zolton have been full-time on these projects for a while now. As of a few weeks ago, I’ve joined them part-time. As they know, I’ve wanted to work with these guys more regularly from the outset. The opportunity arose, so we took it. We’re now a three-man team (although there are more peeps behind the scenes).

Time to move

So after my capital investment of time it’s back to remote working. As much as I love Edinburgh and have some good friends there, the cost of living is too high without earning pounds. At the final party I threw at my flat I realised leaving people behind doesn’t need to be hard.

I wasn’t really ready to leave my friends and the city, but I just had to if I wanted to keep my plan on track. I know I’ll see some of them again soon – it’s a small world.

Travel is affordable, distance matters less than ever before, and it’s easy to keep in touch. But where should I live? During the 2008 recap I mentioned a country I wanted to live in. You may have also noticed my girlfriend is from there. It was time to go back to the USA.

Seattle

The rainy north-west of the USA, specifically. I’ve been here for about a month now. There’s some cool stuff going on here with art and music, we’re close to good snow, I surfed last week (in boots, a hood and gloves), I’m finally doing CrossFit, and I have a great studio space in what’s been dubbed the coolest artist enclave in Seattle. Working with the boys is great – we love what we do – and I’m amped for 2010.

2010: Ambition, remote working and automation

So that’s two years in one blog post. What does 2010 hold?

Most importantly, we have some goals and ambitions we’d like to achieve with the various projects we’re operating and launching. So we’ll give it everything, and we’re really excited about it. During my downtime I’ll continue my work on muse creation and some other lifestyle design experiments I kicked off back in 2008. Over the past couple of years, I’ve learnt a lot about remote working, automation and lifestyle design, and I’m considering spinning off a separate blog to share some of the learnings. Would you be interested? I’ll think about it. My blogging track record hasn’t been great lately (ha!), so we’ll see.

It’s nice to be back in touch

Hope to share some more updates with you soon, and I may even get back on track with some user experience and digital strategy posts. Twitter gets most of those updates these days, but I’d like to be (once again) sharing insights longer than 140 characters.

All the best for the new year.

« Previous123456789101112131415161718Next »