Brad Haynes / Blog

My iPod Touch apps, originally uploaded by LondonBrad.
 

After nearly seven years of designing and coding ocado.com, I’ve decided that I really need a bit of a change creatively and logistically (living in East London and getting to the office in Hatfield was never ideal). Luckily Ocado has led the way in online grocery retail since it started trading and just about all the things we’ve implemented on the website over the years have become part of the vernacular in grocery site design.

Some of the best bits:

Smart trolley

Allows customers to get more of a handle on the shopping they are (or aren’t) going to buy. My favourite bit is the AJAX’d pictures view that shows quantities as multiple items.

Speed

From day one, we knew that buying groceries online was a fairly unique task for most users - with most visits resulting in around 50 products being added to a trolley. Speed is a key factor in making this a viable option for customers. Pages have always been as light as possible (in terms of HTML, numbers and weight assets, and simplicity of the DOM for fast rendering)

Catalogue navigation

In the latest incarnation (currently in beta testing at time of writing) the catalogue navigation has seen a huge overhaul and now uses meta data to drive structure. This has enabled us to create contextual navigation that allows the system to represent different modes (type, status, storage, lifestyle, who it’s for, brand) of decision making throughout the task of finding a product. This also works to make an interesting journey if users don’t exactly know what they’re looking for. There are many other advantages to this system which I’ll blog about another time.

Simple delivery slot booking

Slot (delivery time) booking has become inherently complex with multiple address functionality, variable pricing, variable thresholds and minimum delivery values, availability and green vans. Throughout these changes and additions we’ve managed to keep the process simple.

Simplicity

My goal with any design is simplicity at a very high level. This may sound like an obvious usability goal but refining any process or interface to its most minimal constituent parts at an early stage is something that often appears to be overlooked.

Accessibility

For the most part accessibility is EASY! However you have to think about it as a fundamental part of design and code creation — it’s a painful thing to have to tack on. I also think that it helps you make lots of the right design decisions. If you design with accessibility in mind I think this also helps avoid many obvious usability problems.

Making the customer the most important

Luckily this is something that’s been at the core of Ocado and the way it behaves towards customers is reflected in all aspects of the business (with the exception of some rather irritating radio ads). I never saw any resistance to changing things on the site purely to make users’ lives easier.

First Non-framed UK grocery site

This was a pet goal of mine for many years. Ocado used frames for a long time, for performance of ‘adding to trolley’ and the stable user interaction behaviour it provided. I never liked this even though I was fully understanding of the advantages it had. The semantics of having different pages in different states appearing as one, and the inherent problems and design issues this has meant that I was always aiming for a non-framed design that could offer the same performance.

Whilst I was considering it a protest until the BBC launches a Mac version of their iPlayer, I’d held on long enough and really wanted to see what the experience was like.

Read the rest of this entry »

After many months (on and off) of testing, reading, deliberating, scratching my head and waiting I’m finally happy that I’ve found the perfect settings for encoding video with Handbrake for playback on my Mac and AppleTV.

Read the rest of this entry »

It’s time for a list of independent software that I can’t do without on my Mac. It will mean more to some than others, so forgive the slightly technical slant to some of the choices.

Read the rest of this entry »

Ocado.com has some new features available to customers this week. The thing I’m most pleased with is the full-page trolley viewer, organising products and images to give users a more positive understanding of what they’re going to buy.

Read the rest of this entry »

Reading a very interesting blog posting about the demise of Flash, I was left with the question: Is Flash really in demise? I also wanted to add my thoughts as to why it should be.

Read the rest of this entry »

Windows Genuine Advantage programme does have some slightly unintended advantages when it comes to non-Microsoft browser proliferation.

Read the rest of this entry »

I took the plunge and coughed up £200 for Apple’s Aperture application because the combination of iPhoto and Photoshop really just isn’t a useable option for a keen amateur photographer like myself who shoots more than a handful of images at a time.

Read the rest of this entry »

I’m really impressed with this website — and it’s free. Basically, it’s a bunch of templates for paper lens hoods. Download the PDF for your lens, print it out, tape and attach.